{% if not embedded %}
    {% set loading_screen = true %}
    {% extends 'base/base.html' %}
{% endif %}
{% from 'components/collapsible_card.html' import collapsible_card %}
{% block title %}{{ target_jid }} - {{ super() }}{% endblock %}
{% block body %}
    {{ icon_defs(
   "comment-dots", "ellipsis", "paperclip", "pencil", "quote-left", "reply", "regular face-smile", "regular trash-can", "share-nodes"
    ) }}



    <div class="columns is-gapless chat-container">
        <!-- Left Panel -->
        <div class="column is-2-desktop is-3-tablet chat-sidebar has-background-dark" id="left_panel">
            <aside class="menu pl-4">
                <button class="button is-ghost has-text-grey-light mb-2 pl-1 is-align-items-center is-justify-content-start is-fullwidth" id="new_chat_btn" aria-label="Start new discussion">
                    <span class="icon">
                        <i class="fas fa-circle-plus"></i>
                    </span>
                    <span class="pt-1">Start New Chat</span>
                </button>
                <p class="menu-label has-text-grey-light">
                    {% trans %}Rooms{% endtrans %}
                </p>
                <ul class="menu-list">
                    {% for room_address, room_info in bookmarks.items() %}
                        <li>
                            <a {{ {'href': chat_url + "/" + room_address}|xmlattr}} class="chat-jid has-text-white"><span class="icon"><i class="fas fa-hashtag"></i></span> {{ room_info.get('name', room_address.split('@')[0]) }}</a>
                        </li>
                    {% endfor %}
                </ul>
                <p class="menu-label has-text-grey-light">
                    Direct Messages
                </p>
                <div id="direct-messages"></div>
            </aside>
        </div>

        <!-- Main Chat Area -->
        <div class="column is-8-desktop is-6-tablet chat-main" id="main_panel">
                <div class="chat-header">
                    <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">{{target_jid}}</h1>
                            </div>
                        </div>
                        <div class="level-right">
                            <div class="level-item">
                                <div class="field has-addons">
                                    <div class="control">
                                        <input class="input is-small" type="text" placeholder="Search">
                                    </div>
                                    <div class="control">
                                        <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">
                                <button class="button is-small">
                                    <span class="icon"><i class="fas fa-cog"></i></span>
                                </button>
                            </div>
                            <div class="level-item {{ "is-hidden" if chat_type != "group" }}">
                                <button class="button is-small" id="right_panel-toggle">
                                    <span class="icon"><i class="fas fa-info-circle"></i></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Messages -->
                <div id="messages">
                    {% for msg in messages %}
                        {% set current_date = msg.timestamp|date_fmt('full', date_only=True) %}
                        {% if loop.changed(current_date) %}
                            <div class="separator">
                                <hr class="has-background-light" />
                                <span class="has-text-grey is-size-7">{{current_date}}</span>
                                <hr class="has-background-light" />
                            </div>
                        {% endif %}
                        {% include 'chat/message.html' %}
                    {% endfor %}
                </div>


            <div id="input-panel-area">
                {% include 'chat/message_input.html' %}
            </div>

        </div>



        <!-- Right Panel -->

        <div class="column is-2-desktop is-3-tablet chat-details {{ 'is-hidden' if chat_type != 'group' }}" id="right_panel">
            <div class="box is-shadowless has-background-white-bis is-full-height">
                <h3 class="title is-5 has-text-centered mb-4">Room Details</h3>

                {% if subject is defined %}
                    {% call collapsible_card("Subject", icon="fas fa-quote-left") %}
                    {{subject}}
                    {% endcall %}
                {% endif %}

                <div class="card">
                    <div class="card-header has-background-info-light">
                        <p class="card-header-title has-text-info-dark">
                        <span class="icon"><i class="fas fa-users"></i></span>
                        <span>Members (<span id="occupants-count">0</span>)</span>
                        </p>
                    </div>
                    <div class="card-content py-3 px-4" id="group-occupants">
                    </div>
                </div>
            </div>
        </div>

{% endblock body %}

{% block footer %}{% endblock footer %}