{% extends "repo.html" %}
{% set active_page = "forum" %}

{% block title %}
    {% trans username=username, repository=repository %}Forum of {{ username }}/{{ repository }}{% endtrans %}
{% endblock %}
{% block content %}
<x-vbox>
    <x-frame style="--width: 896px;" class="flexible-space">
        <x-vbox>
            <details class="reply-area">
                <summary>{% trans %}Post topic{% endtrans %}</summary>

                <form method="POST" action="new">
                    <x-vbox>
                        <x-vbox class="nopad">
                            <label for="subject">{% trans %}Subject{% endtrans %}</label>
                            <input id="subject" name="subject" required>
                        </x-vbox>
                        <textarea name="message" style="box-sizing: border-box;" rows="8" required></textarea>
                        <x-buttonbox>
                            <button type="submit">{% trans %}Submit{% endtrans %}</button>
                        </x-buttonbox>
                    </x-vbox>
                </form>
            </details>
            {% for post in Post.query.filter_by(repo=repo_data, parent=none).order_by(Post.last_updated.desc()) %}
                <article class="card card-horizontal">
                    {% if post.state == 0 %}
                        <div class="card-top state-label" style="background: var(--color-done); color: var(--color-done-text);">
                            {% trans %}done{% endtrans %}
                        </div>
                    {% elif post.state == 1 %}
                        <div class="card-top state-label" style="background: var(--color-pending); color: var(--color-pending-text);">
                            {% trans %}active{% endtrans %}
                        </div>
                    {% endif %}
                    <section class="card-main">
                        <h3><a href="{{ post.number }}">{{ post.subject }}</a> ({{ post.children | length }})</h3>
                        <p><a href="/{{ post.owner.username }}">{{ post.owner.username }}</a></p>
                    </section>
                </article>
            {% endfor %}
        </x-vbox>
    </x-frame>
</x-vbox>
{% endblock %}