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

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

{% block main_class %} page-topic{% endblock %}

{% block content %}
    {% if is_mod %}
        <div class="staff-action-feedback" id="staff-action-feedback" hidden role="status"></div>
    {% endif %}

    <article class="topic-view">
        <div class="topic-view__accent" aria-hidden="true"></div>
        <div class="topic-view__inner">
            <div class="topic-view__brand">
                <a href="/board/{{ board.slug }}" class="topic-view__icon-link" tabindex="-1" aria-hidden="true">
                    <span class="topic-view__icon board-icon" aria-hidden="true">{{ board.icon_svg|default('')|raw }}</span>
                </a>
            </div>
            <div class="topic-view__content">
                <header class="topic-view__header">
                    <p class="topic-view__eyebrow">
                        <a href="/">{{ trans('common.boards') }}</a> /
                        <a href="/board/{{ board.slug }}">{{ board.name }}</a>
                    </p>
                    {% if topic.deleted_at and is_mod %}
                        <p class="flash flash-error topic-view__flash">This topic was removed from the board.</p>
                    {% endif %}
                    <div class="topic-view__title-row">
                        <h1 class="topic-view__title">
                            <span class="badge" data-topic-pin-badge{% if not topic.is_pinned %} hidden{% endif %}>{{ trans('common.pinned') }}</span>
                            <span class="badge badge-muted" data-topic-lock-badge{% if not topic.is_locked %} hidden{% endif %}>{{ trans('common.locked') }}</span>
                            {% if topic.deleted_at %}<span class="badge badge-muted">{{ trans('common.removed') }}</span>{% endif %}
                            {{ topic.title }}
                        </h1>
                        <div class="topic-view__actions page-header-actions">
                            {% for html in plugin_topic_actions|default([]) %}
                                {{ html|raw }}
                            {% endfor %}
                            {% if user and not topic.deleted_at %}
                                <button type="button"
                                        class="btn btn-icon field-haze-btn topic-watch-btn{% if is_watching %} is-watching{% endif %}"
                                        id="topic-watch-btn"
                                        data-topic-id="{{ topic.id }}"
                                        data-watching="{{ is_watching ? '1' : '0' }}"
                                        title="{{ is_watching ? trans('topic.unwatch') : trans('topic.watch') }}"
                                        aria-label="{{ is_watching ? trans('topic.unwatch') : trans('topic.watch') }}"
                                        aria-pressed="{{ is_watching ? 'true' : 'false' }}">
                                    {% include 'partials/icon.twig' with { name: 'eye', size: 18 } %}
                                </button>
                            {% endif %}
                            {% if is_mod and not topic.deleted_at and is_mod_trash_board|default(false) %}
                                <div class="mod-actions staff-action-icons" data-staff-feedback>
                                    <details class="staff-action-panel"
                                             data-staff-post="/mod/topic/{{ topic.id }}/purge-trash"
                                             data-staff-success="trash-item">
                                        <summary class="btn btn-small btn-icon btn-danger" title="Delete permanently" aria-label="Delete permanently">
                                            {% include 'partials/icon.twig' with { name: 'trash' } %}
                                        </summary>
                                        <div class="staff-action-popover">
                                            <p class="staff-action-confirm muted">Permanently delete this archived post? This cannot be undone.</p>
                                            <button type="button" class="btn btn-small btn-danger btn-icon" data-staff-action-submit title="Confirm delete" aria-label="Confirm permanent delete">
                                                {% include 'partials/icon.twig' with { name: 'check' } %}
                                            </button>
                                        </div>
                                    </details>
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    {% include 'partials/topic_tags.html.twig' with { tags: tags } %}

                    {% if is_mod_trash_board|default(false) %}
                        <p class="topic-view__notice muted mod-trash-board-note">Staff-only archive. Each topic holds one removed post. Restore it to the original thread or delete it permanently.</p>
                    {% endif %}

                    {% if can_edit_tags %}
                        <details class="card mod-topic-details{% if is_mod %} mod-tools-active-only{% endif %}">
                            <summary class="mod-topic-details-summary">
                                {% include 'partials/icon.twig' with { name: 'edit', size: 16 } %}
                                <span>{% if is_mod %}Edit topic{% else %}{{ trans('topic.edit_tags') }}{% endif %}</span>
                                {% include 'partials/icon.twig' with { name: 'chevron-down', size: 16 } %}
                            </summary>
                            <div class="mod-topic-details-body">
                                <form method="post" action="/mod/topic/{{ topic.id }}/details" class="mod-topic-details-form">
                                    {{ csrf_field() }}
                                    {% if is_mod %}
                                        <label>
                                            Title
                                            <input type="text" name="title" value="{{ topic.title }}" maxlength="{{ input_limits.topic_title_max }}" required>
                                        </label>
                                    {% endif %}
                                    <label>
                                        {{ trans('topic.tags') }}
                                        <input type="text" name="tags" value="{{ tags|column('name')|join(', ') }}" maxlength="200" list="tag-suggestions" autocomplete="off">
                                    </label>
                                    <button type="submit" class="btn btn-small btn-primary btn-icon" title="Save changes" aria-label="Save topic changes">
                                        {% include 'partials/icon.twig' with { name: 'check' } %}
                                    </button>
                                </form>
                            </div>
                        </details>
                        <datalist id="tag-suggestions"></datalist>
                    {% endif %}
                </header>
            </div>
        </div>
    </article>

    <section class="topic-thread">
        {% if posts|length > 1 or (is_mod and not topic.deleted_at and not is_mod_trash_board|default(false)) %}
            <div class="topic-post-toolbar">
                        {% if is_mod and not topic.deleted_at and not is_mod_trash_board|default(false) %}
                            {% include 'partials/mod_toolbar.html.twig' with {
                                topic: topic,
                                mod_boards_json: mod_boards_json|default('[]'),
                                show_post_sort: posts|length > 1,
                                post_sort: post_sort|default('oldest'),
                                post_sort_options: post_sort_options|default({})
                            } %}
                        {% elseif posts|length > 1 %}
                            <div class="topic-list-controls">
                                <label class="topic-post-sort">
                                    <select class="field-control topic-post-sort-select" id="topic-post-sort" aria-label="{{ trans('topic.sort_posts') }}">
                                        {% for sort_key, sort_label in post_sort_options %}
                                            <option value="{{ sort_key }}"{% if post_sort|default('oldest') == sort_key %} selected{% endif %}>{{ sort_label }}</option>
                                        {% endfor %}
                                    </select>
                                </label>
                            </div>
                        {% endif %}
                    </div>
                    {% if posts|length > 1 %}
                        <script nonce="{{ csp_nonce }}">
                        (function () {
                            var select = document.getElementById('topic-post-sort');
                            if (!select) return;
                            select.addEventListener('change', function () {
                                var url = new URL(window.location.href);
                                if (select.value === 'oldest') {
                                    url.searchParams.delete('sort');
                                } else {
                                    url.searchParams.set('sort', select.value);
                                }
                                window.location.assign(url.pathname + url.search);
                            });
                        })();
                        </script>
                    {% endif %}
        {% endif %}

        {% if posts_paginated|default(false) %}
            <p class="topic-post-pagination muted">
                        {{ trans('topic.posts_showing', { shown: posts|length, total: post_total|default(posts|length) }) }}
                    </p>
            {% if posts_show_latest|default(false) and posts_has_earlier|default(false) %}
                <p class="topic-post-nav"><a href="/topic/{{ topic.id }}">{{ trans('topic.jump_to_start') }}</a></p>
            {% elseif not posts_show_latest|default(false) and post_total|default(0) > posts|length %}
                <p class="topic-post-nav"><a href="/topic/{{ topic.id }}?latest=1#latest">{{ trans('topic.jump_to_latest') }}</a></p>
            {% endif %}
        {% endif %}

        <div class="post-list" id="topic-post-list">
            {% include 'partials/topic_posts.html.twig' with {
                topic: topic,
                posts: posts,
                report_categories: report_categories,
                is_mod_trash_board: is_mod_trash_board|default(false)
            } %}
            <span id="latest" tabindex="-1"></span>
        </div>

        {% if posts_paginated|default(false) and posts_has_more|default(false) and not posts_show_latest|default(false) %}
            <div class="topic-load-more-wrap">
                <button type="button"
                        class="btn"
                        id="topic-load-older"
                        data-topic-id="{{ topic.id }}"
                        data-after="{{ posts_cursor_after|default(0) }}">
                    {{ trans('topic.load_older_posts') }}
                </button>
            </div>
        {% endif %}

        <footer class="topic-thread__footer">
            {% if user and can_reply|default(true) and (not topic.is_locked or is_mod) and not topic.deleted_at %}
                <div class="reply-actions">
                    <button type="button" class="btn btn-primary" id="reply-toggle" aria-expanded="false" aria-controls="reply-panel">{{ trans('common.reply') }}</button>
                </div>
                <section class="reply-form" id="reply-panel" hidden>
                    <form method="post" action="/topic/{{ topic.id }}/reply" class="form form-compose">
                        {{ csrf_field() }}
                        <label>
                            {{ trans('topic.your_message') }}
                            {% include 'partials/composer.twig' with { draft_key: 'topic-' ~ topic.id, required: true, rows: 8 } %}
                        </label>
                        <div class="reply-form-actions">
                            <button type="submit" class="btn btn-primary">{{ trans('topic.post_reply') }}</button>
                            <button type="button" class="btn" id="reply-cancel">{{ trans('common.cancel') }}</button>
                        </div>
                    </form>
                </section>
            {% elseif topic.deleted_at %}
                <p class="muted">{{ trans('topic.removed') }}</p>
            {% elseif topic.is_locked %}
                <p class="muted">{{ trans('topic.locked') }}</p>
            {% elseif not can_reply|default(true) %}
                <p class="muted">{{ trans('topic.read_only') }}</p>
            {% else %}
                <p class="muted"><a href="/login">{{ trans('nav.sign_in') }}</a>{{ trans('topic.sign_in_to_reply')|replace({(trans('nav.sign_in')): ''})|raw }}</p>
            {% endif %}
        </footer>
    </section>

    <button type="button" class="scroll-top-btn" id="scroll-top" hidden title="{{ trans('topic.back_to_top') }}" aria-label="{{ trans('topic.back_to_top') }}">
        {% include 'partials/icon.twig' with { name: 'arrow-up', size: 22 } %}
    </button>
    <button type="button" class="scroll-reply-btn" id="scroll-reply" hidden>{{ trans('common.reply') }}</button>
{% endblock %}

{% block scripts %}
    <link rel="stylesheet" href="/assets/css/highlight.css?v={{ asset_version }}">
    <script src="/assets/js/highlight.min.js?v={{ asset_version }}" defer></script>
    <script src="/assets/js/editor.js?v={{ asset_version }}" defer></script>

    {% if can_edit_tags %}
        <script src="/assets/js/tags.js?v={{ asset_version }}" defer></script>
    {% endif %}
    {% if user %}
        <script src="/assets/js/post-votes.js?v={{ asset_version }}" defer></script>
        <script src="/assets/js/topic-watch.js?v={{ asset_version }}" defer></script>
    {% endif %}
    {% if is_mod %}
        <script src="/assets/js/mod-tools.js?v={{ asset_version }}" defer></script>
    {% endif %}
    {% if posts_paginated|default(false) and posts_has_more|default(false) and not posts_show_latest|default(false) %}
        <script src="/assets/js/topic-posts.js?v={{ asset_version }}" defer></script>
    {% endif %}
{% endblock %}