{{define "header-right-extra"}}
      <span class="text-xs px-2 py-0.5 bg-[#c9a84c]/20 text-[#c9a84c] rounded-full font-medium">Super Admin</span>
{{end}}

{{define "content"}}
    <div class="p-8 max-w-6xl">
      <h1 class="text-2xl font-bold text-white mb-2">Admin Dashboard</h1>
      <p class="text-[#b0bec5] text-sm mb-8">Platform overview and management.</p>

      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
        <div class="bg-[#0d1f3c] border border-white/[0.08] rounded-xl p-5">
          <div class="text-[#b0bec5] text-xs uppercase tracking-wider mb-1">Users</div>
          <div id="statUsers" class="text-3xl font-bold text-white">&mdash;</div>
        </div>
        <div class="bg-[#0d1f3c] border border-white/[0.08] rounded-xl p-5">
          <div class="text-[#b0bec5] text-xs uppercase tracking-wider mb-1">Projects</div>
          <div id="statProjects" class="text-3xl font-bold text-white">&mdash;</div>
        </div>
        <div class="bg-[#0d1f3c] border border-white/[0.08] rounded-xl p-5">
          <div class="text-[#b0bec5] text-xs uppercase tracking-wider mb-1">Organizations</div>
          <div id="statOrgs" class="text-3xl font-bold text-white">&mdash;</div>
        </div>
        <div class="bg-[#0d1f3c] border border-white/[0.08] rounded-xl p-5">
          <div class="text-[#b0bec5] text-xs uppercase tracking-wider mb-1">Active Sessions</div>
          <div id="statSessions" class="text-3xl font-bold text-white">&mdash;</div>
        </div>
      </div>

      <div class="bg-[#0d1f3c] border border-white/[0.08] rounded-xl p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-sm font-semibold text-white">All Users</h2>
        </div>
        <div id="userList" class="space-y-2"><div class="text-[#b0bec5] text-sm">Loading...</div></div>
      </div>
    </div>
{{end}}

{{define "scripts"}}
<script>
    if (!user.is_super_admin) window.location.href = '/app/tasks';

    async function loadStats() {
      try {
        const [usersRes, projectsRes, orgsRes] = await Promise.all([
          fetchAPI('/api/admin/users'), fetchAPI('/api/projects'), fetchAPI('/api/orgs')
        ]);
        const users = await usersRes.json();
        const projects = await projectsRes.json();
        const orgs = await orgsRes.json();
        document.getElementById('statUsers').textContent = Array.isArray(users) ? users.length : '?';
        document.getElementById('statProjects').textContent = Array.isArray(projects) ? projects.length : '?';
        document.getElementById('statOrgs').textContent = Array.isArray(orgs) ? orgs.length : '?';
        document.getElementById('statSessions').textContent = '\u2014';

        if (Array.isArray(users) && users.length > 0) {
          document.getElementById('userList').innerHTML = users.map(u => `
            <div class="flex items-center gap-4 px-4 py-3 rounded-lg bg-[#0a1628] border border-white/[0.05]">
              <div class="w-8 h-8 rounded-full bg-[#c9a84c]/20 flex items-center justify-center text-[#c9a84c] text-sm font-semibold">${(u.name||u.email||'?')[0].toUpperCase()}</div>
              <div class="flex-1">
                <div class="text-white text-sm font-medium">${escHtml(u.name || u.email)}</div>
                ${u.name ? `<div class="text-[#8899a6] text-xs">${escHtml(u.email)}</div>` : ''}
              </div>
              ${u.is_super_admin ? '<span class="text-xs px-2 py-0.5 bg-[#c9a84c]/20 text-[#c9a84c] rounded-full">super admin</span>' : ''}
              <span class="text-xs text-[#8899a6]">${new Date(u.created_at).toLocaleDateString()}</span>
            </div>`).join('');
        } else {
          document.getElementById('userList').innerHTML = '<div class="text-[#b0bec5] text-sm">No users found.</div>';
        }
      } catch(e) {}
    }
    loadStats();
</script>
{{end}}
