{% comment %}NexUI Modal v1.0.0

Usage:
  {% modal id="confirm" title="Are you sure?" description="This cannot be undone." %}
    <p class="text-sm text-muted-foreground">All data will be removed.</p>
    <div class="mt-4 flex justify-end gap-2">
      {% button variant="outline" %}Cancel{% endbutton %}
      {% button variant="destructive" %}Delete{% endbutton %}
    </div>
  {% endmodal %}

  Open from anywhere:
    <button @click="$dispatch('open-modal', { id: 'confirm' })">Open</button>
{% endcomment %}
<div
  x-data="{ open: false }"
  x-on:open-modal.window="if ($event.detail.id === '{{ id|default:'modal' }}') open = true"
  x-on:close-modal.window="if ($event.detail.id === '{{ id|default:'modal' }}') open = false"
  x-on:keydown.escape.window="open = false"
>
  {% if trigger_label %}
  <button
    type="button"
    x-on:click="open = true"
    class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 {{ trigger_class }}"
  >{{ trigger_label }}</button>
  {% endif %}

  <div
    x-show="open"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 z-50 bg-black/80"
    x-on:click="open = false"
    style="display:none"
  ></div>

  <div
    x-show="open"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0 scale-95"
    x-transition:enter-end="opacity-100 scale-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100 scale-100"
    x-transition:leave-end="opacity-0 scale-95"
    class="fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-background p-6 shadow-lg {{ modal_class }}"
    style="display:none"
  >
    <button
      type="button"
      x-on:click="open = false"
      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
      aria-label="Close"
    >
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
    </button>

    {% if title or description %}
    <div class="mb-4 flex flex-col space-y-1.5">
      {% if title %}<h2 class="text-lg font-semibold leading-none tracking-tight">{{ title }}</h2>{% endif %}
      {% if description %}<p class="text-sm text-muted-foreground">{{ description }}</p>{% endif %}
    </div>
    {% endif %}

    <div id="{{ id|default:'modal' }}-body">{{ slot }}</div>
  </div>
</div>