{#
/**
 * @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.
 */
#}

{{ attach_library('mercury/dropdown-menu') }}

{% import _self as dropdown %}

{% macro menu_links(items, level = 1) %}
  {% import _self as dropdown %}
  <ul class="dropdown-menu__menu hg:flex hg:w-full hg:flex-col hg:p-0 hg:md:w-auto hg:md:flex-row" data-level="{{ level }}">
    {% for item in items %}
      {% set title = item.title is not empty ? item.title : item.text %}
      {# Capture the rendered URL before testing it for emptiness, since it's a Drupal object under the hood.
      The - prefix and suffix prevent errant whitespace in the resulting `url` variable. #}
      {% set url %}
        {{- item.url -}}
      {% endset %}

      {% set item_classes =
        [
          'dropdown-menu__item',
          item.in_active_trail ? 'dropdown-menu__item--active-trail' : '',
          'hg:flex',
          'hg:flex-wrap',
          'hg:justify-between',
          'hg:md:flex-nowrap',
          'hg:w-full',
          'hg:md:w-auto',
          'hg:md:relative',
          'hg:md:max-w-[375px]'
        ]|filter(c => c is not empty)
      %}

      {% if item.attributes %}
        {% do item.attributes.addClass(item_classes) %}
        {% do item.attributes.setAttribute('data-level', level) %}
      {% else %}
        {% set item_attributes_string = 'class="' ~ (item_classes|join(' ')) ~ '" data-level="' ~ level ~ '"' %}
      {% endif %}

      <li {{ item.attributes ? : item_attributes_string }}>
        {% if url is not empty %}
          <a
            href="{{ url }}"
            class="dropdown-menu__link hg:flex hg:min-h-[44px] hg:shrink-1 hg:grow-1 hg:basis-0 hg:items-center hg:gap-1 hg:md:min-h-auto"
            data-level="{{ level }}"
          >
            {{ title }}
          </a>
        {% endif %}

        {% if item.below is not empty %}
          <button
            aria-label="{{ 'Expand @link'|t({
              '@link': title|striptags|trim
            }) }}"
            value="{{ menu_level }}"
            class="dropdown-menu__expand-button hg:flex hg:h-auto hg:min-h-[44px] hg:shrink-0 hg:grow-1 hg:basis-0 hg:cursor-pointer hg:appearance-none hg:items-center hg:justify-center hg:border-0 hg:bg-transparent hg:text-center hg:md:min-h-auto"
            data-level="{{ level }}"
          >
            <div
              class="dropdown-menu__expand-button-contents hg:flex hg:items-center hg:justify-center hg:gap-2 hg:md:w-auto"
              data-level="{{ level }}"
            >
              {% if url is empty %}
                <div class="dropdown-menu__expand-button-no-link-title hg:flex hg:items-center hg:gap-1" data-level="{{ level }}">
                  {{ title }}
                </div>
              {% endif %}

              <div
                class="dropdown-menu__expand-button-icon hg:z-1 hg:flex hg:h-full hg:w-[44px] hg:items-center hg:justify-center hg:md:h-auto hg:md:w-auto"
                data-level="{{ level }}"
              >
                {{ include('@mercury/components/dropdown-menu/assets/arrow.svg.twig') }}
              </div>
            </div>
          </button>

          {{ dropdown.menu_links(item.below, level + 1) }}
        {% endif %}
      </li>
    {% endfor %}
  </ul>
{% endmacro %}

{% set classes = 'dropdown-menu hg:flex hg:justify-start hg:relative' %}

{% set attributes = attributes ? attributes.addClass(classes) : ' class="' ~ classes ~ '"' %}

<nav {{ attributes }} aria-label="{{ menu_label }}">
  {# We call a macro which calls itself to render the full tree. @see http://twig.sensiolabs.org/doc/tags/macro.html #}
  {{ dropdown.menu_links(items) }}
</nav>
