{# The main navigation, as its own fragment.

   It is included by base_full.html and served verbatim by
   /_construct/menu, because a menu that changes between requests cannot
   only exist in the full-page layout: the sidebar sits outside
   #main-content, so no Unpoly navigation ever redraws it. `up-source`
   is what lets construct-core.js reload just this nav when a response's
   X-Construct-Menu header disagrees with the shell's stamp.

   Requires `construct` in context. #}
<nav id="fcu-main-menu" class="fcu-navigation" up-nav aria-label="{{ construct.t('nav-main') }}"
     {%- if construct.menu_url %} up-source="{{ construct.menu_url }}"{% endif %}
     {%- if construct.menu_poll %} up-poll up-interval="{{ construct.menu_poll }}"{% endif %}>
  <ul class="fcu-menu">
    {% for topitem in construct.menu %}
      {% if topitem.type == "item" %}
        {% set is_current = request.path.rstrip('/') == topitem.link.rstrip('/') %}
        <li class="fcu-menu-item">
          {# aria-current carries the "you are here" state that the
             `active` class only conveys visually. #}
          <a class="fcu-menu-link {% if is_current %}active{% endif %}"
             {% if is_current %}aria-current="page"{% endif %}
             href="{{ topitem.link }}" up-follow up-target="#main-content">
            {{ icon(topitem.icon) }}
            <span class="fcu-menu-text">{{ construct.t(topitem.title) }}</span>
          </a>
        </li>
      {% endif %}
      {% if topitem.type == "submenu" %}
        {% set ns = namespace(open=false) %}
        {% for item in topitem.subitems %}{% if request.path.rstrip('/') == item.link.rstrip('/') %}{% set ns.open = true %}{% endif %}{% endfor %}
        <li class="fcu-menu-item fcu-menu-item--has-submenu">
          <details class="fcu-submenu-details"{% if ns.open %} open{% endif %}>
            <summary class="fcu-menu-header fcu-menu-toggle">
              {{ icon(topitem.icon) }}
              <span class="fcu-menu-text">{{ construct.t(topitem.title) }}</span>
              {{ icon("expand", cls="fcu-submenu-arrow") }}
            </summary>
            <ul class="fcu-submenu">
              {% for item in topitem.subitems %}
                {% set is_current = request.path.rstrip('/') == item.link.rstrip('/') %}
                <li class="fcu-submenu-item">
                  <a class="fcu-submenu-link {% if is_current %}active{% endif %}"
                     {% if is_current %}aria-current="page"{% endif %}
                     href="{{ item.link }}" up-follow up-target="#main-content">
                    {% if item.icon %}
                      {{ icon(item.icon) }}
                    {% endif %}
                    <span class="fcu-submenu-text">{{ construct.t(item.title) }}</span>
                  </a>
                </li>
              {% endfor %}
            </ul>
          </details>
        </li>
      {% endif %}
      {% if topitem.type == "header" %}
        {# A real heading, so the group label is reachable by heading
           navigation instead of being a styled list item. The <li>
           stays for list structure; the <h2> carries the semantics. #}
        <li class="fcu-menu-header-item">
          <h2 class="fcu-menu-header">{{ construct.t(topitem.title) }}</h2>
        </li>
      {% endif %}
    {% endfor %}
  </ul>
</nav>