{{define "header"}}
<header>
  <span class="logo"><span>Mad</span>share</span>
  <nav class="main-nav" aria-label="Site navigation">
    {{/* "Library" is a section: it stays active across its subtabs (Music,
         Playlists, …), which live in the in-page subtab bar (library-subnav).
         data-section lets the shell router keep it active after a client-side
         swap (shell.js setActiveNav). */}}
    <a href="/" data-section="library" class="nav-link{{if eq .Section "library"}} nav-link--active{{end}}"{{if eq .Section "library"}} aria-current="page"{{end}}>Library</a>
    {{/* Privileged links are rendered server-side only for principals that hold the
         permission, so an anonymous/low-priv visitor never sees a flash of links
         they can't use (the API enforces the same gates). Login/logout reload the
         page, so the server re-renders these on every auth change. */}}
    {{if .CanUpload}}<a href="/upload" class="nav-link{{if eq .Page "upload"}} nav-link--active{{end}}"{{if eq .Page "upload"}} aria-current="page"{{end}}>Upload</a>{{end}}
    {{/* Admin opens in the SAME tab (owner decision 2026-06-10, reversing the
         Phase-1 new-tab default). Admin pages are outside the shell, so this
         is a full page load — playback in this tab stops on entry. The shell
         router handles it via its non-shell-page fallback (location.assign). */}}
    {{if .CanAdmin}}<a href="/admin" class="nav-link{{if eq .Page "admin"}} nav-link--active{{end}}"{{if eq .Page "admin"}} aria-current="page"{{end}}>Admin</a>{{end}}
    {{/* About: a mini-menu gathering the project links (GitRepo, the AGPL §13
         Source archive, the License) plus a Version entry that opens the About
         modal. Wired by about-menu.js (initAboutMenu), loaded on both the shell
         pages and the admin pages. */}}
    <div class="about" id="about">
      <button type="button" class="nav-link about__btn" id="aboutBtn"
              aria-haspopup="true" aria-expanded="false" aria-controls="aboutMenu">
        About <span class="about__caret" aria-hidden="true">&#9662;</span>
      </button>
      <div class="about__menu" id="aboutMenu" role="menu" aria-labelledby="aboutBtn" hidden>
        {{if .GitRepo}}<a href="{{.GitRepo}}" class="about__item" role="menuitem" target="_blank" rel="noopener">GitRepo</a>{{end}}
        <a href="/source" class="about__item" role="menuitem" download>Source</a>
        <a href="/license" class="about__item" role="menuitem" target="_blank" rel="license">License</a>
        <button type="button" class="about__item about__version" id="aboutVersion" role="menuitem">Version</button>
      </div>
    </div>
  </nav>
  <div id="header-insert">{{template "header-insert" .}}</div>
  <div class="header-actions">
    {{/* Signed-in user area: username · Sign out. The username itself is the link
         to the Settings page (/settings, docs/ui/user-settings.md) — styled as a
         .nav-link like the left-side Library/Upload tabs, only on the right. The
         voluntary change-password control and the theme switcher live on that
         page; the forced first-run password change still uses #passModal below.
         It's a plain <a> so the shell router treats it as in-shell navigation;
         its text is filled in by auth.js. */}}
    {{/* Both controls always exist (auth.js toggles them on a session edge), but
         the server sets the correct initial state so there's no FOUC: a signed-in
         load paints the username + Log out straight away, never "Sign in" first. */}}
    <div class="user-area" id="userArea"{{if not .SignedIn}} hidden{{end}}>
      <a href="/settings" class="nav-link{{if eq .Page "settings"}} nav-link--active{{end}}"{{if eq .Page "settings"}} aria-current="page"{{end}} id="userName" title="Settings">{{.Username}}</a>
      <button class="btn btn-neutral" id="logoutBtn">Log out</button>
    </div>
    <button class="btn btn-neutral" id="signInBtn"{{if .SignedIn}} hidden{{end}}>Sign in</button>
    {{template "header-actions-extra" .}}
  </div>
</header>

{{/* About modal — opened from the About menu's Version entry (about-menu.js).
     Lives in the header partial so it ships on every page that has the header,
     with no per-page include. Version/Commit come from internal/version; an
     em-dash shows when the value was unknown at build time. */}}
<div class="modal-backdrop hidden" id="aboutModal" role="dialog" aria-modal="true" aria-labelledby="aboutTitle">
  <div class="modal modal--about">
    <div class="modal-header">
      <h2 id="aboutTitle">About</h2>
      <button class="btn-close" id="aboutClose" aria-label="Close">&times;</button>
    </div>
    <div class="about-card">
      <p class="about-name"><span>Mad</span>share</p>
      <dl class="about-meta">
        <dt>Version</dt><dd>{{if .Version}}{{.Version}}{{else}}&mdash;{{end}}</dd>
        <dt>Commit</dt><dd class="about-commit">{{if .Commit}}{{.Commit}}{{else}}&mdash;{{end}}</dd>
        <dt>Author</dt><dd>Kian Eugen Seibel</dd>
      </dl>
    </div>
  </div>
</div>
{{end}}

{{define "auth-modals"}}
<div class="modal-backdrop hidden" id="loginModal" role="dialog" aria-modal="true" aria-labelledby="loginTitle">
  <div class="modal">
    <div class="modal-header">
      <h2 id="loginTitle">Sign in</h2>
      <button class="btn-close" id="loginClose" aria-label="Close">&times;</button>
    </div>
    <form class="login-form" id="loginForm">
      <label for="loginUser">Username</label>
      <input type="text" id="loginUser" autocomplete="username" required>
      <label for="loginPass">Password</label>
      <input type="password" id="loginPass" autocomplete="current-password" required>
      <p class="login-error" id="loginError" role="alert" hidden></p>
      <div class="modal-actions">
        <button type="button" class="btn btn-neutral" id="loginCancel">Cancel</button>
        <button type="submit" class="btn btn-neutral" id="loginSubmit">Sign in</button>
      </div>
    </form>
  </div>
</div>

<div class="modal-backdrop hidden" id="passModal" role="dialog" aria-modal="true" aria-labelledby="passTitle">
  <div class="modal">
    <div class="modal-header">
      <h2 id="passTitle">Change password</h2>
      <button class="btn-close" id="passClose" aria-label="Close">&times;</button>
    </div>
    <p class="modal-body" id="passForced" hidden>
      Your password was set during first-run setup. Choose a new one to continue.
    </p>
    <form class="login-form" id="passForm">
      <label for="oldPass">Current password</label>
      <input type="password" id="oldPass" autocomplete="current-password" required>
      <label for="newPass">New password</label>
      <input type="password" id="newPass" autocomplete="new-password" minlength="8" required>
      <label for="confirmPass">Confirm new password</label>
      <input type="password" id="confirmPass" autocomplete="new-password" minlength="8" required>
      <p class="login-error" id="passError" role="alert" hidden></p>
      <div class="modal-actions">
        <button type="button" class="btn btn-neutral" id="passCancel">Cancel</button>
        <button type="submit" class="btn btn-neutral" id="passSubmit">Change password</button>
      </div>
    </form>
  </div>
</div>

<div class="toast-stack" id="toastStatus" role="status" aria-live="polite"></div>
<div class="toast-stack" id="toastAlert"  role="alert"  aria-live="assertive"></div>
{{end}}

{{define "header-insert"}}{{end}}
{{define "header-actions-extra"}}{{end}}

{{/* The listening section's subtab bar (shared .subtabs / .subtab component).
     Music (the artist/album browse at "/") and Playlists today; Most played /
     Recently added / Podcasts can be added as more <a class="subtab"> entries +
     their routes. Rendered at the top of <main> on each library subtab page, so
     the shell swaps it with the page and the server-rendered active state (.Page)
     stays correct after a client-side navigation. */}}
{{define "library-subnav"}}
<nav class="subtabs" aria-label="Library sections">
  <a href="/" class="subtab{{if eq .Page "library"}} is-active{{end}}"{{if eq .Page "library"}} aria-current="page"{{end}}>Music</a>
  {{if .CanPlaylists}}<a href="/playlists" class="subtab{{if eq .Page "playlists"}} is-active{{end}}"{{if eq .Page "playlists"}} aria-current="page"{{end}}>Playlists</a>{{end}}
</nav>
{{end}}

{{/* player-bar: the shared audio player markup driven by player.js. Include it
     on any page that wants playback, then create the player in JS. Carries its
     own <audio> element. Pages including this must load /static/css/player.css. */}}
{{define "player-bar"}}
<div id="player-bar" class="hidden" aria-label="Now playing">
  <div class="progress-wrap" id="progressBar" role="slider"
       aria-label="Playback position" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
       tabindex="0">
    <div class="progress-fill" id="progressFill"></div>
  </div>
  <div class="player-main">
    <div class="player-track">
      <div class="player-title"  id="playerTitle">&mdash;</div>
      <div class="player-artist" id="playerArtist"></div>
    </div>

    <div class="player-controls">
      <button class="ctrl-btn" id="btnShuffle" aria-label="Shuffle off" title="Shuffle off">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M10.59 9.17 5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/>
        </svg>
      </button>
      <button class="ctrl-btn" id="btnPrev" aria-label="Previous" title="Previous">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M6 6h2v12H6zm3.5 6 8.5 6V6z"/>
        </svg>
      </button>
      <button class="ctrl-btn primary" id="btnPlay" aria-label="Play" title="Play">
        <svg id="iconPlay"  width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
        <svg id="iconPause" width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="display:none"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
      </button>
      <button class="ctrl-btn" id="btnNext" aria-label="Next" title="Next">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
        </svg>
      </button>
      <button class="ctrl-btn" id="btnRepeat" aria-label="Repeat off" title="Repeat off">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/>
        </svg>
        <span class="repeat-one" id="repeatOneBadge" aria-hidden="true" style="display:none">1</span>
      </button>
    </div>

    <div class="player-right">
      {{if ne .Page "admin"}}
      <button class="ctrl-btn" id="btnLike" aria-label="Add to Favorites" title="Add to Favorites"
              aria-pressed="false" disabled>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
        </svg>
      </button>
      <button class="ctrl-btn" id="btnQueue" aria-label="Show queue" title="Queue"
              aria-expanded="false" aria-controls="queue-panel">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M3 10h11v2H3zm0-4h11v2H3zm0 8h7v2H3zm13-1v8l6-4z"/>
        </svg>
      </button>
      {{end}}
      <span class="player-time" id="playerTime" aria-live="off">0:00 / 0:00</span>
      {{/* Audio-quality (rendition) selector — recordings P4. Hidden until the
           current track's recording has more than one rendition; player.js
           populates it and swaps the source in place. */}}
      <select class="quality-select hidden" id="qualitySelect" aria-label="Audio quality"></select>
      <div class="player-volume">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
        </svg>
        <input type="range" id="volume-slider" min="0" max="1" step="0.02" value="1" aria-label="Volume">
      </div>
    </div>
  </div>
</div>
{{if ne .Page "admin"}}
{{/* queue-panel: the current queue as an editable list (Phase 5 step 2 of
     docs/ui/player-and-queue.md). Shell chrome — lives outside <main>, wired by
     queue-panel.js via shell.js, survives page swaps like the player bar. */}}
<div id="queue-panel" class="hidden" role="region" aria-label="Play queue">
  <div class="queue-head">
    <span class="queue-title">Queue <span class="queue-count" id="queueCount"></span></span>
    <div class="queue-actions">
      <button class="btn btn-neutral queue-btn-sm" id="queueRestoreBtn" hidden
              title="Restore the queue that was replaced">&#8634; Restore</button>
      <button class="btn btn-neutral queue-btn-sm" id="queueSaveBtn">Save as playlist&hellip;</button>
      <button class="btn btn-neutral queue-btn-sm" id="queueClearBtn">Clear</button>
      <button class="btn-close" id="queueCloseBtn" aria-label="Close queue">&times;</button>
    </div>
  </div>
  <form class="queue-save-form" id="queueSaveForm" hidden>
    <input type="text" id="queueSaveName" placeholder="Playlist name" maxlength="200" required
           aria-label="Playlist name">
    <button type="submit" class="btn btn-neutral queue-btn-sm">Save</button>
    <button type="button" class="btn btn-neutral queue-btn-sm" id="queueSaveCancel">Cancel</button>
  </form>
  <div class="queue-list" id="queueList" role="list" aria-label="Queued tracks"></div>
</div>
{{end}}
<audio id="audio" preload="auto"></audio>
{{end}}

{{/* admin-shell: the chrome shown above <main> on every admin sub-page — the
     persistent admin banner plus the secondary section nav. Active state comes
     from .SubPage ("" = Overview, "library", "users", "prune", "settings").
     Pages render their own <main> after this. */}}
{{define "admin-shell"}}
<div class="admin-banner" role="region" aria-label="Admin mode">
  <span class="admin-banner-icon" aria-hidden="true">&#x1F6E1;</span>
  <span>Admin &mdash; changes here affect the live library.</span>
</div>

<nav class="admin-nav" aria-label="Admin sections">
  <a href="/admin"          class="admin-nav-link{{if eq .SubPage ""}} admin-nav-link--active{{end}}"{{if eq .SubPage ""}} aria-current="page"{{end}}>Overview</a>
  <a href="/admin/library"  class="admin-nav-link{{if eq .SubPage "library"}} admin-nav-link--active{{end}}"{{if eq .SubPage "library"}} aria-current="page"{{end}}>Library</a>
  <a href="/admin/upload"   class="admin-nav-link{{if eq .SubPage "upload"}} admin-nav-link--active{{end}}"{{if eq .SubPage "upload"}} aria-current="page"{{end}}>Upload</a>
  <a href="/admin/users"    class="admin-nav-link{{if eq .SubPage "users"}} admin-nav-link--active{{end}}"{{if eq .SubPage "users"}} aria-current="page"{{end}}>Users</a>
  <a href="/admin/prune"    class="admin-nav-link{{if eq .SubPage "prune"}} admin-nav-link--active{{end}}"{{if eq .SubPage "prune"}} aria-current="page"{{end}}>Prune</a>
  <a href="/admin/duplicates" class="admin-nav-link{{if eq .SubPage "duplicates"}} admin-nav-link--active{{end}}"{{if eq .SubPage "duplicates"}} aria-current="page"{{end}}>Duplicates</a>
  <a href="/admin/settings" class="admin-nav-link{{if eq .SubPage "settings"}} admin-nav-link--active{{end}}"{{if eq .SubPage "settings"}} aria-current="page"{{end}}>Settings</a>
</nav>
{{end}}

{{/* upload-main: the upload page body (drop-zone, worker bar, queue,
     Advanced, and the "My uploads" staging pane). Shared verbatim by the
     listening-shell page (/upload, html/upload.html) and the admin-shell
     page (/admin/upload, html/admin/upload.html); each wraps it in its own
     <main class="upload-main">. See docs/ui/shells.md. */}}
{{define "upload-main"}}

  <!-- Visually-hidden status region: announces queue progress and backoff. -->
  <div class="visually-hidden" id="srStatus" aria-live="polite" role="status"></div>

  <!-- Visible toasts render into the shared #toastStatus/#toastAlert stacks from
       the auth-modals partial (see toast.js); this page no longer ships its own. -->

  <!-- ── Tabs: Upload ⇄ My uploads (the staging / review bucket) ─────────── -->
  <div class="subtabs" role="tablist" aria-label="Upload views">
    <button type="button" class="subtab is-active" id="tabBtnUpload" role="tab"
            aria-selected="true" aria-controls="uploadPane">Upload</button>
    <button type="button" class="subtab" id="tabBtnMine" role="tab"
            aria-selected="false" aria-controls="minePane">
      My uploads <span class="subtab__count" id="mineCount" hidden>0</span>
    </button>
  </div>

  <div id="uploadPane" role="tabpanel" aria-labelledby="tabBtnUpload">

  <!-- ── Drop zone ──────────────────────────────────────────────────────── -->
  <section class="upload-section" aria-labelledby="dropHeading">
    <h1 id="dropHeading" class="section-title">Upload music</h1>
    <div class="drop-zone" id="dropZone" role="button" tabindex="0"
         aria-label="Drop files or a folder here, or activate to browse files">
      <div class="drop-zone__icon" aria-hidden="true">&#9835;</div>
      <p class="drop-zone__lead">Drag a folder of music here</p>
      <small class="drop-zone__hint">Audio is uploaded &amp; grouped into albums by its tags; cover images are matched to the album in their folder</small>
      <div class="drop-zone__actions">
        <div class="add-menu">
          <button type="button" class="btn btn--accent" id="addMusic" aria-haspopup="true" aria-expanded="false">Add music &#9662;</button>
          <div class="add-menu__list" id="addMenu" role="menu" hidden>
            <button type="button" class="add-menu__item" role="menuitem" id="chooseFiles">Choose files&hellip;</button>
            <button type="button" class="add-menu__item" role="menuitem" id="chooseFolder">Choose folder&hellip;</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Hidden inputs drive the two browse buttons. They live OUTSIDE .drop-zone
         on purpose: a programmatic input.click() dispatches a click that bubbles,
         and if the input were inside .drop-zone it would re-enter the drop-zone's
         click handler and open the *other* picker (the folder picker would be
         clobbered by the file picker). Keeping them as siblings stops that. -->
    <input type="file" id="fileInput"   class="visually-hidden" multiple aria-hidden="true" tabindex="-1">
    <input type="file" id="folderInput" class="visually-hidden" multiple webkitdirectory directory aria-hidden="true" tabindex="-1">
  </section>

  <!-- ── Workers + actions ──────────────────────────────────────────────── -->
  <section class="upload-section workers-bar" aria-labelledby="workersLabel">
    <div class="workers-control">
      <label class="workers-label" id="workersLabel" for="workersRange">
        Parallel uploads: <span id="workersValue">3</span>
      </label>
      <input type="range" id="workersRange" class="workers-range"
             min="1" max="10" step="1" value="3"
             aria-describedby="workersHint">
      <small id="workersHint" class="visually-hidden">Number of files uploaded in parallel</small>
    </div>
    <div class="workers-actions">
      <button type="button" class="btn btn--accent" id="startUpload" disabled>Upload</button>
      <button type="button" class="btn" id="clearQueue" disabled>Clear</button>
    </div>
  </section>

  <!-- ── Upload queue ───────────────────────────────────────────────────── -->
  <section class="upload-section" aria-labelledby="queueHeading">
    <h2 id="queueHeading" class="section-title">Upload queue</h2>
    <ul class="queue-list" id="uploadQueueList" aria-live="polite">
      <!-- populated by JS -->
    </ul>
    <p class="empty-note" id="queueEmpty">Nothing queued yet. Add files above to begin.</p>
  </section>

  <!-- ── Advanced ───────────────────────────────────────────────────────── -->
  <section class="upload-section upload-advanced" aria-labelledby="advancedHeading">
    <h2 id="advancedHeading" class="section-title section-title--sub">Advanced</h2>
    <label class="precheck-toggle">
      <input type="checkbox" id="precheckToggle" checked>
      <span>Skip files already on the server</span>
    </label>
    <p class="upload-advanced__hint">
      Each file is hashed in your browser and skipped if the server already has it.
      Turning this off re-uploads duplicates over the network &mdash; the server still
      de-duplicates them on arrival, so nothing is stored twice; you just spend the
      bandwidth.
    </p>
  </section>

  </div><!-- /uploadPane -->

  <!-- ── My uploads — the staging list (review bucket) ──────────────────── -->
  <!-- Rendered by the shared file-management component (file-list.js): heading,
       filter, bulk toolbar, per-state sections, Edit/Play/Remove, send-to-approval. -->
  <div id="minePane" role="tabpanel" aria-labelledby="tabBtnMine" hidden>
    <section class="upload-section" aria-label="My uploads">
      <div id="mineFileList" aria-busy="true" aria-live="polite"></div>
    </section>
  </div><!-- /minePane -->
{{end}}

{{/* theme-guard: the no-FOUC guard. An inline CLASSIC script (not a module —
     modules are deferred and run after first paint) placed in <head> before the
     stylesheets. It applies the saved per-device theme to <html data-theme>
     before CSS paints, so the page never flashes the hardcoded default first.
     localStorage key is shared with theme.js / settings.js. */}}
{{define "theme-guard"}}<script>
  try {
    var t = localStorage.getItem('madshare-theme');
    if (t) document.documentElement.dataset.theme = t;
  } catch (e) {}
</script>{{end}}