{% extends 'layouts/base.html.twig' %}

{% block title %}{{ board.name }} — {{ site.name }}{% endblock %}

{% block main_class %} sc-page-board{% endblock %}

{% block content %}
    <header class="sc-board-hero">
        <p class="sc-board-hero-crumb"><a href="/">{{ trans('common.boards') }}</a> / {{ board.name }}</p>
        <div class="sc-board-hero-row">
            <div class="sc-board-hero-main">
                {% if board.icon_svg is defined %}
                    <span class="sc-board-hero-icon board-icon" aria-hidden="true">{{ board.icon_svg|raw }}</span>
                {% endif %}
                <div>
                    <h1>{{ board.name }}</h1>
                    {% if filter_tag %}
                        <p class="muted">{{ trans('board.filtered_by') }} <a class="tag-pill" href="/tag/{{ filter_tag.slug }}">#{{ filter_tag.name }}</a> · <a href="/board/{{ board.slug }}">{{ trans('board.clear_filter') }}</a></p>
                    {% endif %}
                    {% if board.description %}<p class="sc-board-hero-desc">{{ board.description }}</p>{% endif %}
                    {% if not can_create_topic|default(false) %}
                        <p class="muted">{{ trans('board.cannot_create') }}{% if can_reply|default(true) %}{{ trans('board.cannot_create_reply') }}{% endif %}.</p>
                    {% elseif not can_reply|default(true) %}
                        <p class="muted">{{ trans('board.read_only') }}</p>
                    {% endif %}
                </div>
            </div>
            {% if user and can_create_topic|default(false) %}
                <a class="btn btn-primary sc-board-new-btn"
                   href="/board/{{ board.slug }}/new"
                   title="{{ trans('board.new_topic') }}"
                   aria-label="{{ trans('board.new_topic') }}">
                    {% include 'partials/icon.twig' with { name: 'plus', size: 18 } %}
                    <span>{{ trans('board.new_topic') }}</span>
                </a>
            {% endif %}
        </div>
    </header>

    {% if topics is empty %}
        {% if board.slug == 'mod-trash' %}
            <p class="empty">{{ trans('board.mod_trash_empty') }}</p>
        {% else %}
            <p class="empty">{{ trans('home.no_topics_yet') }}{% if user and can_create_topic|default(false) %} <a href="/board/{{ board.slug }}/new">{{ trans('board.start_one') }}</a>.{% endif %}</p>
        {% endif %}
    {% else %}
        {% set unread_topic_count = topics|filter(t => t.is_unread is defined and t.is_unread)|length %}
        {% if unread_topic_count > 0 %}
            {% set new_badge = '<span class="badge badge-unread">' ~ trans('common.new') ~ '</span>' %}
            <p class="sc-board-unread muted">{{ trans(unread_topic_count == 1 ? 'board.unread_summary_one' : 'board.unread_summary_many', { count: unread_topic_count, badge: new_badge })|raw }}</p>
        {% endif %}

        <div class="sc-board-toolbar">
            {% if is_mod and board.slug != 'mod-trash' %}
                {% include 'partials/board_mod_toolbar.html.twig' with {
                    board: board,
                    page: page,
                    filter_tag: filter_tag|default(null),
                    topic_sort: topic_sort|default('activity'),
                    topic_sort_options: topic_sort_options
                } %}
            {% else %}
                <label class="board-topic-sort">
                    <span class="muted">{{ trans('board.sort_topics') }}</span>
                    <select class="field-control board-topic-sort-select" id="board-topic-sort" aria-label="{{ trans('board.sort_topics') }}">
                        {% for sort_key, sort_label in topic_sort_options %}
                            <option value="{{ sort_key }}"{% if topic_sort|default('activity') == sort_key %} selected{% endif %}>{{ sort_label }}</option>
                        {% endfor %}
                    </select>
                </label>
            {% endif %}
        </div>
        <script nonce="{{ csp_nonce }}">
        (function () {
            var select = document.getElementById('board-topic-sort');
            if (!select) return;
            select.addEventListener('change', function () {
                var url = new URL(window.location.href);
                if (select.value === 'activity') {
                    url.searchParams.delete('sort');
                } else {
                    url.searchParams.set('sort', select.value);
                }
                url.searchParams.delete('page');
                window.location.assign(url.pathname + url.search);
            });
        })();
        </script>

        {% if topic_list_html is defined and topic_list_html %}
            {{ topic_list_html|raw }}
        {% else %}
            {% include 'partials/topic_list.html.twig' with {
                topics: topics,
                topic_mod_selectable: is_mod and board.slug != 'mod-trash'
            } %}
        {% endif %}

        {% if total_pages > 1 %}
            <nav class="pagination sc-pagination">
                {% if page > 1 %}
                    <a href="/board/{{ board.slug }}?page={{ page - 1 }}{% if filter_tag %}&amp;tag={{ filter_tag.slug }}{% endif %}{% if topic_sort|default('activity') != 'activity' %}&amp;sort={{ topic_sort }}{% endif %}">{{ trans('common.previous') }}</a>
                {% endif %}
                <span>{{ trans('common.page_of', { page: page, total: total_pages }) }}</span>
                {% if page < total_pages %}
                    <a href="/board/{{ board.slug }}?page={{ page + 1 }}{% if filter_tag %}&amp;tag={{ filter_tag.slug }}{% endif %}{% if topic_sort|default('activity') != 'activity' %}&amp;sort={{ topic_sort }}{% endif %}">{{ trans('common.next') }}</a>
                {% endif %}
            </nav>
        {% endif %}
    {% endif %}
{% endblock %}

{% block scripts %}
    {% if is_mod and board.slug != 'mod-trash' and topics is not empty %}
        <script src="/assets/js/board-mod-tools.js?v={{ asset_version }}" defer></script>
    {% endif %}
{% endblock %}