@props(['name', 'title', 'maxWidth' => 'max-w-md'])
{{-- Open with: $dispatch('open-modal', '{{ name }}') --}}
<div x-data="{ open: {{ $errors->any() && old('_modal') === $name ? 'true' : 'false' }} }"
     @open-modal.window="open = ($event.detail === '{{ $name }}')"
     @keydown.escape.window="open = false" x-cloak>
    <div x-show="open" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 p-4">
        <div class="card w-full {{ $maxWidth }}" @click.outside="open = false">
            <header class="flex items-center justify-between border-b border-gray-200 px-5 py-3.5 dark:border-gray-800">
                <h3 class="font-semibold">{{ $title }}</h3>
                <button type="button" @click="open = false" class="rounded-lg p-1 text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" aria-label="{{ __('Close') }}"><x-heroicon-o-x-mark class="size-5" /></button>
            </header>
            <div class="p-5">{{ $slot }}</div>
        </div>
    </div>
</div>