@props(['action', 'method' => 'POST', 'title', 'message', 'confirm' => null, 'variant' => 'danger', 'trigger' => null, 'triggerVariant' => 'danger-ghost'])
{{-- Acción que requiere confirmación: abre un diálogo accesible (Alpine) antes de enviar. --}}
<div x-data="{ open: false }" class="inline-block" x-on:keydown.escape.window="open = false">
    <x-button type="button" :variant="$triggerVariant" size="sm" x-on:click="open = true">{{ $trigger ?? $title }}</x-button>

    <template x-teleport="body">
        <div x-show="open" x-cloak class="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center" role="dialog" aria-modal="true" x-bind:aria-labelledby="$id('dialogo')">
            <div class="fixed inset-0 bg-slate-900/40" x-on:click="open = false" aria-hidden="true"></div>
            <div class="relative w-full max-w-md rounded-xl bg-white p-6 shadow-xl" x-trap.noscroll="open">
                <h2 x-bind:id="$id('dialogo')" class="text-base font-semibold text-slate-900">{{ $title }}</h2>
                <p class="mt-2 text-sm text-slate-600">{{ $message }}</p>
                <x-form :action="$action" :method="$method" class="mt-6">
                    {{ $slot }}
                    <div class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
                        <x-button type="button" variant="secondary" x-on:click="open = false">{{ __('Cancelar') }}</x-button>
                        <x-button :variant="$variant">{{ $confirm ?? $title }}</x-button>
                    </div>
                </x-form>
            </div>
        </div>
    </template>
</div>