{% 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>
            <form class="hbox" action="./search">
                <input type="text" name="q" placeholder="{% trans %}Search...{% endtrans %}" value="{{ query }}" aria-label="{% trans %}Search query{% endtrans %}">
                <select name="state" aria-label="{% trans %}State{% endtrans %}">
                    <option value="">{% trans %}all{% endtrans %}</option>
                    <option value="0" {% if require_state == "0" %}selected{% endif %}>{% trans %}done{% endtrans %}</option>
                    <option value="1" {% if require_state == "1" %}selected{% endif %}>{% trans %}active{% endtrans %}</option>
                </select>
                <select name="label" aria-label="{% trans %}Label{% endtrans %}">
                    <option value="">{% trans %}all{% endtrans %}</option>
                    {% for label in repo_data.labels %}
                        <option value="{{ label.identifier }}" {% if label.identifier == require_label %}selected{% endif %}>{{ label.name }}</option>
                    {% endfor %}
                </select>
                <button type="submit">{% trans %}Search{% endtrans %}</button>
            </form>
            {% for post in posts %}
                <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> <span class="post-number">#{{ post.number }}</span> ({{ post.children | length }})</h3>
                        <p><a href="/{{ post.owner.username }}">{{ post.owner.username }}</a></p>
                    </section>
                </article>
            {% endfor %}
            {% include "pagination.html" %}
        </x-vbox>
    </x-frame>
</x-vbox>
{% endblock %}