{# Confirmation dialog — Alpine dzConfirm component with native <dialog> #}
{# #}
{# Usage: Include once in 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="modal">
    <div class="modal-box">
      <h3 class="font-bold text-lg">Confirm Action</h3>
      <p class="py-4" x-text="message"></p>
      <div class="modal-action">
        <button class="btn btn-ghost" @click="cancel()">Cancel</button>
        <button class="btn btn-error" :class="loading && 'loading'" :disabled="loading"
                @click="confirm()">
          Confirm
        </button>
      </div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>close</button></form>
  </dialog>
</div>