<header class="admin-topbar sticky top-0 z-30 flex h-20 items-center border-b border-slate-800 bg-slate-950/90 px-4 backdrop-blur md:px-6 lg:px-8">
  <div class="admin-topbar-title">
    <button type="button" data-sidebar-open class="admin-menu-button lg:hidden" aria-label="Open menu">Menu</button>
    <div class="min-w-0">
      <div class="admin-topbar-kicker">Administration</div>
      <h1 class="truncate text-lg font-semibold text-white md:text-xl"><%= pageTitle %></h1>
    </div>
  </div>
  <div class="admin-topbar-actions">
    <div class="admin-theme-switch" role="group" aria-label="Theme">
      <button type="button" class="admin-theme-option" data-theme-choice="dark" aria-pressed="false">Dark</button>
      <button type="button" class="admin-theme-option" data-theme-choice="light" aria-pressed="false">Light</button>
    </div>
    <a href="<%= siteHomePath %>" class="admin-topbar-link hidden sm:inline-flex">View site</a>
    <div class="admin-admin-pill">
      <div class="admin-admin-avatar" aria-hidden="true"><%= String(currentAdmin.name || currentAdmin.email || 'A').trim().slice(0, 1).toUpperCase() %></div>
      <div class="min-w-0 text-right">
        <div class="max-w-48 truncate text-sm font-medium text-slate-200"><%= currentAdmin.name || currentAdmin.email || ('Admin #' + currentAdmin.id) %></div>
        <div class="text-xs text-sky-400">Administrator</div>
      </div>
    </div>
    <a href="<%= logoutPath %>" class="btn btn-danger-outline">Logout</a>
  </div>
</header>
