{{--
    L'aperçu du message : ce que le destinataire lira.

    Le rendu final, et non une imitation : le gabarit réel est rendu, avec ses
    tables et ses styles en ligne, dans un cadre isolé. Une imitation finit
    toujours par mentir sur un détail, et ce détail est celui qu'on découvre
    chez le client.

    Le cadre est isolé pour une raison précise : les styles du panneau
    d'administration déborderaient sinon sur le gabarit, et l'aperçu montrerait
    une mise en page que le destinataire ne verra jamais.

    Il ne déclenche aucun envoi — il se contente de rendre ce que le bouton
    d'envoi expédierait.
--}}
@php
    $etroit = ($largeur ?? 'ecran') === 'telephone';
@endphp

<div class="space-y-3">
    <dl class="space-y-1 text-sm">
        <div class="flex gap-2">
            <dt class="w-16 shrink-0 text-gray-500 dark:text-gray-400">À</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">
                {{ $destinataires ? implode(', ', $destinataires) : '— aucun destinataire —' }}
            </dd>
        </div>

        @if ($copies)
            <div class="flex gap-2">
                <dt class="w-16 shrink-0 text-gray-500 dark:text-gray-400">Copie</dt>
                <dd class="text-gray-700 dark:text-gray-300">{{ implode(', ', $copies) }}</dd>
            </div>
        @endif

        <div class="flex gap-2">
            <dt class="w-16 shrink-0 text-gray-500 dark:text-gray-400">Objet</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">{{ $objet ?: '— sans objet —' }}</dd>
        </div>
    </dl>

    {{-- Le basculement écran large / téléphone : c'est sur téléphone que se lit
         l'essentiel du courrier, et c'est là qu'une mise en page mal réglée se
         voit. --}}
    <div class="flex items-center justify-between gap-2 text-xs">
        <span class="text-gray-500 dark:text-gray-400">
            {{ \App\Domaines\Courrier\Support\MiseEnPage::options()[$mise_en_page] ?? '' }}
        </span>

        <button type="button"
                wire:click="basculerLargeurApercu"
                class="inline-flex items-center gap-1.5 rounded-md border border-gray-300 px-2.5 py-1 font-medium text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:text-gray-200 dark:hover:bg-white/5">
            {{ $etroit ? 'Voir sur écran large' : 'Voir sur téléphone' }}
        </button>
    </div>

    <div class="flex justify-center overflow-hidden rounded-lg border border-gray-200 bg-gray-100 p-2 dark:border-white/10 dark:bg-gray-900">
        {{-- « srcdoc » plutôt qu'une adresse : le gabarit est rendu ici, en
             mémoire, sans qu'aucune route ne l'expose ni qu'aucun envoi ne
             parte. --}}
        <iframe
            title="Aperçu du message"
            sandbox=""
            srcdoc="{{ $html }}"
            style="width: {{ $etroit ? '390px' : '100%' }}; max-width: 100%; height: 620px; border: 0; background: #ffffff;"
            class="rounded shadow-sm"
        ></iframe>
    </div>
</div>