{% if not embedded %}{% extends 'base/base.html' %}{% endif %}
{% import 'components/avatar.html' as avatar with context %}
{% import 'blog/macros.html' as blog with context %}

{% block body %}

    <div class="panel-header px-4 py-2">
        <div class="level is-mobile">
            <div class="level-left">
                <div class="level-item">
                    <button class="button is-small" id="left_panel-toggle" aria-label="Toggle left panel">
                        <span class="icon"><i class="fas fa-bars"></i></span>
                    </button>
                </div>
                <div class="level-item">
                    <h1 class="title is-5 mb-0 pt-1">{{ topic_title }}</h1>
                </div>
            </div>
            <div class="level-right">
                <div class="level-item">
                    <div class="field has-addons">
                        <div class="control">
                            <input id="search_thread" class="input is-small" type="text" placeholder="{{ _('Search in this forum') }}">
                        </div>
                        <div class="control">
                            <button id="search_thread_button" class="button is-info is-small">
                                <span class="icon is-small">
                                    <i class="fas fa-search"></i>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="level-item">
                    {% include 'forum/subscribe_button.html' %}

                </div>
            </div>
        </div>
    </div>

    <section id="forum_main_body" class="section is-flex is-flex-direction-column">
        <div class="container is-max-desktop">
            {# Messages Display #}
            <section class="section has-background-white">
                {{ blog.show_items(blog_items["items"], expanded=true) }}
            </section>

            {# New Message Section #}
            <section class="section new-message-section">
                <h2 class="subtitle is-4 mb-3">Add your reply</h2>
                <div id="message_editor"></div>

                {# Tags #}
                <div id="tags_container" class="is-hidden">
                    <label>Add you tags below</label>
                    <input id="tags" type="text"  />
                </div>
                {# Attachments #}
                <input id="forum-file-input" type="file" multiple="true" style="display: none" />

                <div class="mt-4" id="attachments-area">
                    <div id="forum-attachments" class="file-attachments is-flex is-flex-wrap-wrap">
                    {# Attachments will be dynamically added here #}
                    </div>
                </div>

                {# Submit Button #}
                <div class="mt-4">
                    <button class="button is-primary" id="send-message-button">Send Message</button>
                </div>
            </section>
        </div>
    </section>

{% endblock body %}