{#
  Shared chrome for every /settings/* page.

  Concrete section pages (Channels, API Keys) extend THIS template rather
  than base.html directly, so we guarantee the left-nav / mobile strip
  renders consistently and the "active" state stays in sync with the URL.

  Expected context:
    - active_section  — one of "channels", "api-keys". Drives the
                        body class (`settings--channels` etc.) so the
                        section can target CSS to itself, and which
                        nav item gets the --active modifier.
    - section_title   — optional; used in <title>. Defaults to "Settings".

  Blocks the section can override:
    - section_header        — rendered above `settings_content`; typically
                              a big serif title + optional subtitle.
    - settings_content      — the main page body.
    - settings_head_extra   — per-page CSS / JS. Loaded AFTER settings.css.
#}
{% extends "base.html" %}
{% from "_macros.html" import pen_underline %}

{% block title %}{{ section_title|default("Settings") }} · Agent Drop{% endblock %}

{% block head_extra %}
  <link rel="stylesheet" href="{{ static('settings.css') }}">
  {% block settings_head_extra %}{% endblock %}
{% endblock %}

{% block body_class %}settings settings--{{ active_section }}{% endblock %}

{% block content %}
<div class="settings-shell">

  <aside class="settings-nav" aria-label="Settings navigation">
    <div class="settings-nav__brand">
      <a class="settings-nav__home" href="/" title="Back to inbox">← Inbox</a>
      <div class="settings-nav__title">
        <span class="settings-nav__title-text">Settings</span>
        <span class="settings-nav__title-underline" aria-hidden="true">
          {{ pen_underline(length_chars=8) }}
        </span>
      </div>
    </div>

    {# Section links. The `active_section` context value drives the
       highlight; the parallel agents pass "channels" / "routing" /
       "devices" / "api-keys". #}
    {% set nav_items = [
      ("channels",   "Channels",   "/settings/channels"),
      ("routing",    "Routing",    "/settings/routing"),
      ("devices",    "Devices",    "/settings/devices"),
      ("api-keys",   "API keys",   "/settings/api-keys"),
      ("appearance", "Appearance", "/settings/appearance"),
    ] %}
    <nav class="settings-nav__list">
      {% for key, label, href in nav_items %}
        <a class="settings-nav__item {% if active_section == key %}settings-nav__item--active{% endif %}"
           href="{{ href }}"
           {% if active_section == key %}aria-current="page"{% endif %}>
          {{ label }}
        </a>
      {% endfor %}
    </nav>

    {# Logout lives at the bottom of the nav on desktop; on mobile it
       moves inline thanks to the horizontal-strip layout. The form
       POSTs to /logout, which clears the session cookie. #}
    <form class="settings-nav__logout" method="post" action="/logout">
      <input type="hidden" name="_csrf" value="{{ csrf_token(request) }}" />
      <button class="btn btn--ghost" type="submit">Log out</button>
    </form>
  </aside>

  <main class="settings-main">
    {% block section_header %}{% endblock %}
    {% block settings_content %}{% endblock %}
  </main>

</div>
{% endblock %}