{# Confirmation dialog — Alpine dzConfirm component with native <dialog> #}
{# Contract: ~/.claude/skills/ux-architect/components/confirm-dialog.md (UX-014) #}
{#                                                                            #}
{# Usage: include once per page. Trigger from any button with:                #}
{#   <button @click="$dispatch('dz-confirm', {                                #}
{#     message: 'Delete this item?',                                          #}
{#     action: '/api/tasks/1',                                                #}
{#     method: 'delete',                                                      #}
{#     target: 'closest tr',                                                  #}
{#     swap: 'outerHTML swap:300ms',                                          #}
{#     triggerEl: $el                                                         #}
{#   })">Delete</button>                                                       #}
<div x-data="dzConfirm">
  <dialog x-ref="dialog"
          class="bg-transparent p-0 backdrop:bg-black/40 backdrop:backdrop-blur-sm">
    <div class="bg-[hsl(var(--popover))] border border-[hsl(var(--border))] rounded-[6px] shadow-[0_20px_40px_rgb(0_0_0/0.2),0_2px_8px_rgb(0_0_0/0.08)] max-w-sm w-full p-5">
      <h3 class="text-[14px] font-semibold text-[hsl(var(--foreground))] mb-2">Confirm Action</h3>
      <p class="text-[13px] text-[hsl(var(--muted-foreground))] mb-5" x-text="message"></p>
      <div class="flex justify-end gap-2">
        <button type="button"
                class="h-8 px-3 rounded-[4px] text-[13px] font-medium text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
                @click="cancel()">
          Cancel
        </button>
        <button type="button"
                class="h-8 px-3 rounded-[4px] text-[13px] font-medium bg-[hsl(var(--destructive))] text-[hsl(var(--destructive-foreground))] hover:brightness-110 transition-[filter] duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)] inline-flex items-center gap-2"
                :class="loading && 'opacity-60 pointer-events-none'"
                :disabled="loading"
                @click="confirm()">
          <svg x-show="loading" class="h-3.5 w-3.5 animate-spin" fill="none" viewBox="0 0 24 24" aria-hidden="true">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
          </svg>
          <span>Confirm</span>
        </button>
      </div>
    </div>
    {# Backdrop click dismisses via native form method="dialog" #}
    <form method="dialog" class="fixed inset-0 -z-10">
      <button aria-label="Close" class="w-full h-full cursor-default">close</button>
    </form>
  </dialog>
</div>