{# Plan 47 — confirm-revoke modal.
   Replaces the browser-native confirm() so the look stays consistent
   and the destructive action gets a visible "Keep it" out. Triggered
   by the per-row Revoke button in _pending_table.html via
   askRevokeFrom() → askRevoke(id, email) on the Alpine root.
   Chrome (teleport + backdrop + centered card) comes from the shared
   `modal()` macro — see admin/components/ui.html. #}
{% from 'admin/components/ui.html' import modal %}
{% call modal('showRevoke', 'closeRevoke()') %}
    <div class="flex items-start gap-3 mb-4">
      <div class="flex-shrink-0 w-9 h-9 rounded-md bg-red-500/[0.08] border border-red-500/30 flex items-center justify-center">
        <i data-lucide="alert-triangle" class="w-4 h-4 text-red-300"></i>
      </div>
      <div>
        <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight">Revoke invitation?</h3>
        <p class="text-[13px] text-ink-400 mt-1">
          The URL for <span class="text-ink-200" x-text="revokeTarget.email"></span>
          will stop working immediately. They'll see a "not found" page
          if they try to open it.
        </p>
        <p class="text-[11px] text-ink-500 mt-2">You can create a new invitation any time.</p>
      </div>
    </div>
    <div class="flex justify-end gap-3">
      <button
        type="button"
        @click="closeRevoke()"
        class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100"
      >Keep it</button>
      <button
        type="button"
        @click="confirmRevoke()"
        :disabled="revokeLoading"
        class="px-3 py-1.5 border border-red-500/30 hover:border-red-500/50 bg-red-500/[0.06] hover:bg-red-500/[0.10] text-red-200 text-[13px] font-medium rounded-md disabled:opacity-50"
      >
        <span x-text="revokeLoading ? 'Revoking…' : 'Revoke'"></span>
      </button>
    </div>
{% endcall %}