{#
  The pieces of the shell's header. Separate from shell.html so an app can
  import them without importing the template it extends.
#}
{% from "ui/attrs.html" import attrs %}
{% from "ui/icon.html" import icon %}

{#
  brand(label, href, icon_name | icon_src) — the wordmark and home link.

  Two ways to give it a mark, and they are mutually exclusive.

  `icon_name` draws a Lucide glyph on a token-coloured tile. The tile uses
  `bg-primary text-primary-foreground`, never `text-white`: the contrast token
  keeps the mark legible after a rebrand to a light primary.

  `icon_src` places artwork — a real logo, served from wherever the app keeps
  it. No tile, because a logo brings its own ground and `bg-primary` behind it
  would box it in. The mark then stops following `--primary`, which is the
  trade a brand asset always makes.

  `alt=""` is deliberate: the label sits beside the image inside the same
  anchor, so a screen reader announcing both would say the name twice. `width`
  and `height` are set so the row does not reflow when the image arrives.
#}
{% macro brand(label, href="/", icon_name=none, icon_src=none) -%}
  <a href="{{ href }}" class="flex items-center gap-2 font-semibold tracking-tight"{% if kwargs %}{{ attrs(kwargs) }}{% endif %}>
    {%- if icon_src %}
      <img class="size-7" src="{{ icon_src }}" width="28" height="28" alt="">
    {% elif icon_name %}
      <span class="bg-primary text-primary-foreground grid size-7 place-items-center rounded-lg">
        {{- icon(icon_name, 16) -}}
      </span>
    {% endif -%}
    {{ label }}
  </a>
{%- endmacro %}

{#
  nav_links(request, links) — top-level navigation.

  `links` is a list of (route_name, label) pairs. Route names rather than URLs,
  so the active state compares routes instead of string-matching paths, and
  stays correct when a URL gains a query string.
#}
{% macro nav_links(request, links) -%}
  <nav class="text-muted-foreground flex items-center gap-1 text-sm">
    {% for route, label in links %}
      <a class="hover:text-foreground rounded-md px-2.5 py-1.5 transition-colors
                {% if is_active(request, route) %}text-foreground bg-muted{% endif %}"
         href="{{ url_for(request, route) }}"
         {%- if is_active(request, route) %} aria-current="page"{% endif %}>{{ label }}</a>
    {% endfor %}
  </nav>
{%- endmacro %}

{#
  theme_toggle() — light/dark switch.

  The only inline script fjkit ships besides the shell's flash-guard. Two
  lines, and it has to run before any bundle would have loaded, so it is not in
  a .js file.
#}
{% macro theme_toggle() -%}
  <button class="btn" data-variant="ghost" data-size="icon-sm" type="button"
          aria-label="Toggle theme"
          onclick="document.documentElement.classList.toggle('dark');
                   localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light')">
    {{- icon("sun", 16, "hidden dark:block") }}{{ icon("moon", 16, "dark:hidden") -}}
  </button>
{%- endmacro %}

{#
  breadcrumb(trail, separator)

  `trail` is a list of `(label, href)` pairs. A pair whose href is none is the
  current page: it renders as `<span aria-current="page">` rather than a link,
  so the trail holds exactly one non-navigable entry and assistive tech is told
  which. Passing the current page as a link is the usual way this component
  goes wrong, and the parameter's shape prevents it.

  Separators are their own `<li aria-hidden="true">` rather than CSS `::after`
  content: some screen readers read generated content aloud, and a trail
  punctuated by "greater than" five times is worse than silence. This follows
  Basecoat's structure.

  The separator mirrors under `dir="rtl"`; a dot has nothing to mirror, so the
  flip skips it.
#}
{% set _CRUMB_SEPARATORS = {"chevron": "chevron-right", "slash": "slash", "dot": "dot"} %}

{% macro breadcrumb(trail, separator="chevron", label="Breadcrumb") -%}
  {%- set glyph = _CRUMB_SEPARATORS.get(separator, "chevron-right") -%}
  <nav class="breadcrumb" aria-label="{{ label }}"{% if kwargs %}{{ attrs(kwargs) }}{% endif %}>
    <ol>
      {%- for crumb_label, href in trail %}
        {%- if not loop.first %}
          <li aria-hidden="true">{{ icon(glyph, 16, "" if separator == "dot" else "rtl:rotate-180") }}</li>
        {%- endif %}
        <li>
          {%- if href %}
            <a href="{{ href }}">{{ crumb_label }}</a>
          {%- else %}
            <span aria-current="page">{{ crumb_label }}</span>
          {%- endif %}
        </li>
      {%- endfor %}
    </ol>
  </nav>
{%- endmacro %}