{#
/**
 * @file
 * Theme override to display the main menu with modern styling.
 *
 * 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.
 */
#}

{% import _self as menus %}

{% if items %}
  <ul class="main-menu-list">
    {% for item in items %}
      <li class="main-menu-item{{ item.in_active_trail ? ' active' : '' }}{{ item.below ? ' has-dropdown' : '' }}">
        <a href="{{ item.url }}"
           class="main-menu-link{{ item.in_active_trail ? ' active' : '' }}"
           {{ item.attributes.addClass('nav-link') }}>
          {{ item.title }}
          {% if item.below %}
            <svg class="dropdown-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="6,9 12,15 18,9"></polyline>
            </svg>
          {% endif %}
        </a>

        {% if item.below %}
          <div class="dropdown-menu">
            {{ menus.menu_links(item.below, attributes, 1) }}
          </div>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
{% endif %}

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    <ul class="dropdown-list">
      {% for item in items %}
        <li class="dropdown-item{{ item.in_active_trail ? ' active' : '' }}">
          <a href="{{ item.url }}"
             class="dropdown-link{{ item.in_active_trail ? ' active' : '' }}"
             {{ item.attributes }}>
            {{ item.title }}
          </a>
          {% if item.below %}
            {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}
