@props({'trigger': '', 'align': 'center', 'side': 'bottom'})
<div data-slot="popover" x-data="{ open: false }" x-on:keydown.escape="open = false" class="relative inline-block">
  <span data-slot="popover-trigger" class="contents" x-on:click="open = !open">{{ trigger }}</span>
  <div data-slot="popover-content" x-show="open" x-cloak x-on:click.outside="open = false"
    x-transition:enter="duration-100 ease-out" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100"
    {{ attributes.cn(
      "absolute z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden",
      {'bottom': 'top-full mt-2', 'top': 'bottom-full mb-2'}[side],
      {'start': 'left-0', 'center': 'left-1/2 -translate-x-1/2', 'end': 'right-0'}[align],
    ) }}>{{ slot }}</div>
</div>