{#
/**
 * @file
 * Theme override to display a menu.
 *
 * Available variables:
 * - menu_name: The machine name of the menu.
 * - items: A nested list of menu items. Each menu item contains:
 *   - attributes: HTML attributes for the menu item.
 *   - below: The menu item child items.
 *   - title: The menu link title.
 *   - url: The menu link url, instance of \Drupal\Core\Url
 *   - localized_options: Menu link localized options.
 *   - is_expanded: TRUE if the link has visible children within the current
 *     menu tree.
 *   - is_collapsed: TRUE if the link has children within the current menu tree
 *     that are not currently visible.
 *   - in_active_trail: TRUE if the link is in the active trail.
 *
 * @see template_preprocess_menu()
 * @see solo_preprocess_menu()
 */
#}
{% import _self as menus %}
{% set svg_bars %}
    {% include '@solo/partials/svg/_svg-bars.html.twig' %}
{% endset %}
{% macro svg_icon(icon_value) %}
    {% include '@solo/partials/svg/_svg-menu-arrow.html.twig' %}
{% endmacro %}
<div class="solo-clear solo-menu navigation-responsive navigation-responsive-hover{{ keyboard_enabled ? ' solo-keyboard-enabled' }}"
     aria-label="{{ 'Responsive navigation'|t }}"
     data-menu-name="{{ menu_name }}"
     data-interaction-type="hover">
    <div class="mobile-nav hamburger-icon solo-block">
        <button class="solo-button-menu mobile-menubar-toggler-button"
                data-drupal-selector="mobile-menubar-toggler-button"
                aria-label="{{ 'Toggle menu'|t }}"
                aria-expanded="false"
                aria-controls="{{ menu_name ~'__menubar'|clean_unique_id }}"
                type="button">
            <span aria-hidden="true">{{ svg_bars|raw }}</span>
            <span class="visually-hidden">{{ 'Toggle menu'|t }}</span>
        </button>
    </div>
    {{ menus.menu_links(items, attributes, 0, menu_name, aria_id) }}
</div>
{% macro menu_links(items, attributes, menu_level, menu_name, aria_id) %}
    {% set menu_level = menu_level + 1 %}
    {% set menu_classes = [
            'navigation__menubar',
            'navigation__responsive',
            'navigation__responsive__hover',
            'navigation__menubar-' ~ menu_name|clean_class,
        ] %}
{% set submenu_classes = [
    'sub__menu sub__menu-' ~ menu_name|clean_class,
] %}
{% set menubar_attributes = create_attribute({
    'id': menu_name ~'__menubar'|clean_unique_id,
    'role': 'menubar',
    'data-menu-level': menu_level,
    'aria-orientation': 'horizontal',
}) %}
{% set submenu_attributes = create_attribute({
    'id': menu_name ~'__submenu'|clean_unique_id,
    'role': 'menu',
    'tabindex': '-1',
    'aria-hidden': 'true',
    'data-menu-level': menu_level,
    'aria-orientation': 'vertical',
}) %}

{% if items %}

  {% if menu_level == 1 %}
  <ul{{ attributes.addClass(menu_classes).removeAttribute('region') }} {{ menubar_attributes }}>
  {% else %}
  <ul{{ attributes.removeClass(menu_classes).addClass(submenu_classes) }} {{ submenu_attributes }}>
  {% endif %}

    {# The same in all menus #}
    {% for item in items %}

    {# Determine the system path for the link #}
    {% set system_path = item.url.isRouted() ? item.url.getInternalPath() : item.url.toString() %}
    {% if system_path == '' %}
      {% set system_path = '<front>' %}
    {% endif %}

    {# Link type detection - Following Drupal core Olivero pattern #}
    {% if item.url.isRouted and item.url.routeName == '<nolink>' %}
        {% set link_type = 'nolink' %}
    {% elseif item.url.isRouted and item.url.routeName == '<button>' %}
        {% set link_type = 'button' %}
    {% else %}
        {% set link_type = 'link' %}
    {% endif %}

    {# Determine if this is an external link for additional handling #}
    {% set is_external = item.url.isExternal() %}
    {% set url_string = item.url.toString() %}
    {% set is_linkable = link_type != 'nolink' and url_string != '' %}

    {% import _self as macros %}
    {% set aria_id = (menu_name ~ '-sub__menu-' ~ loop.index )|clean_unique_id %}
    {% set dropdown_toggler_class = (menu_level == 1) ? 'dropdown-toggler-parent' : 'dropdown-toggler-child' %}
    {% set rendered_url = item.url|render %}

    {% set item_classes = [
    'btn-animate nav__menu-item nav__menu-item-' ~ menu_name|clean_class,
    (item and menu_level == 1 ) ? 'nav__menubar-item',
    (item and menu_level > 1 ) ? 'nav__submenu-item',
    item.is_expanded ? 'has-sub__menu',
    item.is_expanded and is_linkable ? 'link-and-button',
    item.is_expanded and not is_linkable ? 'button-only',
    not item.is_expanded and is_linkable ? 'link-only',
    not item.is_expanded and link_type == 'nolink' ? 'no-link',
    not item.is_expanded and link_type == 'button' ? 'keyboard-button',
    not item.is_expanded and is_external ? 'external-link',
    item.in_active_trail ? 'is-active',
    ]
    %}

    {% set dorpdown_toggler_attributes = create_attribute({
      'data-drupal-selector': aria_id,
      'role': 'menuitem',
      'aria-controls': aria_id,
      'aria-haspopup': 'true',
      'aria-expanded': 'false',
      'tabindex': '-1',
      'type': 'button',
      'data-menu-item-id': loop.index,
    }) %}

    {# Set additional attributes if they exist - with null safety #}
    {% set additional_classes = '' %}
    {% if item.url and item.url.getOption('attributes') and item.url.getOption('attributes').class %}
        {% set additional_classes = item.url.getOption('attributes').class %}
    {% endif %}
    {% set class_list = additional_classes is iterable ? additional_classes|join(' ') : additional_classes %}

    {# The parent menu and it has children #}
    {% if item.is_expanded %}
    <li{{ item.attributes.addClass(item_classes) }} role='none' data-link-type="{{ link_type }}">
    {% if is_linkable %}
        {# The parent link is clickable and it has children #}
        {% set c_link_classes = ['nav__menu-link nav__menu-link-' ~ menu_name|clean_class, 'url-added'] %}
        {% if class_list %}
            {% set c_link_classes = c_link_classes|merge([class_list]) %}
        {% endif %}
        <a href="{{ item.url }}" class="{{ c_link_classes|join(' ') }}"
            {%- if item.url and item.url.getOption('attributes') and item.url.getOption('attributes').title %} title="{{ item.url.getOption('attributes').title }}" {% endif -%}
            {%- if item.url and item.url.getOption('attributes') and item.url.getOption('attributes').target %} target="{{ item.url.getOption('attributes').target }}" {% endif -%}
            {%- if item.url and item.url.getOption('attributes') and item.url.getOption('attributes').rel %} rel="{{ item.url.getOption('attributes').rel }}" {% endif -%}
            {%- if is_external %} target="_blank" rel="noopener"{% endif -%}
            tabindex="-1" data-drupal-link-system-path="{{ system_path }}" role='menuitem'
            {%- if item.in_active_trail and item.url and item.url.toString() == path('<current>') %} aria-current="page"{% endif -%}>
            <span class="menu__url-title-enabled">{{ item.title }}</span>
        </a>
        <button class="en-link dropdown-toggler {{ dropdown_toggler_class }}" {{ dorpdown_toggler_attributes }}>
            <span class="visually-hidden">{{ '@title sub-navigation'|t({'@title': item.title}) }}</span>
            <span class="toggler-icon dropdown-arrow">{{ macros.svg_icon('M6 9l6 6 6-6') }}</span>
        </button>
    {% else %}
        {# The parent link is NOT clickable and it has children #}
        {% set button_classes = [
          'ds-link',
          'dropdown-toggler',
          'nav__menu-button',
          'nav__menu-button-' ~ menu_name|clean_class,
          dropdown_toggler_class
        ] %}
        {% if class_list %}
          {% set button_classes = button_classes|merge([class_list]) %}
        {% endif %}
        <button class="{{ button_classes|join(' ') }}" {{ dorpdown_toggler_attributes }} {%- if item.url and item.url.getOption('attributes') and item.url.getOption('attributes').title %} title="{{ item.url.getOption('attributes').title }}" {% endif -%} data-link-type="{{ link_type }}">
            <span class="menu__url-title-disabled">{{ item.title }}</span>
            <span class="visually-hidden">{{ '@title sub-navigation'|t({'@title': item.title}) }}</span>
            <span class="toggler-icon dropdown-arrow">{{ macros.svg_icon('M6 9l6 6 6-6') }}</span>
        </button>
    {% endif %}{# End of is_linkable check #}

    {% else %} {# if item is not expanded #}
      {% set link_title %}
        <span class="menu__url-title">{{ item.title }}</span>
      {% endset %}
    <li{{ item.attributes.addClass(item_classes) }} role='none' data-link-type="{{ link_type }}">
        {% if link_type == 'nolink' %}
            {# Display as text only #}
            <span class="nav__menu-nolink nav__menu-nolink-{{ menu_name|clean_class }} {{ class_list }}"
                  role="menuitem"
                  tabindex="-1"
                  {%- if item.url and item.url.getOption('attributes') and item.url.getOption('attributes').title %} title="{{ item.url.getOption('attributes').title }}" {% endif -%}>
                {{ link_title }}
            </span>
        {% elseif link_type == 'button' %}
            {# Display as keyboard-accessible button #}
            <button class="nav__menu-button nav__menu-button-{{ menu_name|clean_class }} {{ class_list }}"
                    role="menuitem"
                    tabindex="-1"
                    type="button"
                    {%- if item.url and item.url.getOption('attributes') and item.url.getOption('attributes').title %} title="{{ item.url.getOption('attributes').title }}" {% endif -%}>
                {{ link_title }}
            </button>
        {% else %}
            {# All other links (internal and external) #}
            {% set link_classes = [
                'nav__menu-link nav__menu-link-' ~ menu_name|clean_class,
            ] %}
            {% if class_list %}
                {% set link_classes = link_classes|merge([class_list]) %}
            {% endif %}

            {# For external links, add security and accessibility attributes #}
            {% if is_external %}
                <a href="{{ item.url }}" class="{{ link_classes|join(' ') }}"
                   role="menuitem"
                   tabindex="-1"
                   target="_blank"
                   rel="noopener"
                   data-drupal-link-system-path="{{ system_path }}"
                   {%- if item.url and item.url.getOption('attributes') and item.url.getOption('attributes').title %} title="{{ item.url.getOption('attributes').title }}" {% endif -%}>
                    {{ link_title }}
                    <span class="visually-hidden">{{ '(opens in new tab)'|t }}</span>
                </a>
            {% else %}
                {# Use Drupal's link function for internal links #}
                {{ link(
                link_title,
                item.url,
                item.attributes.removeClass(item_classes).addClass(link_classes),
                item.attributes.setAttribute('role', 'menuitem').setAttribute('tabindex', '-1')
                .setAttribute('data-drupal-link-system-path', system_path)
                .setAttribute(item.in_active_trail and item.url and item.url.toString() == path('<current>') ? 'aria-current' : 'data-inactive',
                item.in_active_trail and item.url and item.url.toString() == path('<current>') ? 'page' : 'true'))}}
            {% endif %}
        {% endif %}
    {% endif %}{# End for the if item.is_expanded #}

    {% if item.below %}
      {% set attributes = attributes.setAttribute('id', aria_id).setAttribute('tabindex', '-1') %}
      {{ menus.menu_links(item.below, attributes, menu_level, menu_name) }}
    {% endif %}
    </li>
    {% endfor %}{# End of {% for item in items %} #}
  </ul>
{% endif %} {# End of {% if items %} #}
{% endmacro %}
