{#-
  Custom tabs partial — adds dropdown menus for sections with children.

  For top-level nav items that have children (Development, Reference, ADRs),
  a hover-activated dropdown lists all child pages.  Single-page tabs
  (Specification, Timeline, FAQ) render as plain links.

  Replaces the default Material tabs.html + tabs-item.html.
-#}

{#- Recursive macro: drill to the first leaf page in a section tree. -#}
{% macro first_leaf_url(nav_item) %}
  {% if nav_item.children %}
    {% set first = nav_item.children | first %}
    {{ first_leaf_url(first) }}
  {% else %}
    {{ nav_item.url | url }}
  {% endif %}
{% endmacro %}

{#- Recursive helper: collect all leaf pages under a section. -#}
{% macro render_dropdown_items(children) %}
  {% for child in children %}
    {% if child.children %}
      {#- Nested section — render a group label + its children -#}
      <li class="md-tabs__dropdown-group">
        <span class="md-tabs__dropdown-label">{{ child.title }}</span>
        <ul>
          {{ render_dropdown_items(child.children) }}
        </ul>
      </li>
    {% else %}
      <li>
        <a href="{{ child.url | url }}" class="md-tabs__dropdown-link{% if child == page %} md-tabs__dropdown-link--active{% endif %}">
          {{ child.title }}
        </a>
      </li>
    {% endif %}
  {% endfor %}
{% endmacro %}

<nav class="md-tabs" aria-label="{{ lang.t('tabs') }}" data-md-component="tabs">
  <div class="md-grid">
    <ul class="md-tabs__list">
      {% for nav_item in nav.items %}
        {% set class = "md-tabs__item" %}
        {% if nav_item.active %}
          {% set class = class ~ " md-tabs__item--active" %}
        {% endif %}

        {% if nav_item.children %}
          {#- Section with children — render tab + dropdown -#}
          {% set class = class ~ " md-tabs__item--dropdown" %}
          <li class="{{ class }}">
            <a href="{{ first_leaf_url(nav_item) | trim }}" class="md-tabs__link">
              {{ nav_item.title }}
              <span class="md-tabs__dropdown-caret"></span>
            </a>
            <ul class="md-tabs__dropdown">
              {{ render_dropdown_items(nav_item.children) }}
            </ul>
          </li>
        {% else %}
          {#- Single page — plain tab link -#}
          <li class="{{ class }}">
            <a href="{{ nav_item.url | url }}" class="md-tabs__link">
              {{ nav_item.title }}
            </a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  </div>
</nav>