{% trans_default_domain 'admin' %}
{#
    A mail-client "reading pane" shell around an e-mail preview. The rendered
    e-mail (usually a shadow-root document) goes into the default slot; this
    component only supplies the surrounding chrome: a window toolbar, the subject
    line and the From/To metadata header. Shared by the season + global
    notification previews and the Rundmail (mailing) step-2 preview.
#}
{% props
    subject = null,
    fromName = null,
    fromAddress = null,
    to = null,
    replyTo = null,
    attachment = null,
    label = null,
    disabled = false,
    disabledText = null
%}
{% set fromName = fromName ?? page_config().pageTitle|default('Ferienpass') %}
{% set label = label ?? 'notifications.season.preview'|trans %}
{% set fromWords = fromName|trim|split(' ')|filter(w => w is not empty) %}
{% set fromInitials %}{% if fromWords|length > 1 %}{% for w in fromWords|slice(0, 2) %}{{ w|first }}{% endfor %}{% else %}{{ fromName|trim|slice(0, 2) }}{% endif %}{% endset %}
{% set fromInitials = fromInitials|trim|upper %}

<div {{ attributes.defaults({ class: 'relative overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-white/10 dark:bg-gray-900' }) }}>
    {# window toolbar — macOS-style traffic lights + a preview marker #}
    <div class="flex items-center gap-1.5 border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-white/10 dark:bg-white/5">
        <span class="size-2.5 rounded-full bg-red-400"></span>
        <span class="size-2.5 rounded-full bg-amber-400"></span>
        <span class="size-2.5 rounded-full bg-green-400"></span>
        {% if label %}<span class="ml-3 text-xs font-medium text-gray-400 dark:text-gray-500">{{ label }}</span>{% endif %}
    </div>

    {# message #}
    <div class="transition {{ disabled ? 'opacity-40 grayscale' : '' }}">
        {# header — mirrors the Postausgang (outbox) message header (Von/An formatting) #}
        <div class="border-b border-gray-100 px-6 pt-5 pb-4 dark:border-gray-800">
            {% if subject %}
                <h3 class="mb-4 text-[22px] font-semibold leading-snug tracking-tight text-gray-900 dark:text-gray-100">{{ subject }}</h3>
            {% endif %}

            <div class="flex items-center gap-3">
                <span class="inline-flex size-11 shrink-0 items-center justify-center rounded-full bg-gray-400 text-sm font-bold text-white dark:bg-gray-600">{{ fromInitials }}</span>
                <div class="min-w-0">
                    <div class="truncate text-sm font-bold text-gray-900 dark:text-gray-100">{{ fromName }}</div>
                    {% if to %}
                        <div class="truncate 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> {{ to }}</div>
                    {% endif %}
                    <div class="truncate 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> {{ fromAddress ?? fromName }}</div>
                    {% if replyTo %}
                        <div class="truncate text-[12.5px] text-gray-500 dark:text-gray-400"><b class="font-semibold text-gray-700 dark:text-gray-300">{{ 'outbox.replyTo'|trans }}</b> {{ replyTo }}</div>
                    {% endif %}
                    {% if attachment %}
                        <div class="flex items-center gap-1 truncate text-[12.5px] text-gray-500 dark:text-gray-400"><b class="font-semibold text-gray-700 dark:text-gray-300">{{ 'outbox.attachment'|trans }}</b> <twig:ux:icon name="ph:paperclip" class="size-3.5 shrink-0 text-gray-400" /> {{ attachment }}</div>
                    {% endif %}
                </div>
            </div>
        </div>

        {# body: full-bleed so the e-mail's own background reaches the shell edges #}
        {% block content %}{% endblock %}
    </div>

    {% if disabled and disabledText %}
        <div class="absolute inset-0 z-10 grid place-items-center p-6">
            <div class="inline-flex max-w-sm items-center gap-2.5 rounded-xl bg-gray-900 px-4 py-3 text-sm font-medium text-white shadow-lg dark:bg-black">
                <twig:ux:icon name="ph:prohibit" class="size-5 shrink-0" /> {{ disabledText }}
            </div>
        </div>
    {% endif %}
</div>
