{% if not embedded %}{% extends 'base/base.html' %}{% endif %}
{% block title %}{{ target_jid }} - {{ super() }}{% endblock %}
{% block body %}
    {{ icon_defs(
    "lock-open", "lock-filled", "ok", "pencil", "dot-3", "share", "attach",
    "paper-plane-empty", "doc", "download", "wrench", "eye", "smile", "plus-circled",
    "quote-left", "trash-empty"
    ) }}

    {# TODO: this should be done in a more generic way in dialog module #}
    <div id="modal" class="modal">
        <div class="modal-background"></div>
        <div class="modal-content">
            <p class="image">
            <img id="modal-image" src="" alt="">
            </p>
        </div>
        <button class="modal-close is-large" aria-label="close"></button>
    </div>

    <div id="chat-panel" class="is-flex is-flex-direction-column is-justify-content-space-between is-align-items-stretch pt-4"> <!-- calculate height depending on your navbar size -->
        <!-- Header -->
        <div id="header" class="box p-4 is-flex is-justify-content-space-between is-align-items-center is-flex-shrink-0">
            {% if subject is defined %}
                <h2 id="room-subject" class="title is-5 has-text-weight-bold">{{- subject|urlize(nofollow=true,target='_blank') -}}</h2>
            {% endif %}
        </div>

        <!-- Messages -->
        <div id="messages" class="box p-4 has-background-white mb-4 is-flex-grow-1 is-flex-direction-column-reverse is-overflow-auto">
            {% 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>

    <!-- Attachments -->
    <div id="attachments" class="box has-background-white is-flex is-flex-grow-0 is-flex-shrink-0 is-align-items-center is-overflow-auto is-contracted">
        {% for file in attachments %}
            {% include 'chat/attachment_preview.html' %}
        {% endfor %}
    </div>

    <!-- Input -->
    <div id="input-area" class="field has-addons py-4 is-flex-shrink-0">
        <p class="control is-expanded">
            <textarea id="message_input" class="textarea" name="message" type="text" rows="1" placeholder="{{_("enter your message")}}"></textarea>
        </p>
        <div class="control">
            <button class="button" id="attach_button">
                <span class="icon is-small">
                    {{ icon('attach', cls='has-text-info') }}
                </span>
            </button>
            <input id="file_input" type="file" multiple="true" style="display: none" />
        </div>
        <div class="control">
            <button class="button" id="send_button">
                <span class="icon is-small">
                    {{ icon('paper-plane-empty') }}
                </span>
            </button>
        </div>
    </div>

    </div>
{% endblock body %}

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