{% extends "admin/base.html" %}

{% block title %}Invitations — cmdop admin{% endblock %}

{% block content %}
{% from 'admin/components/ui.html' import card, input, badge, empty_state, tooltip %}

<div
  class="space-y-6"
  x-data="invitesPage()"
  @keydown.escape.window="closeAll()"
>
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-[20px] font-semibold text-ink-100 tracking-tight">Invitations</h1>
      <p class="text-[12px] text-ink-500 mt-1">
        Fleet: {{ fleet.name }} &middot; one-shot URLs you share with new
        teammates over Slack, chat, or in person
      </p>
    </div>
    <div class="flex items-center gap-2">
      <button @click="loadAll()" class="inline-flex items-center gap-1.5 px-2.5 py-1 text-[12px] text-ink-300 hover:text-ink-100 border border-white/[0.08] hover:border-white/[0.16] rounded-md transition-colors">
        <i data-lucide="refresh-cw" class="w-3 h-3"></i>
        Refresh
      </button>
      {% if member_role in ('owner', 'admin', 'server-admin') %}
      <button
        @click="openCreate()"
        class="px-3 py-1.5 bg-white hover:bg-ink-100 text-black text-[13px] font-medium rounded-md transition-colors"
      >
        + Create invitation
      </button>
      {% endif %}
    </div>
  </div>

  {# Plan 61/2b-W4 — compact hero (2-line). Old 4-step explainer hides
     behind the "Show details" toggle so the page reclaims ~150px on
     every repeat visit. #}
  <div
    x-show="showHero"
    x-cloak
    class="rounded-md border border-cmdop-500/30 bg-cmdop-500/[0.04] px-4 py-3 flex items-start gap-3"
  >
    <i data-lucide="mail-plus" class="w-4 h-4 text-cmdop-400 mt-0.5 flex-shrink-0"></i>
    <div class="flex-1 min-w-0">
      <p class="text-[13px] text-ink-200">
        Invite teammates to your fleet. They get a one-shot link to set their password and join.
        {% if member_role in ('owner', 'admin', 'server-admin') %}
        <button @click="openCreate()" class="ml-1 text-cmdop-300 hover:text-cmdop-200 underline underline-offset-2 inline-flex items-center gap-0.5">
          Send new invite
          <i data-lucide="arrow-right" class="w-3 h-3"></i>
        </button>
        {% endif %}
        {{ tooltip("Single-use URL. Once opened and accepted, can't be reused. Safe to share via email or chat.") }}
      </p>
      <button
        type="button"
        @click="showHeroDetails = !showHeroDetails"
        class="text-[11px] text-ink-500 hover:text-ink-300 mt-1 inline-flex items-center gap-0.5"
        :aria-expanded="showHeroDetails.toString()"
      >
        <span x-text="showHeroDetails ? 'Hide details' : 'Show details'"></span>
        <i data-lucide="chevron-down" class="w-3 h-3 transition-transform" :class="showHeroDetails ? 'rotate-180' : ''"></i>
      </button>
      <div x-show="showHeroDetails" x-cloak class="mt-2 border-t border-white/[0.06] pt-2">
        <ol class="space-y-1 text-[12px] text-ink-400 list-decimal list-inside">
          <li>You pick an email and role, click <b class="text-ink-200">Create invitation</b>.</li>
          <li>The relay returns a <b class="text-ink-200">one-shot URL</b> you copy and send via Slack / chat / in-person.</li>
          <li>Your teammate opens it once, sets a password, joins this fleet.</li>
          <li>You can revoke any URL until it's used.</li>
        </ol>
        <p class="mt-2 text-[11px] text-ink-500">
          Designed for self-hosted setups without email: no SMTP, no inbound port for the teammate, just one URL.
        </p>
      </div>
    </div>
    <button
      @click="dismissHero()"
      class="flex-shrink-0 text-[11px] text-ink-500 hover:text-ink-300 px-2 py-1 rounded"
    >Dismiss</button>
  </div>

  <!-- Create modal -->
  <template x-teleport="body">
  <div
    x-show="showCreate"
    x-cloak
    class="fixed inset-0 z-50 flex items-center justify-center p-4"
  >
    <div class="absolute inset-0 bg-black/60" @click="closeCreate()"></div>
    <div class="relative w-full max-w-md rounded-lg border border-white/[0.08] bg-ink-950 p-6 shadow-2xl">
      <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight mb-1">Create invitation</h3>
      <p class="text-[11px] text-ink-500 mb-5">You'll get a one-shot URL to share with this person.</p>

      {# Plan 61/2b-W4 — modal reduced to 2 default fields (email, role).
         display_name + ttl moved under an "Advanced" disclosure; 7-day
         expiry stays the default so common-case is one form, one click. #}
      <form @submit.prevent="createInvite()" class="space-y-4">
        <div class="space-y-1.5">
          <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500">Email<span class="text-red-400 ml-0.5">*</span></label>
          <input
            id="email"
            type="email"
            required
            placeholder="colleague@team.lan"
            x-model="form.email"
            class="w-full px-3 py-2 bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 rounded-md text-[13px] text-ink-100 placeholder-ink-600 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors"
          />
          <p class="text-[12px] text-ink-500">
            If this email already has an account, they'll just join this
            fleet — their password stays the same.
          </p>
        </div>

        <div class="space-y-1.5">
          <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500">Role<span class="text-red-400 ml-0.5">*</span></label>
          <select
            id="role"
            x-model="form.role"
            class="w-full px-3 py-2 bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 rounded-md text-[13px] text-ink-100 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors"
          >
            <option value="member">Member — can use the fleet</option>
            <option value="admin">Admin — can invite + manage members</option>
            <option value="guest">Guest — read-only</option>
            {% if member_role in ('owner', 'server-admin') %}
            <option value="owner">Owner — full control, can demote you</option>
            {% endif %}
          </select>
        </div>

        <div class="border-t border-white/[0.06] pt-3">
          <button
            type="button"
            @click="showAdvanced = !showAdvanced"
            class="inline-flex items-center gap-1 text-[11px] text-ink-500 hover:text-ink-300"
            :aria-expanded="showAdvanced.toString()"
          >
            <i data-lucide="chevron-down" class="w-3 h-3 transition-transform" :class="showAdvanced ? 'rotate-180' : ''"></i>
            <span x-text="showAdvanced ? 'Hide advanced' : 'Advanced (display name, expiry)'"></span>
          </button>
          <div x-show="showAdvanced" x-cloak class="space-y-4 mt-3">
            {{ input("display_name", label="Display name (optional)", placeholder="Alice") }}
            <div class="space-y-1.5">
              <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500">URL expires in</label>
              <select
                id="ttl"
                x-model="form.ttl"
                class="w-full px-3 py-2 bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 rounded-md text-[13px] text-ink-100 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors"
              >
                <option value="86400">1 day</option>
                <option value="259200">3 days</option>
                <option value="604800" selected>7 days (recommended)</option>
                <option value="2592000">30 days (maximum)</option>
              </select>
              <p class="text-[12px] text-ink-500">After this, the URL stops working. You can always create another.</p>
            </div>
          </div>
        </div>

        <div class="flex justify-end gap-3 pt-2">
          <button
            type="button"
            @click="closeCreate()"
            class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100"
          >Cancel</button>
          <button
            type="submit"
            :disabled="loading"
            class="px-3 py-1.5 bg-white hover:bg-ink-100 text-black text-[13px] font-medium rounded-md disabled:opacity-50"
          >
            <span x-text="loading ? 'Creating…' : 'Create invitation'"></span>
          </button>
        </div>
      </form>
    </div>
  </div>
  </template>

  <!-- Success modal — URL shown EXACTLY ONCE, auto-copied to clipboard -->
  <template x-teleport="body">
  <div
    x-show="showSuccess"
    x-cloak
    class="fixed inset-0 z-50 flex items-center justify-center p-4"
  >
    <div class="absolute inset-0 bg-black/60" @click="closeSuccess()"></div>
    <div class="relative w-full max-w-lg rounded-lg border border-cmdop-500/30 bg-ink-950 p-6 shadow-2xl">
      <div class="flex items-center gap-3 mb-3">
        <div
          class="w-9 h-9 rounded-md border border-white/[0.06] flex items-center justify-center transition-colors"
          :class="autoCopied ? 'bg-emerald-500/[0.08]' : 'bg-white/[0.04]'"
        >
          <i
            x-show="autoCopied"
            data-lucide="check"
            class="w-4 h-4 text-emerald-300"
          ></i>
          <i
            x-show="!autoCopied"
            data-lucide="copy"
            class="w-4 h-4 text-cmdop-400"
          ></i>
        </div>
        <div>
          <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight">
            <span x-show="autoCopied">URL copied to clipboard</span>
            <span x-show="!autoCopied">Invitation ready</span>
          </h3>
          <p class="text-[11px] text-ink-500">For <span class="text-ink-200" x-text="success.email"></span> &middot; expires <span x-text="success.expiresRelative"></span></p>
        </div>
      </div>

      <p class="text-[13px] text-ink-400 mb-3">
        Paste this URL into your message to
        <span class="text-ink-200" x-text="success.email"></span>.
        <span class="text-amber-300 font-medium">You won't see it again</span> — re-open this page after sending if you need to revoke or re-create.
      </p>

      <div
        class="bg-black border border-white/[0.08] rounded-md p-3 mb-3 font-mono text-[12px] text-ink-200 break-all select-all cursor-pointer hover:border-white/[0.16] transition-colors"
        x-text="success.url"
        @click="copyManual()"
        title="Click to copy"
      ></div>

      <div class="flex items-center justify-between text-[12px]">
        <a
          :href="success.url"
          target="_blank"
          rel="noopener"
          class="text-ink-500 hover:text-ink-300 inline-flex items-center gap-1"
        >
          <i data-lucide="external-link" class="w-3 h-3"></i>
          Preview accept page
        </a>
        <div class="flex gap-3">
          <button
            @click="copyManual()"
            class="px-3 py-1 text-[12px] border border-white/[0.08] hover:border-white/[0.16] text-ink-200 rounded-md inline-flex items-center gap-1.5 transition-colors"
          >
            <i data-lucide="copy" class="w-3 h-3"></i>
            <span x-text="manualCopyLabel"></span>
          </button>
          <button
            @click="closeSuccess()"
            class="px-3 py-1 text-[12px] bg-white hover:bg-ink-100 text-black rounded-md font-medium"
          >Done</button>
        </div>
      </div>
    </div>
  </div>
  </template>

  <!-- Revoke confirmation modal (replaces browser confirm) -->
  <template x-teleport="body">
  <div
    x-show="showRevoke"
    x-cloak
    class="fixed inset-0 z-50 flex items-center justify-center p-4"
  >
    <div class="absolute inset-0 bg-black/60" @click="closeRevoke()"></div>
    <div class="relative w-full max-w-md rounded-lg border border-white/[0.08] bg-ink-950 p-6 shadow-2xl">
      <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>
    </div>
  </div>
  </template>

  <!-- Pending invites -->
  {% call card() %}
  <div class="flex items-center justify-between mb-3">
    <h2 class="text-[11px] uppercase tracking-wider font-semibold text-ink-500">Pending</h2>
    <span class="text-[11px] text-ink-500 font-mono" id="pending-count"></span>
  </div>
  <div class="overflow-x-auto">
    <table class="w-full text-[13px] text-left">
      <thead class="text-[11px] text-ink-500 uppercase tracking-wider">
        <tr class="border-b border-white/[0.06]">
          <th class="px-4 py-3 font-medium">Invitee</th>
          <th class="px-4 py-3 font-medium">Role</th>
          <th class="px-4 py-3 font-medium">Created</th>
          <th class="px-4 py-3 font-medium">Expires</th>
          <th class="px-4 py-3 font-medium 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 %}

  <!-- Recently joined (closes the loop) -->
  <div id="recent-section" class="hidden">
    {% call card() %}
    <div class="flex items-center justify-between mb-3">
      <h2 class="text-[11px] uppercase tracking-wider font-semibold text-ink-500">Recently joined</h2>
      <span class="text-[11px] text-ink-500 uppercase tracking-wider">last 7 days</span>
    </div>
    <ul id="recent-list" class="space-y-2"></ul>
    {% endcall %}
  </div>
</div>

<script>
const FLEET_ID = '{{ fleet.id }}';
const MY_ROLE = '{{ member_role }}';
const CAN_MANAGE = ['owner', 'admin', 'server-admin'].includes(MY_ROLE);
const HERO_DISMISSED_KEY = 'cmdop.invites.hero.dismissed';

function invitesPage() {
  return {
    showCreate: false,
    showSuccess: false,
    showRevoke: false,
    showHero: false,
    // Plan 61/2b-W4 — progressive disclosure toggles.
    showHeroDetails: false,
    showAdvanced: false,
    loading: false,
    revokeLoading: false,
    autoCopied: false,
    manualCopyLabel: 'Copy',
    success: { url: '', email: '', expiresRelative: '' },
    revokeTarget: { id: '', email: '' },
    form: { email: '', display_name: '', role: 'member', ttl: '604800' },

    init() {
      this.showHero = !localStorage.getItem(HERO_DISMISSED_KEY);
    },
    dismissHero() {
      this.showHero = false;
      localStorage.setItem(HERO_DISMISSED_KEY, '1');
    },

    openCreate() {
      this.form.email = '';
      this.form.display_name = '';
      this.form.role = 'member';
      this.form.ttl = '604800';
      this.showAdvanced = false;
      this.showCreate = true;
      this.$nextTick(() => {
        if (window.lucide) window.lucide.createIcons();
        document.getElementById('email')?.focus();
      });
    },
    closeCreate() { this.showCreate = false; },

    closeSuccess() {
      this.showSuccess = false;
      this.autoCopied = false;
      this.manualCopyLabel = 'Copy';
      this.success = { url: '', email: '', expiresRelative: '' };
      loadAll();
    },

    askRevoke(id, email) {
      this.revokeTarget = { id, email };
      this.showRevoke = true;
    },
    closeRevoke() { this.showRevoke = false; this.revokeLoading = false; },

    closeAll() {
      if (this.showRevoke) return this.closeRevoke();
      if (this.showSuccess) return this.closeSuccess();
      if (this.showCreate) return this.closeCreate();
    },

    async createInvite() {
      this.loading = true;
      const body = {
        email: this.form.email,
        fleet_id: FLEET_ID,
        role: this.form.role,
        display_name: this.form.display_name,
        expires_in_seconds: parseInt(this.form.ttl, 10),
      };
      try {
        const res = await fetch('/api/admin/invites', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(body),
        });
        if (!res.ok) {
          const data = await res.json().catch(() => ({}));
          toast(data.detail || 'Failed to create invitation', 'error');
          return;
        }
        const data = await res.json();
        this.success = {
          url: data.invite_url,
          email: body.email,
          expiresRelative: formatRelative(new Date(data.expires_at)),
        };
        this.showCreate = false;
        this.showSuccess = true;
        // Auto-copy on open so the admin's first instinct (paste to chat) just works.
        this.$nextTick(async () => {
          try {
            await navigator.clipboard.writeText(this.success.url);
            this.autoCopied = true;
            this.manualCopyLabel = 'Copied ✓';
          } catch (e) {
            this.autoCopied = false;
            this.manualCopyLabel = 'Copy';
          }
          if (window.lucide) window.lucide.createIcons();
        });
      } finally {
        this.loading = false;
      }
    },

    async copyManual() {
      try {
        await navigator.clipboard.writeText(this.success.url);
        this.manualCopyLabel = 'Copied ✓';
        this.autoCopied = true;
        setTimeout(() => { this.manualCopyLabel = 'Copy'; }, 1800);
      } catch (e) {
        toast('Couldn\'t access clipboard — select the URL manually', 'error');
      }
    },

    async confirmRevoke() {
      this.revokeLoading = true;
      const res = await fetch(
        `/api/admin/invites/${this.revokeTarget.id}?fleet_id=${FLEET_ID}`,
        { method: 'DELETE' }
      );
      this.revokeLoading = false;
      if (res.ok || res.status === 204) {
        toast(`Invitation for ${this.revokeTarget.email} revoked`, 'success');
        this.closeRevoke();
        loadAll();
      } else {
        const data = await res.json().catch(() => ({}));
        toast(data.detail || 'Failed to revoke', 'error');
      }
    },
  };
}

function formatRelative(date) {
  const ms = date - new Date();
  const abs = Math.abs(ms);
  const days = Math.floor(abs / 86400000);
  const hours = Math.floor(abs / 3600000);
  const mins = Math.floor(abs / 60000);
  let label;
  if (days >= 1) label = `${days}d`;
  else if (hours >= 1) label = `${hours}h`;
  else if (mins >= 1) label = `${mins}m`;
  else label = 'just now';
  return ms >= 0 ? `in ${label}` : `${label} ago`;
}

function badgeFor(role) {
  const variants = { owner: 'blue', admin: 'green', member: 'default', guest: 'yellow' };
  const colors = {
    default: 'border-white/[0.08] text-ink-300',
    green:   'border-emerald-500/30 text-emerald-300',
    blue:    'border-cmdop-500/30 text-cmdop-300',
    yellow:  'border-amber-500/30 text-amber-300',
  };
  const v = variants[role] || 'default';
  return `<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium border ${colors[v]}">${role}</span>`;
}

function escapeHtml(s) {
  if (s == null) return '';
  return String(s)
    .replaceAll('&', '&amp;')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
    .replaceAll("'", '&#39;');
}

async function loadPending() {
  const tbody = document.getElementById('invites-table');
  tbody.innerHTML = `<tr><td colspan="5" class="px-4 py-8 text-center text-ink-500">
    <i data-lucide="loader-2" class="w-4 h-4 inline-block animate-spin mr-1.5"></i>Loading…</td></tr>`;
  if (window.lucide) window.lucide.createIcons();

  let res;
  try {
    res = await fetch(`/api/admin/invites?fleet_id=${FLEET_ID}`);
  } catch (e) {
    tbody.innerHTML = `<tr><td colspan="5" class="px-4 py-8 text-center">
      <i data-lucide="alert-triangle" class="w-6 h-6 mx-auto text-red-400 mb-2"></i>
      <p class="text-[13px] text-ink-200">Couldn't load invitations.</p>
      <p class="text-[12px] text-ink-500 mt-1">${escapeHtml(e.message || 'Network error')}</p>
    </td></tr>`;
    if (window.lucide) window.lucide.createIcons();
    return;
  }
  if (!res.ok) {
    tbody.innerHTML = `<tr><td colspan="5" class="px-4 py-8 text-center">
      <i data-lucide="alert-triangle" class="w-6 h-6 mx-auto text-red-400 mb-2"></i>
      <p class="text-[13px] text-ink-200">Couldn't load invitations.</p>
      <p class="text-[12px] text-ink-500 mt-1">Server returned ${res.status}. Try refreshing.</p>
    </td></tr>`;
    if (window.lucide) window.lucide.createIcons();
    return;
  }
  // Plan 60 Phase 1.5 — endpoint now returns OffsetPage envelope.
  const envelope = await res.json();
  const data = (envelope && envelope.items) || [];
  document.getElementById('pending-count').textContent =
    data.length === 0 ? '' : `${data.length} pending`;

  if (data.length === 0) {
    tbody.innerHTML = `<tr><td colspan="5" class="px-4 py-12 text-center">
      <i data-lucide="inbox" class="w-10 h-10 mx-auto text-ink-600 mb-3"></i>
      <p class="text-[13px] text-ink-300">Nothing pending</p>
      <p class="text-[11px] text-ink-500 mt-1">Click <b class="text-ink-200">+ Create invitation</b> to mint a URL.</p>
    </td></tr>`;
  } else {
    tbody.innerHTML = data.map(inv => {
      const created = formatRelative(new Date(inv.created_at));
      const expires = formatRelative(new Date(inv.expires_at));
      const createdBy = inv.created_by_email
        ? `<span class="text-[11px] text-ink-500 font-mono" title="Created by ${escapeHtml(inv.created_by_email)}">by ${escapeHtml(inv.created_by_email)}</span>`
        : '';
      const namePart = inv.display_name
        ? `<p class="font-medium text-ink-100 truncate max-w-[260px]" title="${escapeHtml(inv.display_name)}">${escapeHtml(inv.display_name)}</p><p class="text-[11px] text-ink-500 font-mono truncate max-w-[260px]" title="${escapeHtml(inv.email)}">${escapeHtml(inv.email)}</p>`
        : `<p class="font-medium text-ink-100 truncate max-w-[260px] font-mono" title="${escapeHtml(inv.email)}">${escapeHtml(inv.email)}</p>`;
      const handler = CAN_MANAGE
        ? `<button onclick="askRevokeFrom('${inv.invite_id}', ${JSON.stringify(inv.email)})" class="text-[12px] text-red-400 hover:text-red-300 focus:outline-none focus:ring-2 focus:ring-red-500/40 rounded px-1.5 py-0.5" aria-label="Revoke invitation for ${escapeHtml(inv.email)}">Revoke</button>`
        : '<span class="text-[12px] text-ink-600">—</span>';
      return `<tr class="hover:bg-white/[0.02] transition-colors">
        <td class="px-4 py-3">${namePart}</td>
        <td class="px-4 py-3">${badgeFor(inv.role)}</td>
        <td class="px-4 py-3"><div class="text-ink-300 font-mono text-[12px]">${created}</div>${createdBy}</td>
        <td class="px-4 py-3 text-ink-400 font-mono text-[12px]">${expires}</td>
        <td class="px-4 py-3 text-right">${handler}</td>
      </tr>`;
    }).join('');
  }
  if (window.lucide) window.lucide.createIcons();
}

async function loadRecent() {
  const res = await fetch(`/api/admin/invites/recent?fleet_id=${FLEET_ID}`);
  if (!res.ok) return;
  const data = await res.json();
  const section = document.getElementById('recent-section');
  const list = document.getElementById('recent-list');
  if (data.length === 0) { section.classList.add('hidden'); return; }
  section.classList.remove('hidden');
  list.innerHTML = data.map(r => {
    const when = formatRelative(new Date(r.accepted_at));
    const who = r.display_name
      ? `<span class="text-ink-100 font-medium">${escapeHtml(r.display_name)}</span> <span class="text-ink-500 font-mono text-[12px]">(${escapeHtml(r.email)})</span>`
      : `<span class="text-ink-100 font-medium">${escapeHtml(r.email)}</span>`;
    return `<li class="flex items-center justify-between text-[13px]">
      <div class="flex items-center gap-3">
        <div class="w-7 h-7 rounded-full bg-emerald-500/[0.08] border border-emerald-500/30 flex items-center justify-center">
          <i data-lucide="check" class="w-3.5 h-3.5 text-emerald-300"></i>
        </div>
        <div>
          <div>${who} joined as ${badgeFor(r.role)}</div>
        </div>
      </div>
      <span class="text-[11px] text-ink-500 font-mono">${when}</span>
    </li>`;
  }).join('');
  if (window.lucide) window.lucide.createIcons();
}

function loadAll() {
  loadPending();
  loadRecent();
}

// Bridge from inline table button to the Alpine instance.
function askRevokeFrom(id, email) {
  const root = document.querySelector('[x-data]');
  if (!root || !root._x_dataStack) return;
  root._x_dataStack[0].askRevoke(id, email);
}

document.addEventListener('DOMContentLoaded', loadAll);
</script>
{% endblock %}