{# Plan 47 — pending-invitations table.
   The body (#invites-table) is filled imperatively by loadPending()
   in invites.js — each row carries an inline onclick that bridges
   back into the Alpine instance via askRevokeFrom(). The count badge
   (#pending-count) is also written from there. #}
{% from 'admin/components/ui.html' import card %}
{% call card() %}
<div class="flex items-center justify-between mb-3">
  <h2 class="text-sm font-semibold text-ink-300">Pending</h2>
  <span class="text-xs text-ink-500" id="pending-count"></span>
</div>
<div class="overflow-x-auto">
  <table class="w-full text-sm text-left">
    <thead class="text-xs text-ink-500 uppercase">
      <tr class="border-b border-white/[0.06]">
        <th class="px-4 py-3">Invitee</th>
        <th class="px-4 py-3">Role</th>
        <th class="px-4 py-3">Created</th>
        <th class="px-4 py-3">Expires</th>
        <th class="px-4 py-3 text-right">Actions</th>
      </tr>
    </thead>
    <tbody id="invites-table" class="divide-y divide-white/[0.06]">
      <tr><td colspan="5" class="px-4 py-4 text-ink-500">Loading…</td></tr>
    </tbody>
  </table>
</div>
{% endcall %}