{% trans_default_domain 'admin' %}

{#
  Conversation thread for a single message: the outbound item plus the replies
  to it, rendered as chat bubbles (out = us, in = the recipient), followed by a
  composer that posts a reply back into the thread. Rendered only when the
  message actually opened a conversation.

  Context: thread (ConversationItem[]), message (SentMessage).
#}
{% if thread is not empty %}
    {% set needsReply = this.needsReply(message) %}

    <div class="border-t border-gray-100 dark:border-gray-800 px-7 py-6">

        {# header #}
        <div class="mb-4 flex items-center gap-2.5">
            <div class="flex items-center gap-2 text-[13px] font-bold text-gray-800 dark:text-gray-200">
                <twig:ux:icon name="ph:chat-circle-text" class="size-4 text-gray-400" />
                {{ 'outbox.conversation.title'|trans }}
                <span class="rounded-full bg-gray-100 dark:bg-gray-800 px-2 py-px text-[11px] font-bold text-gray-500 dark:text-gray-400">{{ thread|length }}</span>
            </div>
            {% if needsReply %}
                <span class="ml-auto rounded-full bg-amber-500 px-2.5 py-0.5 text-[11.5px] font-bold text-white">{{ 'outbox.conversation.awaiting'|trans }}</span>
            {% else %}
                <span class="ml-auto inline-flex items-center gap-1.5 text-[11.5px] font-semibold text-emerald-600 dark:text-emerald-400">
                    <twig:ux:icon name="ph:check" class="size-3.5" />{{ 'outbox.conversation.answered'|trans }}
                </span>
            {% endif %}
        </div>

        {# bubbles #}
        <div class="flex flex-col gap-3.5">
            {% for item in thread %}
                {% set isOut = not item.fromEmail %}
                {% set authorLabel = item.authorLabel ?? 'outbox.conversation.system'|trans %}
                <div class="flex max-w-[86%] items-end gap-2.5 {{ isOut ? 'ml-auto flex-row-reverse' : '' }}">
                    <span class="inline-flex size-[30px] shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white {{ isOut ? 'bg-gray-700 dark:bg-gray-600' : 'bg-gray-400 dark:bg-gray-500' }}">{{ this.initials(authorLabel) }}</span>
                    <div class="min-w-0">
                        <div class="whitespace-pre-line rounded-2xl px-3.5 py-2.5 text-[13.5px] leading-relaxed {{ isOut ? 'rounded-br-sm bg-primary-600 text-white' : 'rounded-bl-sm bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200' }}">{{ item.body }}</div>
                        <div class="mt-1 px-1 text-[11px] text-gray-400 dark:text-gray-500 {{ isOut ? 'text-right' : '' }}">{{ authorLabel }} · {{ item.createdAt|date('d.m.Y, H:i') }}</div>
                    </div>
                </div>
            {% endfor %}
        </div>

        {# composer #}
        <div class="mt-5 flex items-start gap-2.5 border-t border-gray-200 dark:border-gray-800 pt-5">
            <span class="inline-flex size-[30px] shrink-0 items-center justify-center rounded-full bg-gray-700 dark:bg-gray-600 text-[11px] font-bold text-white">{{ this.initials(app.user ? app.user.name : '') }}</span>
            <div class="min-w-0 flex-1 overflow-hidden rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500/30">
                <textarea rows="2"
                          data-model="norender|replyBody"
                          class="block w-full resize-none border-0 bg-transparent px-3.5 py-2.5 text-[13.5px] leading-normal text-gray-900 dark:text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-0"
                          placeholder="{{ 'outbox.conversation.placeholder'|trans({ name: this.recipientName(message) }) }}"></textarea>
                <div class="flex items-center justify-between gap-2.5 px-2 pb-2 pl-3.5 pt-1">
                    <span class="min-w-0 truncate text-[11px] text-gray-400 dark:text-gray-500">{{ 'outbox.conversation.replyHint'|trans({ email: message.to }) }}</span>
                    <twig:Admin:Button variant="primary" size="sm"
                                       data-action="live#action:prevent"
                                       data-live-action-param="sendReply"
                                       data-loading="addClass(opacity-50) addAttribute(disabled)">
                        <twig:ux:icon name="ph:paper-plane-tilt" class="-ml-0.5 mr-1.5 size-3.5" />
                        {{ 'outbox.conversation.send'|trans({}, 'admin') }}
                    </twig:Admin:Button>
                </div>
            </div>
        </div>

    </div>
{% endif %}
