{# Plan 39 + 40 Phase 3/4 + 43 Phase 4 — authorized users table.
   Each row gets History (Plan 43 drill-down), Revoke/Restore
   (Plan 40 Phase 4). State badge shows revoked > stale > active.
   Plan 58 — relative timestamps + absolute tooltips, channel badge,
   truncated external IDs with full-value tooltip, friendlier empty
   + error states (`usersError` flag on the page component). #}
{% from 'admin/components/ui.html' import card %}
{% call card(title="Authorized users") %}
<template x-if="users === null && !usersError">
  <div class="px-4 py-6 text-[13px] text-ink-500 flex items-center gap-2">
    <i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i>
    Loading authorized users…
  </div>
</template>
<template x-if="usersError">
  <div class="px-4 py-6 text-[13px] text-amber-300 flex items-start gap-2">
    <i data-lucide="alert-triangle" class="w-3.5 h-3.5 mt-0.5 flex-shrink-0"></i>
    <div>
      Couldn't load the authorized users list.
      <button @click="load()" class="underline hover:text-amber-200 ml-1 cursor-pointer">Retry</button>
    </div>
  </div>
</template>
<template x-if="users && !usersError && users.length === 0">
  <div class="px-4 py-4 flex items-center gap-2.5 text-[12px] text-ink-500">
    <i data-lucide="user-plus" class="w-4 h-4 text-ink-600 shrink-0"></i>
    <span>No authorized bot users yet — they appear here after running
      <code class="font-mono text-cmdop-300">/auth &lt;password&gt;</code> in a channel.</span>
  </div>
</template>
<div x-show="users && !usersError && users.length > 0" x-cloak class="overflow-x-auto">
  <table class="w-full text-[13px] text-left">
    <thead class="text-[11px] text-ink-500 uppercase tracking-wider border-b border-white/[0.06] sticky top-0 bg-ink-950 z-10">
      <tr>
        <th class="px-4 py-3 font-medium">Channel</th>
        <th class="px-4 py-3 font-medium">External ID</th>
        <th class="px-4 py-3 font-medium">Note</th>
        <th class="px-4 py-3 font-medium">Authorized</th>
        <th class="px-4 py-3 font-medium">Last seen</th>
        <th class="px-4 py-3 font-medium">Gen</th>
        <th class="px-4 py-3 font-medium">State</th>
        <th class="px-4 py-3 font-medium text-right">Actions</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-white/[0.06]">
      <template x-for="u in users" :key="u.id">
        <tr class="hover:bg-white/[0.02]">
          <td class="px-4 py-3">
            <span class="text-[11px] px-2 py-0.5 rounded font-mono border border-cmdop-500/30 text-cmdop-300"
                  x-text="u.channel_kind"></span>
          </td>
          <td class="px-4 py-3 font-mono text-ink-200 text-[12px] max-w-[180px] truncate"
              :title="u.external_user_id" x-text="u.external_user_id"></td>
          <td class="px-4 py-3 text-ink-400 max-w-[160px] truncate"
              :title="u.note || ''" x-text="u.note || '—'"></td>
          <td class="px-4 py-3 text-ink-400 text-[12px] font-mono"
              :title="formatTs(u.authorized_at)" x-text="formatRelative(u.authorized_at)"></td>
          <td class="px-4 py-3 text-ink-400 text-[12px] font-mono"
              :title="formatTs(u.last_seen_at)" x-text="formatRelative(u.last_seen_at)"></td>
          <td class="px-4 py-3 font-mono text-[12px]"
              :class="u.is_stale ? 'text-amber-300' : 'text-ink-300'"
              :title="u.is_stale ? 'Stale — user signed in with an older password generation' : 'Current password generation'"
              x-text="u.password_generation"></td>
          <td class="px-4 py-3">
            <template x-if="u.revoked_at">
              <span class="text-[11px] px-2 py-0.5 rounded border border-red-500/30 text-red-300">revoked</span>
            </template>
            <template x-if="!u.revoked_at && u.is_stale">
              <span class="text-[11px] px-2 py-0.5 rounded border border-amber-500/30 text-amber-300">stale</span>
            </template>
            <template x-if="!u.revoked_at && !u.is_stale">
              <span class="text-[11px] px-2 py-0.5 rounded border border-emerald-500/30 text-emerald-300">active</span>
            </template>
          </td>
          <td class="px-4 py-3 text-right space-x-1 whitespace-nowrap">
            <button
              @click="openConversation(u)"
              class="text-[12px] px-2 py-1 rounded border border-white/[0.08] hover:border-white/[0.16] text-ink-300 hover:text-ink-100 transition-colors cursor-pointer"
              title="View conversation history"
              aria-label="View conversation history"
            >
              History
            </button>
            <template x-if="!u.revoked_at">
              <button
                @click="revoke(u)"
                :disabled="busyId === u.id"
                class="text-[12px] px-2 py-1 rounded border border-red-500/30 hover:border-red-500/50 text-red-300 transition-colors disabled:opacity-40 cursor-pointer"
                title="Revoke bot access for this user"
                aria-label="Revoke access"
              >
                Revoke
              </button>
            </template>
            <template x-if="u.revoked_at">
              <button
                @click="restore(u)"
                :disabled="busyId === u.id"
                class="text-[12px] px-2 py-1 rounded border border-cmdop-500/30 hover:border-cmdop-500/50 text-cmdop-300 transition-colors disabled:opacity-40 cursor-pointer"
                title="Restore bot access for this user"
                aria-label="Restore access"
              >
                Restore
              </button>
            </template>
          </td>
        </tr>
      </template>
    </tbody>
  </table>
</div>
{% endcall %}