{# Persistent nav for dashboard pages. Caller passes ``active`` =
   ``'overview'`` | ``'api_keys'`` | ``'data'`` so the right tab gets the
   active state. Adding a tab: drop another ``<li>`` here + extend the
   ``active`` literal in the route handlers that render the page.

   T55: re-skinned to terminal-brutalist. The ``dash-nav`` class + the
   "Overview" / "API keys" anchor text are part of the public contract
   (asserted in tests/unit/test_dashboard_api_keys.py::
   test_dashboard_nav_renders_with_correct_active_tab) — do not rename. #}
<style>
  .dash-nav {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--rule-term, var(--rule, #232930));
    margin-bottom: 24px;
    font-family: var(--mono-term, var(--mono, "IBM Plex Mono", ui-monospace, monospace));
  }
  .dash-nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
  }
  .dash-nav-tab {
    display: inline-block;
    padding: 12px 18px;
    color: var(--ink-term-2, var(--ink-2, #aab1bb));
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
    transition: color 0.12s, border-color 0.12s;
  }
  .dash-nav-tab:hover {
    color: var(--ink-term, var(--ink, #e6e8eb));
    text-decoration: none;
  }
  .dash-nav-tab.active {
    color: var(--accent-term, var(--accent, #c77dff));
    border-bottom-color: var(--accent-term, var(--accent, #c77dff));
  }
  .dash-nav-tab.active:hover {
    color: var(--accent-term, var(--accent, #c77dff));
  }
</style>
<nav class="dash-nav" aria-label="Dashboard sections">
  <ul>
    <li>
      <a href="/dashboard"
         class="dash-nav-tab{% if active == 'overview' %} active{% endif %}"
         {% if active == 'overview' %}aria-current="page"{% endif %}>
        Overview
      </a>
    </li>
    <li>
      <a href="/dashboard/api-keys"
         class="dash-nav-tab{% if active == 'api_keys' %} active{% endif %}"
         {% if active == 'api_keys' %}aria-current="page"{% endif %}>
        API keys
      </a>
    </li>
    <li>
      <a href="/dashboard/data"
         class="dash-nav-tab{% if active == 'data' %} active{% endif %}"
         {% if active == 'data' %}aria-current="page"{% endif %}>
        Your data
      </a>
    </li>
    {% if user_role is defined and user_role in ["admin", "super_admin"] %}
    <li>
      <a href="/admin/dashboard" class="dash-nav-tab">
        Admin
      </a>
    </li>
    {% endif %}
  </ul>
</nav>