@props(['id', 'maxWidth' => 'max-w-2xl'])


<div x-data="{ show: false }"
     @open-modal.window="if ($event.detail === '{{ $id }}') show = true"
     @close-modal.window="show = false"
     @keydown.escape.window="show = false"
     x-show="show"
     class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 z-50"
     style="display: none;"
     role="dialog" aria-modal="true" tabindex="-1">
  <div @click.away="show = false" class="bg-white rounded-lg shadow-lg w-full p-6 {{ $maxWidth }} max-h-screen overflow-y-auto">
    {{ $slot }}
  </div>
</div>