<div class="mx-auto max-w-[1120px] space-y-5">
    <div class="animate-rise">
        <h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('mail_preview.title') }}</h1>
        <p class="mt-1 max-w-[70ch] text-sm leading-relaxed text-muted">{{ __('mail_preview.subtitle') }}</p>
    </div>

    {{-- A preview that goes nowhere is worse than none: the browser view still
         works, and "senden" would write to a file and report success. --}}
    @if (! $delivers)
        <x-ui.alert variant="warning">
            {{ __('admin.notice.mail_not_delivering', ['mailer' => (string) (config('mail.default') ?? 'null')]) }}
        </x-ui.alert>
    @endif

    <div class="overflow-hidden rounded-lg border border-line bg-surface shadow-xs animate-rise [animation-delay:60ms]">
        <ul class="divide-y divide-line">
            @foreach ($previews as $key => $label)
                <li wire:key="prev-{{ $key }}" class="flex flex-wrap items-center gap-3 px-6 py-4">
                    <div class="min-w-0 flex-1">
                        <p class="text-sm font-medium text-ink">{{ $label }}</p>
                        {{-- Which mailbox it goes out from, because that is the
                             field a mail server checks: an account may only send
                             from the address it owns, and a mismatch here is the
                             "553 Sender address rejected" that has no other
                             visible cause. --}}
                        <p class="font-mono text-xs text-muted">
                            {{ $key }}
                            @if ($senders[$key] ?? null)
                                · {{ $senders[$key] }}
                            @endif
                        </p>
                    </div>

                    {{-- A new tab, not an iframe: a mail is a whole document with
                         its own background, and judging it inside a console page
                         judges the console's frame around it. --}}
                    <x-ui.button :href="route('admin.mail.preview.show', $key)" variant="secondary" size="sm" target="_blank">
                        <x-ui.icon name="external-link" class="size-4" />{{ __('mail_preview.open') }}
                    </x-ui.button>

                    <x-ui.button wire:click="sendToMe('{{ $key }}')" variant="primary" size="sm"
                                 wire:loading.attr="disabled" wire:target="sendToMe('{{ $key }}')"
                                 :disabled="! $delivers">
                        <x-ui.icon name="send" class="size-4" />{{ __('mail_preview.send') }}
                    </x-ui.button>
                </li>
            @endforeach
        </ul>
    </div>

    <p class="text-xs leading-relaxed text-muted">{{ __('mail_preview.note', ['email' => $me]) }}</p>
</div>
