{% extends '@mio/forum/master.twig' %}
{% from '@mio/macros.twig' import navigation, pagination %}
{% from '@mio/forum/macros.twig' import forum_post_listing, forum_topic_buttons, forum_posting_form %}

{% set title = topic_info.topic_title %}
{% set base_url = '/forum/topic.php?t=' ~ topic_info.topic_id %}
{% set canonical_url = base_url %}

{% set ftbuttons = app.hasActiveSession ? forum_topic_buttons(topic_info) : '' %}
{% set ftpagination = pagination(topic_info.topic_post_count, topic_range, topic_offset, base_url) %}

{% block content %}
    {{ navigation(topic_breadcrumbs, topic_breadcrumbs|last, true, null, 'left') }}

    <div class="container">
        <div class="container__title">
            {{ topic_info.topic_title }}
        </div>
    </div>

    {{ ftbuttons }}
    {{ ftpagination }}
    {{ forum_post_listing(topic_posts, topic_info.topic_first_post_id) }}
    {{ ftpagination }}

    {% if app.hasActiveSession %}
        {{ forum_posting_form('Reply', topic_info.topic_id, true, 'reply', true) }}

        <script>
            window.addEventListener('load', () => {
                closeContainer('reply');
                document.getElementById('reply').children[0].addEventListener('mouseover', () => openContainer('reply'));
            });
        </script>
    {% endif %}

    {{ navigation(mio_navigation, '/forum/') }}
{% endblock %}