{#
/**
 * @file
 * Template for a Nav component.
 *
 * Available config:
 * - alignment: left | right | center | vertical.
 * - style: tabs | pills
 * - fill: fill | justify
 * - utility_classes: An array of utility classes.
 * - render_toggle: boolean (which effects attributes: data-behavior: toggle)
 */
#}
{% import _self as menus %}

{% set nav_classes = [ 'menu' ]|merge(utility_classes ? utility_classes : []) %}
{% set toggle_icon_open = create_attribute({
  'data-action': 'open',
}) %}
{% set toggle_icon_close = create_attribute({
  'data-action': 'close',
}) %}

{% if items %}
  <nav {{ attributes.addClass(nav_classes) }} aria-label="{{ id }}" id="{{ 'nav-' ~ id }}">
  {% if render_toggle %}
    <button aria-expanded="false" class="navigation__toggle" type="button" aria-controls="{{ id }}">
      <span class="sr-only">Toggle navigation</span>
      {{ include('sector_theme:material-icon', {
        icon: 'menu',
        family: 'material-symbols-sharp',
        classes: 'material-symbols-sharp',
        attributes: toggle_icon_open
      })}}
      {{ include('sector_theme:material-icon', {
        icon: 'close',
        family: 'material-symbols-sharp',
        classes: 'material-symbols-sharp',
        attributes: toggle_icon_close
      })}}
    </button>
  {% endif %}
  <ul class="navigation__list" id="{{ id }}">
    {% block items %}
      {% for item in items %}
        {% set nav_item_classes = [
            'menu__item',
            'menu__item--' ~ menu_item_type,
            'menu__item--level-' ~ (menu_level + 1),
            item.in_active_trail ? 'menu__item--active-trail',
            item.below ? 'menu__item--has-children',
            item.published == false ? 'unpublished'
        ] %}
        {% set link_attributes = create_attribute() %}
        {% set nav_link_classes = ['menu__link'] %}
        {% set aria_id = (item.title ~ '-submenu-' ~ loop.index )|clean_id %}
        {% if item.url.options.attributes.class is iterable %}
          {% set nav_link_classes = nav_link_classes|merge(item.url.options.attributes.class) %}
        {% elseif item.url.options.attributes.class %}
          {% set nav_link_classes = nav_link_classes|merge([item.url.options.attributes.class]) %}
        {% endif %}
        {% if item.current %}
          {% set link_attributes = link_attributes.setAttribute('aria-current', 'page') %}
        {% endif %}
        <li{{ item.attributes.addClass(nav_item_classes) }}>
          {% if item.is_expanded and item.below %}
            {% if render_submenu_toggle %}
            <button type="button" aria-expanded="false" class="menu__toggle" aria-controls="{{ 'sub-menu-sub-nav-' ~ aria_id }}">
              {{ item.title }}
              {{ include('sector_theme:material-icon', {
                icon: 'expand_more',
                family: 'material-symbols-sharp',
                classes: 'material-symbols-sharp',
                attributes: null
              })}}
            </button>
            {% endif %}

            {{ link(item.title, item.url, link_attributes.addClass(nav_link_classes|merge(['menu__toggle-link'])) ) }}

            {% if render_submenu_toggle %}
              <button type="button" aria-expanded="false" class="menu__toggle menu__toggle-sm" aria-controls="{{ 'sub-menu-subnav__' ~ aria_id }}">
                Expand {{ item.title }}
                {{ include('sector_theme:material-icon', {
                  icon: 'expand_more',
                  family: 'material-symbols-sharp',
                  classes: 'material-symbols-sharp',
                  attributes: null
                })}}
              </button>
            {% endif %}

            {% if item.below %}
              {{ include('sector_theme:subnav', {
                id: 'sub-nav-' ~ aria_id,
                utility_classes: [ 'menu__menu', 'hidden' ],
                items: item.below,
                render_submenu_toggle: render_submenu_toggle,
                parent_item: item,
                menu_level: menu_level + 1
              }) }}
            {% endif %}
          {% else %}
            {{ link(item.title, item.url, link_attributes.addClass(nav_link_classes|join(' '))) }}
          {% endif %}
        </li>
      {% endfor %}
    {% endblock %}
  </ul>
  {% if libraries %}
    {% for library in libraries %}
      {{ attach_library(library) }}
    {% endfor %}
  {% endif %}
  </nav>
{% endif %}
