{% trans_default_domain 'admin' %}

<section class="flex min-h-0 min-w-0 flex-col overflow-hidden border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-950/40 lg:border-b-0 lg:border-r">

    <div class="flex flex-shrink-0 items-baseline gap-2 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 px-4 py-3">
        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">{{ 'outbox.list.heading'|trans }}</h2>
        <span class="text-xs text-gray-500 dark:text-gray-400">{{ 'outbox.list.count'|trans({ count: items|length }) }}</span>
    </div>

    <div class="min-h-0 flex-1 overflow-y-auto">
        {% for item in items %}
            {% set isGroup = item.isGroup %}
            {% set r0 = item.recipients|first %}
            {% set name0 = this.recipientName(r0) %}
            {% set accent = this.typeColor(item.messageClass) %}
            {% set typeLabel = this.typeLabel(item.messageClass) %}
            {% set isExpanded = isGroup and item.group.id in expanded %}
            {% set selected = isGroup
                ? (group is not null and group.id == item.group.id and message is null)
                : (message is not null and message.id == item.first.id) %}

            <div data-action="click->live#action"
                 data-live-action-param="{{ isGroup ? 'selectGroup' : 'selectMessage' }}"
                 data-live-message-param="{{ isGroup ? item.group.id : item.first.id }}"
                 class="grid cursor-pointer grid-cols-[38px_minmax(0,1fr)_auto] items-start gap-3 border-b border-gray-100 dark:border-gray-800/60 px-4 py-3 transition hover:bg-white dark:hover:bg-gray-900 {{ selected ? 'bg-white dark:bg-gray-900' : '' }}"
                 {% if selected %}style="box-shadow: inset 3px 0 0 {{ accent }}"{% endif %}>

                {# avatar #}
                {% if isGroup %}
                    {% set r1 = item.recipients[1] %}
                    <span class="relative size-[38px] shrink-0">
                        <span class="absolute left-2 top-2 inline-flex size-[30px] items-center justify-center rounded-full bg-gray-300 dark:bg-gray-700 text-[10px] font-bold text-white ring-2 ring-white dark:ring-gray-900">{{ this.initials(this.recipientName(r1)) }}</span>
                        <span class="absolute left-0 top-0 inline-flex size-[30px] items-center justify-center rounded-full bg-gray-400 dark:bg-gray-600 text-[10px] font-bold text-white ring-2 ring-white dark:ring-gray-900">{{ this.initials(name0) }}</span>
                    </span>
                {% else %}
                    <span class="inline-flex size-[38px] items-center justify-center rounded-full bg-gray-400 dark:bg-gray-600 text-xs font-bold text-white" title="{{ name0 }}">{{ this.initials(name0) }}</span>
                {% endif %}

                {# middle #}
                <div class="min-w-0">
                    <div class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">
                        {{ name0 }}
                        {% if isGroup %}
                            <span class="ml-0.5 rounded-full bg-gray-100 dark:bg-gray-800 px-1.5 align-[1px] text-[11px] font-bold text-gray-500 dark:text-gray-400">+{{ item.count - 1 }}</span>
                        {% endif %}
                    </div>
                    <div class="mt-0.5 truncate text-[13px] text-gray-700 dark:text-gray-300">{{ item.subject }}</div>
                    <div class="mt-1.5 flex items-center gap-1.5 text-[11px] font-semibold text-gray-500 dark:text-gray-400">
                        <span class="size-[7px] rounded-full" style="background: {{ accent }}"></span>
                        {{ typeLabel }}{% if isGroup %} · {{ 'outbox.mailing'|trans }}{% endif %}
                        {% if not isGroup and this.hasReply(item.first) %}
                            {% set needs = this.needsReply(item.first) %}
                            <span class="inline-flex items-center gap-1 rounded-full px-1.5 py-px text-[10.5px] font-semibold {{ needs ? 'bg-amber-50 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400' : 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400' }}">
                                <twig:ux:icon name="ph:chat-circle-text" class="size-3" />{{ needs ? 'outbox.conversation.open'|trans : 'outbox.conversation.badge'|trans }}
                            </span>
                        {% endif %}
                    </div>
                </div>

                {# right #}
                <div class="flex flex-col items-end gap-2 whitespace-nowrap">
                    <span class="text-[11px] tabular-nums text-gray-400 dark:text-gray-500">{{ item.ts|ago }}</span>
                    {% if isGroup %}
                        <button type="button"
                                data-action="click->live#action:stop"
                                data-live-action-param="toggleExpand"
                                data-live-id-param="{{ item.group.id }}"
                                aria-label="{{ 'outbox.list.toggleRecipients'|trans }}"
                                class="inline-flex items-center gap-1 rounded-md p-0.5 hover:bg-gray-100 dark:hover:bg-gray-800">
                            <span class="inline-flex items-center gap-1 rounded-full bg-gray-100 dark:bg-gray-800 px-2 py-0.5 text-[11px] font-bold text-gray-500 dark:text-gray-400 {{ selected ? 'bg-primary-50 text-primary-600 dark:bg-primary-500/15 dark:text-primary-400' : '' }}">
                                <twig:ux:icon name="ph:users" class="size-3" />{{ item.count }}
                            </span>
                            <twig:ux:icon name="ph:caret-down" class="size-3.5 text-gray-400 transition {{ isExpanded ? 'rotate-180 text-gray-600 dark:text-gray-300' : '' }}" />
                        </button>
                    {% else %}
                        {% set st = statusMeta[item.deliveryStatus] %}
                        <span class="size-2.5 rounded-full {{ st.dot }}" title="{{ st.label|trans }}"></span>
                    {% endif %}
                </div>
            </div>

            {# expanded recipients #}
            {% if isExpanded %}
                <div class="border-b border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800/40">
                    {% for recipient in item.recipients %}
                        {% set childSelected = message is not null and message.id == recipient.id %}
                        {% set cst = statusMeta[recipient.deliveryStatus] %}
                        <div data-action="click->live#action"
                             data-live-action-param="selectMessage"
                             data-live-message-param="{{ recipient.id }}"
                             class="relative grid cursor-pointer grid-cols-[26px_minmax(0,1fr)_auto] items-center gap-2 py-2 pl-8 pr-4 transition hover:bg-white dark:hover:bg-gray-900 {{ childSelected ? 'bg-white dark:bg-gray-900' : '' }}"
                             {% if childSelected %}style="box-shadow: inset 3px 0 0 {{ accent }}"{% endif %}>
                            <span class="inline-flex size-[26px] items-center justify-center rounded-full bg-gray-400 dark:bg-gray-600 text-[9.5px] font-bold text-white">{{ this.initials(this.recipientName(recipient)) }}</span>
                            <div class="min-w-0">
                                <div class="truncate text-xs font-semibold text-gray-800 dark:text-gray-200">{{ this.recipientName(recipient) }}</div>
                                <div class="truncate text-[10.5px] text-gray-500 dark:text-gray-400">{{ recipient.to }}</div>
                            </div>
                            <span class="size-2 rounded-full {{ cst.dot }}" title="{{ cst.label|trans }}"></span>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        {% else %}
            <div class="px-6 py-16 text-center text-gray-400 dark:text-gray-500">
                <div class="mx-auto mb-3 grid size-[52px] place-items-center rounded-lg bg-gray-100 dark:bg-gray-800">
                    <twig:ux:icon name="ph:magnifying-glass" class="size-6" />
                </div>
                <b class="mb-1 block text-sm text-gray-600 dark:text-gray-300">{{ 'outbox.empty.title'|trans }}</b>
                {{ 'outbox.empty.text'|trans }}
            </div>
        {% endfor %}

        {% if hasNextPage %}
            <div class="flex justify-center py-3">
                <button type="button"
                        data-action="live#action"
                        data-live-action-param="loadMore"
                        class="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-semibold text-gray-900 dark:text-gray-100 hover:bg-gray-200/60 dark:hover:bg-gray-700/50">
                    <twig:ux:icon name="ph:plus" class="size-4 text-gray-500 dark:text-gray-400" />
                    {{ 'outbox.loadMore'|trans }}
                </button>
            </div>
        {% endif %}
    </div>
</section>
