{% apply spaceless %}

{#
  Parameters:
  - "title": (string) (default: ''): Title
  - "close": (string) (default: ''): Close button label
  - "back": (string): (default: ''): Back button label
  - "group": (string) (default: 'group1'): 'group1' or 'group2' (DEPRECATED)
  - "icon_path": (string) (default: ''): Path to the icon sprite
  - "items": (associative array) (default: {}): The menu items - format: [
    {
      "label": (string) (default: '')
      "path": (string) (default: '')
      "is_current": (boolean) (optional),
      "trigger_aria_label" (string),
      "children": (associative array) (optional): [
        {
          "label": (string) (default: '')
          "path": (string) (default: '')
          "is_current": (boolean) (optional),
          "external": (boolean)
        }
      ]
    }
  ],
  - "max_lines": (int) (default: 2): Number of lines for each first level item label. Set it to zero to remove this behavior
  - "site_name": (string) (default: ''): Name of the website (used only on mobile)
  - "cta_link": (optional) (default: {}): Call to action link compatible with ECL Link component structure (used only on mobile)
  - "menu_link": (string) (default: ''): Href attribute of the menu toggler
  - "button_previous_label": (string) (default: ''): Label for the button to display previous items, in case of overflow (for screen readers)
  - "button_next_label": (string) (default: ''): Label for the button to display next items, in case of overflow (for screen readers)
  - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the nav element
  - "extra_attributes" (optional) (array) (default: []) Extra attributes for the nav element
    - "name" (string) Attribute name, eg. 'data-test'
    - "value" (optional) (string) Attribute value, eg: 'data-test-1'
#}

{# Internal properties #}

{% set _title = title|default('') %}
{% set _back = back|default('') %}
{% set _close = close|default('') %}
{% set _menu_link = menu_link|default('') %}
{% set _group = group|default('group1') %}
{% set _css_class = 'ecl-menu' %}
{% set _css_class = _css_class ~ ' ' ~ _css_class ~ '--' ~ _group %}
{% set _extra_attributes = '' %}
{% set _site_name = site_name|default('') %}
{% set _cta_link = cta_link|default({}) %}
{% set _button_previous_label = button_previous_label|default({}) %}
{% set _button_next_label = button_next_label|default({}) %}
{% set _icon_path = icon_path|default('') %}
{% set _max_lines = max_lines|default(2) %}

{% if extra_classes is defined and extra_classes is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}
  {% for attr in extra_attributes %}
    {% if attr.value is defined %}
      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') ~ '="' ~ attr.value|e('html_attr') ~ '"' %}
    {% else %}
      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') %}
    {% endif %}
  {% endfor %}
{% endif %}

<nav
  class="{{ _css_class }}"
  data-ecl-menu
  data-ecl-menu-max-lines="{{ _max_lines }}"
  data-ecl-auto-init="Menu"
  aria-expanded="false"
  role="navigation"
  {{ _extra_attributes|raw }}
>
  <div class="ecl-menu__overlay" data-ecl-menu-overlay></div>
  <div class="ecl-container ecl-menu__container">
    <a
      class="ecl-link ecl-link--standalone ecl-menu__open"
      href="{{ _menu_link }}"
      data-ecl-menu-open
    >
      {% include '@ecl/icon/icon.html.twig' with {
        icon: {
          size: 's',
          name: 'hamburger',
          path: _icon_path
        },
      } only %}
      {{- _title -}}
    </a>
    <section class="ecl-menu__inner" data-ecl-menu-inner>
      <header class="ecl-menu__inner-header">
        <button
          class="ecl-menu__close ecl-button ecl-button--text"
          type="submit"
          data-ecl-menu-close
        ><span class="ecl-menu__close-container ecl-button__container">
            {% include '@ecl/icon/icon.html.twig' with {
              icon: {
                path: _icon_path,
                name: 'close-filled',
                size: 's',
              },
              extra_classes: 'ecl-button__icon ecl-button__icon--before',
              extra_attributes: [{ name: 'data-ecl-icon' }],
            } only %}
            <span
              class="ecl-button__label"
              data-ecl-label="true">
                {{- _close -}}
            </span>
          </span>
        </button>
        <div class="ecl-menu__title">{{- _title -}}</div>
        <button
          data-ecl-menu-back
          type="submit"
          class="ecl-menu__back ecl-button ecl-button--text"
        >
          <span class="ecl-button__container">
            {% include '@ecl/icon/icon.html.twig' with {
              icon: {
                path: _icon_path,
                name: 'corner-arrow',
                size: 'xs',
                transform: 'rotate-270',
              },
              extra_classes: 'ecl-button__icon ecl-button__icon--before',
              extra_attributes: [{ name: 'data-ecl-icon' }],
            } only %}
            <span
              class="ecl-button__label"
              data-ecl-label
            >
              {{- _back -}}
            </span>
          </span>
        </button>
      </header>

      {% if _icon_path is not empty %}
        {% include '@ecl/button/button.html.twig' with {
          type: 'button',
          variant: 'ghost',
          icon_position: 'before',
          icon: {
            path: _icon_path,
            size: 's',
            transform: 'rotate-270',
            name: 'corner-arrow',
          },
          label: _button_previous_label,
          hide_label: true,
          extra_classes: 'ecl-menu__item ecl-menu__items-previous',
          extra_attributes: [
            { name: 'data-ecl-menu-items-previous' },
            { name: 'tabindex', value: '-1'},
          ],
        } only %}

        {% include '@ecl/button/button.html.twig' with {
          type: 'button',
          variant: 'ghost',
          icon_position: 'before',
          icon: {
            path: _icon_path,
            size: 's',
            transform: 'rotate-90',
            name: 'corner-arrow',
          },
          label: _button_next_label,
          hide_label: true,
          extra_classes: 'ecl-menu__item ecl-menu__items-next',
          extra_attributes: [
            { name: 'data-ecl-menu-items-next' },
            { name: 'tabindex', value: '-1'},
          ],
        } only %}
      {% endif %}

      <ul class="ecl-menu__list" data-ecl-menu-list>
      {% if items is defined and items is not empty and items is iterable %}
        {% for item in items %}
          {% if item is defined and item is not empty %}
            {% include 'themes/custom/ewrc_theme/components/twig-component-menu/ecl-menu-item.html.twig' with {
              item: item,
              icon_path: _icon_path,
            } only %}
          {% endif %}
        {% endfor %}
      {% endif %}
      </ul>
    </section>
  </div>
</nav>

{% endapply %}