@props(['id' => null])

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('modal', {
            open: false,
            id: null,
            isOpen(id) {
                return this.open && this.id === id;
            },
            openModal(id) {
                this.open = true;
                this.id = id;
            },
            closeModal() {
                this.open = false;
                this.id = null;
            }
        });
    });
</script>

<div
    x-data
    x-on:open-modal.window="if ($event.detail === '{{ $id }}') $store.modal.openModal('{{ $id }}')"
    x-on:close-modal.window="if ($event.detail === '{{ $id }}') $store.modal.closeModal()"
    x-on:keydown.escape.window="$store.modal.closeModal()"
    x-on:click.away="$store.modal.closeModal()"
>
    {{ $slot }}
</div>