@props([
    'name' => 'confirm',
    'title' => 'Confirm action',
    'message' => 'Are you sure?',
    'confirmLabel' => 'Confirm',
    'cancelLabel' => 'Cancel',
])

<div
    x-data="{ open: false, form: null }"
    x-on:confirm-dialog.window="if ($event.detail?.name === '{{ $name }}') { open = true; form = $event.detail.form ?? null; }"
    x-on:keydown.escape.window="open = false"
>
    <div class="overlay" :class="{ 'open': open }" @click.self="open = false" x-show="open" x-transition.opacity style="display:none;" x-bind:style="open && { display: 'flex' }">
        <div class="modal" @click.stop x-show="open" x-transition style="max-width:420px;">
            <div class="modal-head">
                <div class="modal-title">{{ $title }}</div>
                <button type="button" class="modal-close" @click="open = false" aria-label="Close">&times;</button>
            </div>
            <p style="color:var(--text2); font-size:14px; margin-bottom:8px;">{{ $message }}</p>
            {{ $slot }}
            <div class="modal-actions">
                <button type="button" class="btn btn-ghost" @click="open = false">{{ $cancelLabel }}</button>
                <button type="button" class="btn btn-danger" @click="if (form) form.submit(); open = false;">{{ $confirmLabel }}</button>
            </div>
        </div>
    </div>
</div>