{#
Documentation navigation.

The tree still comes from Bengal's NavTree context, but the emitted chrome uses
Chirp UI sidebar primitives instead of a bespoke docs-nav class system.
#}

{% from 'chirpui/sidebar.html' import sidebar %}
{% from 'chirpui/workspace_primitives.html' import filter_rail %}

{% def catalog_mark(title, href, index) %}
{% let key = ((title ?? '') ~ ' ' ~ (href ?? '')) | lower %}
{% if 'component' in key %}
{{ icon('cube', size=18) }}
{% elif 'release' in key %}
{{ icon('rocket', size=18) }}
{% elif 'api' in key or 'reference' in key %}
{{ icon('code', size=18) }}
{% elif 'blog' in key or 'forum' in key %}
{{ icon('newspaper', size=18) }}
{% elif 'doc' in key or 'guide' in key %}
{{ icon('book-open', size=18) }}
{% elif 'tutorial' in key %}
{{ icon('graduation-cap', size=18) }}
{% elif 'track' in key %}
{{ icon('map', size=18) }}
{% elif 'resume' in key %}
{{ icon('briefcase', size=18) }}
{% elif 'author' in key %}
{{ icon('users', size=18) }}
{% elif 'changelog' in key %}
{{ icon('git-commit', size=18) }}
{% else %}
<span>{{ index }}</span>
{% end %}
{% end %}

{% def nav_type_icon(kind, branch=false) %}
{% if branch %}
{{ icon('folder', size=14) }}
{% elif kind == 'api' %}
{{ icon('file-code', size=14) }}
{% else %}
{{ icon('article', size=14) }}
{% end %}
{% end %}

{% def nav_node(item, depth=0) %}
{% let item_title = item?.title ?? 'Untitled' %}
{% let item_href = item?.href ?? '' %}
{% let item_children = item?.children ?? [] %}
{% let is_current = item?.is_current ?? false %}
{% let is_branch_active = is_current or (item?.is_in_trail ?? false) or (item?.is_expanded ?? false) %}
{% let has_children = item_children | length > 0 %}
{% let item_key = (item_title ~ ' ' ~ item_href) | lower %}
{% let item_kind = 'component' if 'component' in item_key else ('release' if 'release' in item_key else ('api' if ('api' in item_key or 'reference' in item_key) else ('pattern' if 'pattern' in item_key else ('guide' if ('guide' in item_key or 'doc' in item_key or 'start' in item_key or 'install' in item_key or 'theme' in item_key) else 'page')))) %}

{% if has_children %}
  {% if depth > 0 %}
  {#
    Disclosure section — explicit header row, NOT native <details>.

    The folder icon is a real <button> (`__toggle`); the navigable section
    label is its SIBLING <a> (`__summary-link`) in the always-visible
    `__section-header` row. NEITHER nests inside the other, so axe-core's
    `nested-interactive` rule passes (a link inside a <summary>, which carries
    an implicit button role, used to trip it). Clicking the folder toggles the
    section open/closed via JS (aria-expanded + the children region's
    visibility) with NO navigation; clicking the label navigates. The folder
    glyph swaps closed→open off the button's aria-expanded state in CSS — no
    caret, same look as before. The server seeds aria-expanded from
    is_branch_active so the active trail starts expanded on a fresh load.

    No-JS fallback: the children region renders visible by default (no
    `hidden` in the markup), so content stays reachable without scripting.
  #}
  {% let section_slug = (item_href if item_href else (item_title | lower)) | replace('/', '-') | replace(' ', '-') | replace('.', '-') | trim('-') %}
  {% let section_id = 'docs-nav-sect-' ~ section_slug %}
  <div class="chirpui-sidebar__section chirp-theme-docs-nav__section chirp-theme-docs-nav__section--has-toggle chirp-theme-docs-nav__section--depth-{{ depth }}{{ ' is-active' if is_branch_active else '' }}">
    <div class="chirp-theme-docs-nav__section-header">
      <button type="button"
              class="chirp-theme-docs-nav__toggle"
              aria-expanded="{{ 'true' if is_branch_active else 'false' }}"
              aria-controls="{{ section_id }}"
              aria-label="Toggle {{ item_title }} section">
        <span class="chirp-theme-docs-nav__disclosure" aria-hidden="true">
          <span class="chirp-theme-docs-nav__folder chirp-theme-docs-nav__folder--closed">{{ icon('folder', size=14) }}</span>
          <span class="chirp-theme-docs-nav__folder chirp-theme-docs-nav__folder--open">{{ icon('folder-open', size=14) }}</span>
        </span>
      </button>
      {% if item_href %}
      <a class="chirp-theme-docs-nav__summary-link chirp-theme-docs-nav__link--{{ item_kind }}{{ ' chirp-theme-docs-nav__summary-link--active' if is_current else '' }}"
         href="{{ item_href | absolute_url }}"
         title="{{ item_title }}"
         {% if is_current %}aria-current="page"{% end %}{{ route_link_attrs(item_href | absolute_url) | html_attrs }}>
        <span class="chirp-theme-docs-nav__summary-copy">
          <span class="chirpui-sidebar__label chirp-theme-docs-nav__label">{{ item_title }}</span>
        </span>
      </a>
      {% else %}
      <span class="chirp-theme-docs-nav__summary-link chirp-theme-docs-nav__link--{{ item_kind }}">
        <span class="chirp-theme-docs-nav__summary-copy">
          <span class="chirpui-sidebar__label chirp-theme-docs-nav__label">{{ item_title }}</span>
        </span>
      </span>
      {% end %}
    </div>
    <div class="chirpui-sidebar__section-links chirp-theme-docs-nav__section-links" id="{{ section_id }}">
      {% for child in item_children %}
      {{ nav_node(child, depth + 1) }}
      {% end %}
    </div>
  </div>
  {% else %}
  <div class="chirpui-sidebar__section chirp-theme-docs-nav__section chirp-theme-docs-nav__section--depth-{{ depth }}{{ ' is-active' if is_branch_active else '' }}">
    {% if item_href %}
    <a class="chirpui-sidebar__section-title chirp-theme-docs-nav__summary-link chirp-theme-docs-nav__link--{{ item_kind }}{{ ' chirp-theme-docs-nav__summary-link--active' if is_current else '' }}"
       href="{{ item_href | absolute_url }}"
       title="{{ item_title }}"
       {% if is_current %}aria-current="page"{% end %}{{ route_link_attrs(item_href | absolute_url) | html_attrs }}>
      <span class="chirpui-sidebar__icon chirp-theme-docs-nav__type-icon" aria-hidden="true">{{ nav_type_icon(item_kind, true) }}</span>
      <span class="chirp-theme-docs-nav__summary-copy">
        <span class="chirpui-sidebar__label chirp-theme-docs-nav__label">{{ item_title }}</span>
      </span>
    </a>
    {% else %}
    <span class="chirpui-sidebar__section-title chirp-theme-docs-nav__summary-link chirp-theme-docs-nav__link--{{ item_kind }}">
      <span class="chirpui-sidebar__icon chirp-theme-docs-nav__type-icon" aria-hidden="true">{{ nav_type_icon(item_kind, true) }}</span>
      <span class="chirp-theme-docs-nav__summary-copy">
        <span class="chirpui-sidebar__label chirp-theme-docs-nav__label">{{ item_title }}</span>
      </span>
    </span>
    {% end %}
    <div class="chirpui-sidebar__section-links chirp-theme-docs-nav__section-links">
    {% for child in item_children %}
    {{ nav_node(child, depth + 1) }}
    {% end %}
    </div>
  </div>
  {% end %}
{% else %}
  {% if item_href %}
  <a class="chirpui-sidebar__link chirp-theme-docs-nav__link chirp-theme-docs-nav__leaf-link{{ ' chirp-theme-docs-nav__root-leaf' if depth == 1 else '' }} chirp-theme-docs-nav__link--{{ item_kind }}{{ ' chirpui-sidebar__link--active' if is_current else '' }}"
     href="{{ item_href | absolute_url }}"
     title="{{ item_title }}"
     {% if is_current %}aria-current="page"{% end %}>
    <span class="chirpui-sidebar__icon chirp-theme-docs-nav__type-icon" aria-hidden="true">{{ nav_type_icon(item_kind) }}</span>
    <span class="chirpui-sidebar__label chirp-theme-docs-nav__label">{{ item_title }}</span>
  </a>
  {% else %}
  <span class="chirpui-sidebar__link chirp-theme-docs-nav__link chirp-theme-docs-nav__leaf-link{{ ' chirp-theme-docs-nav__root-leaf' if depth == 1 else '' }} chirp-theme-docs-nav__link--{{ item_kind }}">
    <span class="chirpui-sidebar__icon chirp-theme-docs-nav__type-icon" aria-hidden="true">{{ nav_type_icon(item_kind) }}</span>
    <span class="chirpui-sidebar__label chirp-theme-docs-nav__label">{{ item_title }}</span>
  </span>
  {% end %}
{% end %}
{% end %}

{% let is_autodoc = is_autodoc_page(page) if is_autodoc_page is defined else false %}
{% let page_section = page?._section %}
{% let root_section = page_section?.root ?? none %}
{% let current_path = page?.href ?? page?._path ?? '' %}
{% let catalog_items = get_nav_tree(page) ?? [] %}

<div class="chirp-theme-doc-catalog" data-chirp-theme-doc-nav="catalog" data-bengal="docs-nav">
  {% if catalog_items | length > 0 %}
  <div class="chirp-theme-doc-catalog__primary">
    {% call filter_rail(label='Documentation catalog', cls='chirp-theme-doc-catalog-rail') %}
      <div class="chirp-theme-doc-catalog-rail__group chirp-theme-doc-catalog-rail__group--home">
        <a class="chirpui-filter-rail__item chirp-theme-doc-catalog-rail__item chirp-theme-doc-catalog-rail__home{{ ' is-active' if current_path == '/' else '' }}"
           href="{{ '/' | absolute_url }}"
           aria-label="Home"
           title="Home"
           data-chirpui-role="nav"
           data-chirpui-pressure="compress"
           data-chirpui-rhythm="group"{{ route_link_attrs('/' | absolute_url) | html_attrs }}>
          <span class="chirpui-filter-rail__mark chirp-theme-doc-catalog-rail__mark chirp-theme-doc-catalog-rail__brand-mark" aria-hidden="true">ᗢ</span>
          <span class="chirpui-filter-rail__body">
            <strong class="chirpui-filter-rail__label chirp-theme-doc-catalog-rail__label">Home</strong>
          </span>
        </a>
      </div>

      <div class="chirp-theme-doc-catalog-rail__group chirp-theme-doc-catalog-rail__group--sections">
      {% for item in catalog_items %}
      {% let item_title = item?.title ?? 'Untitled' %}
      {% let item_href = item?.href ?? '#' %}
      {% let item_children = item?.children ?? [] %}
      {% let is_active = (item?.is_current ?? false) or (item?.is_in_trail ?? false) or (item?.is_expanded ?? false) %}
      <a class="chirpui-filter-rail__item chirp-theme-doc-catalog-rail__item{{ ' is-active' if is_active else '' }}"
         href="{{ item_href | absolute_url }}"
         aria-label="{{ item_title }}"
         {% if item?.is_current ?? false %}aria-current="page"{% end %}
         data-chirpui-role="nav"
         data-chirpui-pressure="compress"
         data-chirpui-rhythm="group"{{ route_link_attrs(item_href | absolute_url) | html_attrs }}>
        <span class="chirpui-filter-rail__mark chirp-theme-doc-catalog-rail__mark" aria-hidden="true">{{ catalog_mark(item_title, item_href, loop.index) }}</span>
        <span class="chirpui-filter-rail__body">
          <strong class="chirpui-filter-rail__label chirp-theme-doc-catalog-rail__label">{{ item_title }}</strong>
        </span>
      </a>
      {% end %}
      </div>

      <div class="chirp-theme-doc-catalog-rail__group chirp-theme-doc-catalog-rail__group--actions" aria-label="Global actions">
        {% with config.search.ui as ui %}
        {% if ui.modal ?? false %}
        <button type="button"
                class="chirpui-filter-rail__item chirp-theme-doc-catalog-rail__item chirp-theme-doc-catalog-rail__button nav-search-trigger"
                title="Search (⌘K)"
                aria-label="Search">
          <span class="chirpui-filter-rail__mark chirp-theme-doc-catalog-rail__mark" aria-hidden="true">{{ icon('magnifying-glass', size=18) }}</span>
          <span class="chirpui-filter-rail__body">
            <strong class="chirpui-filter-rail__label chirp-theme-doc-catalog-rail__label">Search</strong>
          </span>
        </button>
        {% else %}
        <a class="chirpui-filter-rail__item chirp-theme-doc-catalog-rail__item nav-search-trigger"
           href="{{ '/search/' | absolute_url }}"
           title="Search"
           aria-label="Search">
          <span class="chirpui-filter-rail__mark chirp-theme-doc-catalog-rail__mark" aria-hidden="true">{{ icon('magnifying-glass', size=18) }}</span>
          <span class="chirpui-filter-rail__body">
            <strong class="chirpui-filter-rail__label chirp-theme-doc-catalog-rail__label">Search</strong>
          </span>
        </a>
        {% end %}
        {% end %}
        <div class="chirp-theme-doc-catalog-rail__theme" title="Appearance">
          {% with theme_menu_id='theme-menu-rail' %}{% include 'partials/theme-controls.html' %}{% end %}
        </div>
      </div>
    {% end %}
  </div>
  {% end %}

  <div class="chirp-theme-doc-catalog__secondary" data-chirp-theme-doc-nav="sections">
  {% call sidebar(cls='chirp-theme-docs-nav', current_path=current_path, aria_label='Documentation sections') %}
    {% slot header %}
    {% unless is_autodoc %}
    {% include 'partials/version-selector.html' %}
    {% end %}
    {% end %}

    {% if root_section %}
    {% let nav_context = get_nav_context(page, root_section=root_section) %}
    {% with nav_context?.root as root_item %}
    {{ nav_node(root_item, 0) }}
    {% end %}
    {% else %}
    {% for item in catalog_items %}
    {{ nav_node(item, 0) }}
    {% end %}
    {% end %}
  {% end %}
  </div>
</div>