{# Shared theme switcher dropdown (QA-020).

   Included by every theme's topbar. Self-contained: inline styles below
   survive even when a theme stylesheet fails to load, the <noscript> block
   guarantees the switcher works without JavaScript, and the companion script
   ``/static/theme_switcher.js`` handles localStorage persistence and the
   first-paint redirect.

   Context (set by ``scan.scan_view`` — see routes/scan.py):
     * ``active_theme``   — current slug, one of editorial|mission|narrative|executive
     * ``theme_choices``  — ordered list of slugs; iteration drives the menu
     * ``scan_id``        — the scan id used to build each option's href

   Defaults make the partial safe to include from any theme even when the
   route hasn't enriched the context yet (e.g. partial rendering in tests).
#}
{% set _active = active_theme if active_theme is defined and active_theme else 'editorial' %}
{% set _choices = theme_choices if theme_choices is defined and theme_choices else ['editorial', 'mission', 'narrative', 'executive'] %}
{% set _labels = {
  'editorial': 'Editorial',
  'mission':   'Mission Control',
  'narrative': 'Narrative Report',
  'executive': 'Executive Dashboard',
} %}
{% set _subtitles = {
  'editorial': 'Briefing layout',
  'mission':   'Ops dashboard',
  'narrative': 'Stakeholder report',
  'executive': 'KPI strip + tabs',
} %}
<div class="ag-theme-switcher" data-ag-theme-switcher data-active-theme="{{ _active }}" role="group" aria-label="Dashboard theme">
  <label class="ag-theme-switcher__label" for="ag-theme-switcher-select">theme</label>
  <select id="ag-theme-switcher-select"
          class="ag-theme-switcher__select"
          data-current="{{ _active }}"
          aria-label="Select dashboard theme">
    {% for slug in _choices %}
      <option value="{{ slug }}"
              data-href="/scans/{{ scan_id }}?theme={{ slug }}"
              {% if slug == _active %}selected{% endif %}>
        {{ _labels.get(slug, slug) }}
      </option>
    {% endfor %}
  </select>
  <noscript>
    <ul class="ag-theme-switcher__fallback">
      {% for slug in _choices %}
        <li>
          <a href="/scans/{{ scan_id }}?theme={{ slug }}"
             class="ag-theme-switcher__link{% if slug == _active %} ag-theme-switcher__link--active{% endif %}"
             {% if slug == _active %}aria-current="page"{% endif %}>
            {{ _labels.get(slug, slug) }}
            <small>{{ _subtitles.get(slug, '') }}</small>
          </a>
        </li>
      {% endfor %}
    </ul>
  </noscript>
</div>
<style>
/* Self-contained — survive even when the theme stylesheet fails to load. */
.ag-theme-switcher{display:inline-flex;align-items:center;gap:.5rem;font:13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.ag-theme-switcher__label{font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:11px;opacity:.7}
.ag-theme-switcher__select{padding:.35rem .55rem;border:1px solid currentColor;border-radius:.4rem;background:transparent;color:inherit;font:inherit;cursor:pointer;opacity:.85}
.ag-theme-switcher__select:hover,.ag-theme-switcher__select:focus-visible{opacity:1;outline:2px solid transparent;outline-offset:2px}
.ag-theme-switcher__fallback{list-style:none;display:flex;gap:.4rem;margin:0;padding:0}
.ag-theme-switcher__fallback a{display:flex;flex-direction:column;padding:.35rem .55rem;border:1px solid currentColor;border-radius:.4rem;text-decoration:none;color:inherit;opacity:.7}
.ag-theme-switcher__fallback a small{font-size:11px;opacity:.6}
.ag-theme-switcher__link--active{opacity:1;font-weight:600}
@media (prefers-color-scheme: dark){
  .ag-theme-switcher__select{background:rgba(255,255,255,.04)}
}
</style>
<script src="/static/theme_switcher.js" defer></script>