{# The main navigation, as its own fragment: included by base_full.html and
   served verbatim by /_construct/menu, so construct-core.js can reload just
   this nav (via `up-source`) when the menu stamp changes. Requires
   `construct` in context.

   The current entry is decided here for a full page load (construct.menu_current)
   and by construct-core.js after every Unpoly navigation, from the patterns
   each link carries in `data-fcu-match`. `up-nav="false"`: Unpoly treats
   every <nav> as a navigation container and would re-mark its links by exact
   URL (undoing the mark after a redirect), and with `up-alias` it marks every
   link whose pattern matches, while only one entry may be current. #}
{% set current = construct.menu_current %}
<nav id="fcu-main-menu" class="fcu-navigation" aria-label="{{ construct.t('nav-main') }}" up-nav="false"
     {%- 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 = topitem is sameas current %}
        <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 }}" data-fcu-match="{{ construct.menu_patterns(topitem) | join(' ') }}"
             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 item is sameas current %}{% 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-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 = item is sameas current %}
                <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 }}" data-fcu-match="{{ construct.menu_patterns(item) | join(' ') }}"
                     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>