@props({'name': '', 'trigger': '', 'side': 'right', 'open': False})
<div data-slot="sheet" x-data="{ open: {{ str(bool(open)).lower() }} }"
  x-on:keydown.escape.window="open = false"
  x-on:sheet-open.window="$event.detail === '{{ name }}' && (open = true)"
  x-on:sheet-close.window="$event.detail === '{{ name }}' && (open = false)"
  x-effect="document.body.classList.toggle('overflow-hidden', open)"
  class="contents">
  <span data-slot="sheet-trigger" class="contents" x-on:click="open = true">{{ trigger }}</span>
  <div x-show="open" x-cloak class="fixed inset-0 z-50">
    <div data-slot="sheet-overlay" x-show="open" x-transition.opacity.duration.300ms class="fixed inset-0 bg-black/50" x-on:click="open = false"></div>
    <div role="dialog" aria-modal="true" data-slot="sheet-content" x-show="open"
      x-transition:enter="transition duration-300 ease-out" x-transition:leave="transition duration-200 ease-in"
      x-transition:enter-start="{{ {'right': 'translate-x-full', 'left': '-translate-x-full', 'top': '-translate-y-full', 'bottom': 'translate-y-full'}[side] }}"
      x-transition:leave-end="{{ {'right': 'translate-x-full', 'left': '-translate-x-full', 'top': '-translate-y-full', 'bottom': 'translate-y-full'}[side] }}"
      {{ attributes.cn(
        "fixed z-50 flex flex-col gap-4 bg-background shadow-lg",
        {
            'right': 'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
            'left': 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
            'top': 'inset-x-0 top-0 h-auto border-b',
            'bottom': 'inset-x-0 bottom-0 h-auto border-t',
        }[side],
      ) }}>
      {{ slot }}
      <button type="button" x-on:click="open = false" class="absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden [&_svg]:size-4">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
        <span class="sr-only">Close</span>
      </button>
    </div>
  </div>
</div>