@props({'name': '', 'trigger': '', 'open': False})
<div data-slot="alert-dialog" x-data="{ open: {{ str(bool(open)).lower() }} }"
  x-on:keydown.escape.window="open = false"
  x-on:alert-dialog-open.window="$event.detail === '{{ name }}' && (open = true)"
  x-on:alert-dialog-close.window="$event.detail === '{{ name }}' && (open = false)"
  x-effect="document.body.classList.toggle('overflow-hidden', open)"
  class="contents">
  <span data-slot="alert-dialog-trigger" class="contents" x-on:click="open = true">{{ trigger }}</span>
  <div x-show="open" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
    <div data-slot="alert-dialog-overlay" x-show="open" x-transition.opacity class="fixed inset-0 bg-black/50"></div>
    <div role="alertdialog" aria-modal="true" data-slot="alert-dialog-content" x-show="open"
      x-transition:enter="duration-200 ease-out" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100"
      x-transition:leave="duration-150 ease-in" x-transition:leave-start="scale-100 opacity-100" x-transition:leave-end="scale-95 opacity-0"
      {{ attributes.cn("relative z-50 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border bg-background p-6 shadow-lg sm:max-w-lg") }}>{{ slot }}</div>
  </div>
</div>