{{define "admin-sidebar-mobile"}}
<!-- Mobile tab bar (below lg) -->
<div class="flex gap-2 overflow-x-auto pb-2 lg:hidden mb-6" role="tablist" aria-label="Admin sections">
    <a id="tab-label-dashboard-mobile" href="/admin#dashboard"
       class="btn btn-sm btn-ghost admin-tab-mobile"
       role="tab"
       data-tab="dashboard"
       aria-controls="tab-dashboard"
       aria-selected="false"
       tabindex="-1">
        {{ icon "compass" "size-4" }} Dashboard
    </a>
    <a id="tab-label-crew-mobile" href="/admin#crew"
       class="btn btn-sm btn-ghost admin-tab-mobile"
       role="tab"
       data-tab="crew"
       aria-controls="tab-crew"
       aria-selected="false"
       tabindex="-1">
        {{ icon "anchor" "size-4" }} Crew
    </a>
    <a id="tab-label-settings-mobile" href="/admin#settings"
       class="btn btn-sm btn-ghost admin-tab-mobile"
       role="tab"
       data-tab="settings"
       aria-controls="tab-settings"
       aria-selected="false"
       tabindex="-1">
        {{ icon "settings" "size-4" }} Settings
    </a>
    <a id="tab-label-relays-mobile" href="/admin#relays"
       class="btn btn-sm btn-ghost admin-tab-mobile"
       role="tab"
       data-tab="relays"
       aria-controls="tab-relays"
       aria-selected="false"
       tabindex="-1">
        {{ icon "radio-tower" "size-4" }} Relays
    </a>
    <a id="tab-label-storage-mobile" href="/admin#storage"
       class="btn btn-sm btn-ghost admin-tab-mobile"
       role="tab"
       data-tab="storage"
       aria-controls="tab-storage"
       aria-selected="false"
       tabindex="-1">
        {{ icon "hard-drive" "size-4" }} Storage
    </a>
</div>
{{end}}

{{define "admin-sidebar"}}
<!-- Sidebar (lg and above) — pinned to left edge -->
<aside class="hidden lg:block w-64 shrink-0 sticky top-0 h-screen overflow-y-auto bg-base-200 pt-6 px-4"
       aria-label="Admin navigation">
    <ul class="menu menu-lg rounded-box w-full" role="tablist" aria-label="Admin sections">
        <li data-tab="dashboard"><a id="tab-label-dashboard" href="/admin#dashboard" role="tab" aria-controls="tab-dashboard" aria-selected="false" tabindex="-1">{{ icon "compass" "size-5" }} Dashboard</a></li>
        <li data-tab="crew"><a id="tab-label-crew" href="/admin#crew" role="tab" aria-controls="tab-crew" aria-selected="false" tabindex="-1">{{ icon "anchor" "size-5" }} Crew</a></li>
        <li data-tab="settings"><a id="tab-label-settings" href="/admin#settings" role="tab" aria-controls="tab-settings" aria-selected="false" tabindex="-1">{{ icon "settings" "size-5" }} Settings</a></li>
        <li data-tab="relays"><a id="tab-label-relays" href="/admin#relays" role="tab" aria-controls="tab-relays" aria-selected="false" tabindex="-1">{{ icon "radio-tower" "size-5" }} Relays</a></li>
        <li data-tab="storage"><a id="tab-label-storage" href="/admin#storage" role="tab" aria-controls="tab-storage" aria-selected="false" tabindex="-1">{{ icon "hard-drive" "size-5" }} Storage</a></li>
    </ul>
    <div class="mt-4 px-3 text-xs text-base-content/50">
        <p class="uppercase tracking-wide mb-1">Hold</p>
        <code class="font-mono break-all block" title="{{.HoldDID}}">{{.HoldDID}}</code>
    </div>
</aside>
{{end}}