{% extends theme("conversations/message_layout.html") %}

{% block message_content %}
{%- from theme("_macros/utils.html") import avatar_img -%}
{# quick check if the conversation is a draft #}
{% if conversation.draft %}
    {% set messages = [conversation.first_message] %}
{% else %}
    {% set messages = conversation.messages %}
{% endif %}

<div class="card conversation">
    <div class="card-header conversation-header">
        Subject: <strong>{{ conversation.subject }}</strong>
    </div>

    <div class="card-body conversation-body">
        {% for message in messages %}
        <div class="conversation-message {% if current_user.id == message.user_id %}own{% endif %}" id="mid{{ message.id }}">
            <div class="message-header">
                {{ avatar_img(message.user, size=40, class="rounded message-avatar") }}

                <div class="message-author">
                    {% if message.user %}
                    <a class="author-name" href="{{ message.user.url }}">{{ message.user.username }}</a>
                    {% if message.user|is_online %}
                    <span class="author-status online" data-bs-toggle="tooltip" title="online"></span>
                    {% else %}
                    <span class="author-status offline" data-bs-toggle="tooltip" title="offline"></span>
                    {% endif %}
                    <div class="message-meta">
                        <span>{{ message.user.primary_group.name }}</span>
                        <time datetime="{{ message.date_created }}">{{ message.date_created|format_datetime }}</time>
                    </div>
                    {% else %}
                    <span class="author-name">{% trans %}Deleted User{% endtrans %}</span>
                    <div class="message-meta">
                        <time datetime="{{ message.date_created }}">{{ message.date_created|format_datetime }}</time>
                    </div>
                    {% endif %}
                </div>

                <div class="message-actions">
                    {% if conversation.draft %}
                    <a href="{{ url_for('conversations_bp.edit_conversation', conversation_id=conversation.id) }}" class="btn btn-primary btn-sm"><span class="fas fa-pen fa-fw"></span> {% trans %}Edit{% endtrans %}</a>
                    {% else %}
                    <a href="#" class="btn btn-outline-secondary btn-sm reply-btn" data-raw-url="{{ url_for('conversations_bp.raw_message', message_id=message.id) }}"><span class="fas fa-reply fa-fw"></span> {% trans %}Quote{% endtrans %}</a>
                    {% endif %}
                </div>
            </div>

            <div class="message-content">
                {{ message.message|markup }}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

{% if not conversation.draft and conversation.from_user != None and conversation.to_user != None %}
{% from "_macros/form.html" import render_editor_field, render_submit_field %}
<form method="post" action="{{ url_for('conversations_bp.view_conversation', conversation_id=conversation.id) }}" hx-post="{{ url_for('conversations_bp.view_conversation', conversation_id=conversation.id) }}" hx-target="#message-content" hx-select="#message-content" hx-swap="outerHTML" hx-select-oob="#flashed-messages">
    {{ form.hidden_tag() }}
    <div class="row pt-3">
        <div class="col-12">
            {{ render_editor_field(form.message, rows=6) }}

            {{ render_submit_field(form.submit, div_class="mt-3 float-end", class="btn btn-success") }}
        </div>
    </div>
</form>
{% endif %}

{% endblock %}