{% trans_default_domain 'admin' %}

<section class="flex min-h-0 min-w-0 flex-col overflow-hidden bg-white dark:bg-gray-900">

    {% if message is not null %}
        {% set mClass = message.logEntry ? message.logEntry.message : '' %}
        {% set inCampaign = message.logEntry is not null and message.logEntry.group is not null %}
        {% set accent = this.typeColor(mClass) %}
        {% set st = statusMeta[message.deliveryStatus] %}
        {% set badgeLabel = inCampaign ? 'outbox.rundmail'|trans : this.typeLabel(mClass) %}
        {% set position = recipientPosition %}

        {# toolbar #}
        <div class="flex flex-none flex-wrap items-center gap-2.5 border-b border-gray-200 dark:border-gray-800 px-7 py-3.5">
            <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11.5px] font-semibold" style="background: {{ accent }}1a; color: {{ accent }}">
                <span class="size-[7px] rounded-full" style="background: {{ accent }}"></span>{{ badgeLabel }}{% if inCampaign %} · {{ 'outbox.mailing'|trans }}{% endif %}
            </span>
            <span class="inline-flex items-center gap-1.5 text-[12.5px] font-semibold {{ st.text }}">
                <span class="size-2 rounded-full {{ st.dot }}"></span>{{ st.label|trans }}
            </span>
            <span class="flex-1"></span>
            {% if not inCampaign and message.isEmail and message.type and message.type != 'mailing' %}
                <twig:Admin:Button href="{{ path('admin_notifications_edit', { type: message.type }) }}" size="sm" variant="ghost">
                    <twig:ux:icon name="ph:pencil-simple" class="-ml-0.5 mr-1.5 size-3.5 text-gray-400" />
                    {{ 'outbox.action.editTemplate'|trans({}, 'admin') }}
                </twig:Admin:Button>
            {% endif %}
            {% if resent %}
                <span class="inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-600 dark:text-emerald-400">
                    <twig:ux:icon name="ph:check-circle" class="size-4" />{{ 'outbox.action.resent'|trans }}
                </span>
            {% else %}
                <twig:Admin:Button size="sm" data-action="live#action" data-live-action-param="resend">
                    <twig:ux:icon name="ph:arrow-clockwise" class="-ml-0.5 mr-1.5 size-3.5" />
                    {{ 'outbox.action.resend'|trans({}, 'admin') }}
                </twig:Admin:Button>
            {% endif %}
            <twig:Admin:Button size="sm" onclick="navigator.clipboard.writeText('{{ message.to|e('js') }}')">
                <twig:ux:icon name="ph:copy" class="-ml-0.5 mr-1.5 size-3.5" />
                {{ 'outbox.action.copyAddress'|trans({}, 'admin') }}
            </twig:Admin:Button>
        </div>

        <div class="min-h-0 flex-1 overflow-y-auto">
            <div class="grid grid-cols-1 items-start xl:grid-cols-[minmax(0,1fr)_320px]">

                {# the rendered email #}
                <div class="min-w-0 overflow-hidden">
                    <div class="border-b border-gray-100 dark:border-gray-800 px-7 pb-5 pt-6">
                        {% if inCampaign %}
                            <button type="button"
                                    data-action="live#action"
                                    data-live-action-param="back"
                                    class="mb-3.5 inline-flex items-center gap-1.5 rounded-full bg-primary-50 dark:bg-primary-500/15 px-3 py-1.5 text-xs font-semibold text-primary-600 dark:text-primary-400 hover:bg-primary-100 dark:hover:bg-primary-500/25">
                                <twig:ux:icon name="ph:caret-left" class="size-3" />
                                {% if position %}{{ 'outbox.recipientOf'|trans({ index: position.index, total: position.total }) }}{% else %}{{ 'outbox.partOfMailing'|trans }}{% endif %}
                            </button>
                        {% endif %}
                        <h3 class="mb-4 text-[22px] font-semibold leading-snug tracking-tight text-gray-900 dark:text-gray-100">{{ message.subject }}</h3>
                        <div class="flex items-center gap-3">
                            <span class="inline-flex size-11 shrink-0 items-center justify-center rounded-full bg-gray-400 dark:bg-gray-600 text-sm font-bold text-white">{{ this.initials(this.recipientName(message)) }}</span>
                            <div class="min-w-0">
                                <div class="text-sm font-bold text-gray-900 dark:text-gray-100">{{ this.recipientName(message) }}</div>
                                <div class="text-[12.5px] text-gray-500 dark:text-gray-400"><b class="font-semibold text-gray-700 dark:text-gray-300">{{ 'outbox.to'|trans }}</b> {{ message.to }}</div>
                                <div class="text-[12.5px] text-gray-500 dark:text-gray-400"><b class="font-semibold text-gray-700 dark:text-gray-300">{{ 'outbox.from'|trans }}</b> {{ message.from }} · {{ message.createdAt|date('d.m.Y, H:i') }} {{ 'outbox.clock'|trans }}</div>
                            </div>
                        </div>
                    </div>

                    {{ include('@FerienpassAdmin/components/outbox/_body.html.twig', { body_html: message.html, body_text: message.text }) }}

                    <div class="flex items-center gap-1.5 px-7 pb-6 pt-4 text-[11.5px] text-gray-400 dark:text-gray-500">
                        <twig:ux:icon name="ph:lock-simple" class="size-3" />
                        {{ 'outbox.sentBySystem'|trans }} · {{ 'outbox.messageId'|trans }} #{{ '%05d'|format(message.id) }}
                    </div>

                    {# conversation thread (replies to this message) #}
                    {{ include('@FerienpassAdmin/components/outbox/_thread.html.twig', { thread: this.thread(message), message: message }) }}
                </div>

                {# activity timeline #}
                <div class="border-gray-200 dark:border-gray-800 px-6 pb-7 pt-6 xl:min-h-full xl:self-stretch xl:border-l max-xl:border-t max-xl:bg-gray-50 max-xl:dark:bg-gray-950/40">
                    <div class="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-900 dark:text-gray-100">
                        <twig:ux:icon name="ph:clock-counter-clockwise" class="size-3.5 text-gray-400" />{{ 'outbox.activity'|trans }}
                    </div>
                    {{ include('@FerienpassAdmin/components/outbox/_timeline.html.twig', { events: this.messageTimeline(message), withName: false }) }}
                </div>
            </div>
        </div>

    {% elseif selectedCampaign is not null %}
        {% set item = selectedCampaign %}
        {% set c = item.aggCounts %}
        {% set accent = this.typeColor(item.messageClass) %}

        {# toolbar #}
        <div class="flex flex-none flex-wrap items-center gap-2.5 border-b border-gray-200 dark:border-gray-800 px-7 py-3.5">
            <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11.5px] font-semibold" style="background: {{ accent }}1a; color: {{ accent }}">
                <span class="size-[7px] rounded-full" style="background: {{ accent }}"></span>{{ 'outbox.rundmail'|trans }} · {{ 'outbox.mailing'|trans }}
            </span>
            <span class="inline-flex items-center gap-1.5 text-[12.5px] font-semibold {{ statusMeta.geoeffnet.text }}">
                <span class="size-2 rounded-full {{ statusMeta.geoeffnet.dot }}"></span>{{ 'outbox.openedOf'|trans({ opened: c.geoeffnet, total: c.total }) }}
            </span>
            <span class="flex-1"></span>
            {% if item.group.uuid %}
                <twig:Admin:Button href="{{ path('admin_tools_dispatch', { uuid: item.group.uuid.toBase58 }) }}" size="sm">
                    <twig:ux:icon name="ph:chart-line-up" class="-ml-0.5 mr-1.5 size-3.5" />
                    {{ 'outbox.action.tracking'|trans({}, 'admin') }}
                </twig:Admin:Button>
            {% endif %}
        </div>

        <div class="min-h-0 flex-1 overflow-y-auto">
            <div class="grid grid-cols-1 items-start xl:grid-cols-[minmax(0,1fr)_320px]">

                <div class="min-w-0 overflow-hidden">
                    <div class="border-b border-gray-100 dark:border-gray-800 px-7 pb-5 pt-6">
                        <h3 class="mb-4 text-[22px] font-semibold leading-snug tracking-tight text-gray-900 dark:text-gray-100">{{ item.subject }}</h3>
                        <div class="flex items-center gap-3">
                            <span class="inline-flex size-11 shrink-0 items-center justify-center rounded-full bg-gray-400 dark:bg-gray-600 text-white">
                                <twig:ux:icon name="ph:users" class="size-5" />
                            </span>
                            <div class="min-w-0">
                                <div class="text-sm font-bold text-gray-900 dark:text-gray-100">{{ 'outbox.recipientsCount'|trans({ count: c.total }) }}</div>
                                <div class="text-[12.5px] text-gray-500 dark:text-gray-400"><b class="font-semibold text-gray-700 dark:text-gray-300">{{ 'outbox.to'|trans }}</b> {{ 'outbox.toMany'|trans({ name: this.recipientName(item.first), others: c.total - 1 }) }}</div>
                                <div class="text-[12.5px] text-gray-500 dark:text-gray-400"><b class="font-semibold text-gray-700 dark:text-gray-300">{{ 'outbox.from'|trans }}</b> {{ item.first.from }} · {{ item.ts|date('d.m.Y, H:i') }} {{ 'outbox.clock'|trans }}</div>
                            </div>
                        </div>
                    </div>

                    {{ include('@FerienpassAdmin/components/outbox/_body.html.twig', { body_html: item.first.html, body_text: item.first.text }) }}

                    <div class="flex items-center gap-1.5 px-7 pb-6 pt-4 text-[11.5px] text-gray-400 dark:text-gray-500">
                        <twig:ux:icon name="ph:lock-simple" class="size-3" />
                        {{ 'outbox.sentBySystem'|trans }} · {{ 'outbox.messageId'|trans }} #{{ '%05d'|format(item.group.id) }}
                    </div>
                </div>

                <div class="border-gray-200 dark:border-gray-800 px-6 pb-7 pt-6 xl:min-h-full xl:self-stretch xl:border-l max-xl:border-t max-xl:bg-gray-50 max-xl:dark:bg-gray-950/40">

                    {# funnel #}
                    <div class="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-900 dark:text-gray-100">
                        <twig:ux:icon name="ph:chart-bar" class="size-3.5 text-gray-400" />{{ 'outbox.delivery'|trans }}
                    </div>
                    {% set funnel = [
                        { label: 'outbox.status.zugestellt', value: c.zugestellt, rate: c.total > 0 ? (c.zugestellt / c.total * 100)|round : 0, bar: 'bg-sky-500' },
                        { label: 'outbox.status.geoeffnet',  value: c.geoeffnet,  rate: c.zugestellt > 0 ? (c.geoeffnet / c.zugestellt * 100)|round : 0, bar: 'bg-emerald-500' },
                        { label: 'outbox.status.geklickt',   value: c.geklickt,   rate: c.zugestellt > 0 ? (c.geklickt / c.zugestellt * 100)|round : 0, bar: 'bg-violet-500' },
                        { label: 'outbox.status.bounce',     value: c.bounce,     rate: c.total > 0 ? (c.bounce / c.total * 100)|round : 0, bar: 'bg-red-500' },
                    ] %}
                    <div class="grid grid-cols-2 gap-2.5">
                        {% for f in funnel %}
                            <div class="relative overflow-hidden rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 px-3 py-2.5">
                                <span class="absolute inset-y-0 left-0 w-[3px] {{ f.bar }}"></span>
                                <div class="text-[22px] font-bold leading-none tabular-nums text-gray-900 dark:text-gray-100">{{ f.value }}</div>
                                <div class="mt-1.5 text-[11.5px] font-semibold text-gray-600 dark:text-gray-300">{{ f.label|trans }}</div>
                                <div class="mt-0.5 text-[11px] text-gray-400 dark:text-gray-500">{{ f.rate }}%</div>
                            </div>
                        {% endfor %}
                    </div>

                    {# activity feed #}
                    {% if campaignActivity is not empty %}
                        <div class="mb-3 mt-6 flex items-center gap-2 text-sm font-semibold text-gray-900 dark:text-gray-100">
                            <twig:ux:icon name="ph:clock-counter-clockwise" class="size-3.5 text-gray-400" />{{ 'outbox.activity'|trans }}
                        </div>
                        {{ include('@FerienpassAdmin/components/outbox/_timeline.html.twig', { events: campaignActivity, withName: true }) }}
                    {% endif %}

                    {# replies to this mailing #}
                    {% if campaignRepliers is not empty %}
                        <div class="mb-3 mt-6 flex items-center gap-2 text-sm font-semibold text-gray-900 dark:text-gray-100">
                            <twig:ux:icon name="ph:chat-circle-text" class="size-3.5 text-gray-400" />{{ 'outbox.conversation.repliesCount'|trans({ count: campaignRepliers|length }) }}
                        </div>
                        <div class="flex flex-col overflow-hidden rounded-lg border border-gray-200 dark:border-gray-800">
                            {% for recipient in campaignRepliers %}
                                {% set needs = this.needsReply(recipient) %}
                                {% set lastItem = this.thread(recipient)|last %}
                                <div data-action="click->live#action"
                                     data-live-action-param="selectMessage"
                                     data-live-message-param="{{ recipient.id }}"
                                     class="grid cursor-pointer grid-cols-[30px_minmax(0,1fr)_auto_auto] items-center gap-2.5 border-b border-gray-100 dark:border-gray-800/60 px-3 py-2.5 last:border-b-0 transition hover:bg-gray-50 dark:hover:bg-gray-800/50 {{ needs ? 'bg-amber-50 dark:bg-amber-500/10' : '' }}">
                                    <span class="inline-flex size-[30px] items-center justify-center rounded-full bg-gray-400 dark:bg-gray-600 text-[10.5px] font-bold text-white">{{ this.initials(this.recipientName(recipient)) }}</span>
                                    <div class="min-w-0">
                                        <div class="truncate text-[12.5px] font-semibold text-gray-900 dark:text-gray-100">{{ this.recipientName(recipient) }}</div>
                                        <div class="truncate text-[11px] italic text-gray-500 dark:text-gray-400">{% if lastItem and not lastItem.fromEmail %}{{ 'outbox.conversation.youPrefix'|trans }}{% endif %}{{ lastItem ? lastItem.body : '' }}</div>
                                    </div>
                                    {% if needs %}
                                        <span class="rounded-full bg-amber-500 px-2 py-0.5 text-[10.5px] font-bold text-white">{{ 'outbox.conversation.openShort'|trans }}</span>
                                    {% else %}
                                        <span></span>
                                    {% endif %}
                                    <twig:ux:icon name="ph:caret-right" class="size-3.5 text-gray-300 dark:text-gray-600" />
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}

                    {# recipient list #}
                    <div class="mb-3 mt-6 flex items-center gap-2 text-sm font-semibold text-gray-900 dark:text-gray-100">
                        <twig:ux:icon name="ph:users" class="size-3.5 text-gray-400" />{{ 'outbox.recipientsCount'|trans({ count: c.total }) }}
                        <span class="font-medium normal-case tracking-normal text-gray-400">· {{ 'outbox.clickToOpen'|trans }}</span>
                    </div>
                    <div class="flex flex-col overflow-hidden rounded-lg border border-gray-200 dark:border-gray-800">
                        {% for recipient in item.recipients %}
                            {% set rst = statusMeta[recipient.deliveryStatus] %}
                            <div data-action="click->live#action"
                                 data-live-action-param="selectMessage"
                                 data-live-message-param="{{ recipient.id }}"
                                 class="grid cursor-pointer grid-cols-[30px_minmax(0,1fr)_auto_auto] items-center gap-2.5 border-b border-gray-100 dark:border-gray-800/60 px-3 py-2.5 last:border-b-0 transition hover:bg-gray-50 dark:hover:bg-gray-800/50">
                                <span class="inline-flex size-[30px] items-center justify-center rounded-full bg-gray-400 dark:bg-gray-600 text-[10.5px] font-bold text-white">{{ this.initials(this.recipientName(recipient)) }}</span>
                                <div class="min-w-0">
                                    <div class="truncate text-[12.5px] font-semibold text-gray-900 dark:text-gray-100">{{ this.recipientName(recipient) }}</div>
                                    <div class="truncate text-[11px] text-gray-500 dark:text-gray-400">{{ recipient.to }}</div>
                                </div>
                                <span class="inline-flex items-center gap-1.5 text-[11px] font-semibold {{ rst.text }}">
                                    <span class="size-[7px] rounded-full {{ rst.dot }}"></span>{{ rst.label|trans }}
                                </span>
                                <twig:ux:icon name="ph:caret-right" class="size-3.5 text-gray-300 dark:text-gray-600" />
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

    {% else %}
        <div class="m-auto max-w-xs px-10 py-10 text-center text-gray-400 dark:text-gray-500">
            <div class="mx-auto mb-3.5 grid size-[54px] place-items-center rounded-lg bg-gray-100 dark:bg-gray-800">
                <twig:ux:icon name="ph:envelope-open" class="size-6" />
            </div>
            <b class="mb-0.5 block text-sm text-gray-600 dark:text-gray-300">{{ 'outbox.detail.emptyTitle'|trans }}</b>
            {{ 'outbox.detail.emptyText'|trans }}
        </div>
    {% endif %}

</section>
