{{--
    L'aperçu du document, à côté de ses options.

    Le PDF est rendu pour de bon — c'est exactement celui qui sera enregistré —
    mais il vit dans un répertoire de transit et n'appartient à aucun dossier
    client. Il est refait à chaque changement d'option.
--}}
<div
    class="h-full"
    wire:loading.class="opacity-50"
>
    @if ($url)
        <iframe
            src="{{ $url }}#toolbar=1&view=FitH"
            title="Aperçu du document"
            class="h-[70vh] min-h-[520px] w-full rounded-lg border border-gray-200 bg-white dark:border-white/10"
        ></iframe>
        <div class="mt-2 flex flex-wrap items-center gap-2">
            {{--
                La sortie de l'aperçu sur téléphone (v1.9.0 §D) : l'iframe n'y
                offre ni barre d'outils ni téléchargement, et le document
                restait à l'écran sans qu'on puisse rien en faire. Le lecteur
                porte « ← Retour » et « Télécharger ».
            --}}
            {{-- Vers le lecteur (v1.9.1 §E) : il porte « ← Retour » et
                 « Partager ou enregistrer », et rend tout le document sur
                 téléphone. L'onglet neuf préserve la fenêtre de génération
                 et ses options — la cible est une page à nous, jamais un
                 PDF brut. --}}
            <x-filament::button
                tag="a"
                href="{{ \App\Support\Lecteur::ouvrir('document.apercu', ['jeton' => basename(parse_url($url, PHP_URL_PATH))], 'Aperçu du document') }}"
                target="_blank"
                rel="noopener"
                color="gray"
                icon="heroicon-o-arrows-pointing-out"
                size="xs"
            >
                Ouvrir en grand
            </x-filament::button>

            <p class="text-xs text-gray-500 dark:text-gray-400">
                Aperçu — ce document n'est pas encore au dossier du client.
            </p>
        </div>
    @else
        <div class="flex h-[70vh] min-h-[520px] w-full items-center justify-center rounded-lg border border-dashed border-gray-300 bg-gray-50 p-6 text-center dark:border-white/10 dark:bg-white/5">
            <div>
                <p class="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Aperçu indisponible
                </p>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Choisissez un type de document. Si le message persiste, le gabarit
                    correspondant est absent ou désactivé dans Réglages → Documents.
                </p>
            </div>
        </div>
    @endif
</div>