{{--
    Portée d'une modification sur une réunion de série — titre, description,
    lieu, lien visio, organisateur. Partagé par le panneau Aperçu et la page
    dédiée : les deux hébergent `HasElementDetail`, même état
    (`$meetingFieldScopeModalOpen`), même modale.

    N'existe dans le DOM que si `$meetingFieldScopeModalOpen` est vrai côté
    serveur — même parti pris que `shift-modal.blade.php` (lot 1), rien à
    désynchroniser entre l'état d'ouverture et le contenu.
--}}
@if ($meetingFieldScopeModalOpen)
    <div
        class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-gray-950/50 p-4 pt-[10vh] backdrop-blur-sm"
        wire:click.self="cancelMeetingFieldChange"
    >
        <div class="w-full max-w-md rounded-xl border border-gray-200 bg-white shadow-xl dark:border-white/10 dark:bg-gray-900">
            <div class="flex items-center justify-between border-b border-gray-100 px-4 py-3 dark:border-white/5">
                <h3 class="text-sm font-bold text-gray-950 dark:text-white">Cette réunion fait partie d'une série</h3>
                <button type="button" wire:click="cancelMeetingFieldChange" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
                    <x-filament::icon icon="heroicon-o-x-mark" class="h-4 w-4" />
                </button>
            </div>

            <div class="px-4 py-4">
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    Appliquer cette modification à cette réunion seulement, ou aussi aux suivantes de la série ?
                </p>
            </div>

            <div class="flex flex-col gap-2 border-t border-gray-100 px-4 py-3 dark:border-white/5">
                <button
                    type="button"
                    wire:click="confirmMeetingFieldChange('this')"
                    wire:loading.attr="disabled"
                    wire:target="confirmMeetingFieldChange"
                    class="w-full rounded-lg border border-gray-200 px-4 py-2 text-xs font-semibold text-gray-600 hover:bg-gray-50 dark:border-white/10 dark:text-gray-300 dark:hover:bg-white/5"
                >
                    Cette réunion seulement
                </button>
                <button
                    type="button"
                    wire:click="confirmMeetingFieldChange('this_and_following')"
                    wire:loading.attr="disabled"
                    wire:target="confirmMeetingFieldChange"
                    class="w-full rounded-lg bg-primary-600 px-4 py-2 text-xs font-semibold text-white hover:bg-primary-500"
                >
                    Cette réunion et les suivantes
                </button>
            </div>
        </div>
    </div>
@endif