{% if items %}
  {% set html_id = id|default('main-menu-' ~ random()) %}
  <nav{{ attributes.addClass('fr-nav') }} role="navigation" aria-label="{{ menu_name }}" id="{{ html_id|clean_id }}">
    <ul class="fr-nav__list">
      {% if is_mega_menu %}
        {{ _self.mega_menu_links(items, attributes, 0, html_id) }}
      {% else %}
        {{ _self.menu_links(items, attributes, 0, html_id) }}
      {% endif %}
    </ul>
  </nav>
{% endif %}

{% macro menu_links(items, attributes, menu_level, menu_id) %}
  {% if items %}
    {% if menu_level == 0 %}
      {% for item in items %}
        {% if item.below or item.url %}
        {% set item_attributes = create_attribute(item.attributes|default({})) %}
        <li{{ item_attributes.addClass('fr-nav__item') }}>
          {% if item.below %}
            {% set item_id = menu_id ~ '-' ~ loop.index %}
            <button class="fr-nav__btn"
                    aria-expanded="false"
                    type="button"
                    aria-controls="{{ item_id }}"{% if item.in_active_trail %} aria-current="true"{% endif %}>
              {{ item.title }}
            </button>
              <div class="fr-collapse fr-menu" id="{{ item_id }}">
                {{ _self.menu_links(item.below, attributes, menu_level + 1) }}
              </div>
          {% else %}
            {{ _self.singlelink(item) }}
          {% endif %}
        </li>
        {% endif %}
      {% endfor %}
    {% else %}
      <ul class="fr-menu__list">
        {% for item in items %}
          {% if item.url %}
          {% set item_attributes = create_attribute(item.attributes|default({})) %}
          <li{{ item_attributes.addClass('fr-nav__item') }}>
            {{ _self.singlelink(item) }}
          </li>
          {% endif %}
        {% endfor %}
      </ul>
    {% endif %}
  {% endif %}
{% endmacro %}

{% macro mega_menu_links(items, attributes, menu_level, menu_id, index, parent) %}
  {% if items %}
    {% if menu_level == 0 %}
      {% for item in items %}
        {% if item.below or item.url %}
        {% set item_attributes = create_attribute(item.attributes|default({})) %}
        <li{{ item_attributes.addClass('fr-nav__item') }}>
          {% if item.below %}
            {% set item_id = menu_id ~ '-' ~ loop.index %}
            <button class="fr-nav__btn" aria-expanded="false" type="button"
                    aria-controls="{{ item_id }}"{% if item.in_active_trail %} aria-current="true"{% endif %}>
              {{ item.title }}
            </button>
            <div class="fr-collapse fr-mega-menu" id="{{ item_id }}" tabindex="-1">
              {{ _self.mega_menu_links(item.below, attributes, menu_level + 1, menu_id, item_id, item) }}
            </div>
          {% else %}
            {{ _self.singlelink(item) }}
          {% endif %}
        </li>
        {% endif %}
      {% endfor %}
    {% elseif menu_level == 1 %}
      <div class="fr-container fr-container--fluid fr-container-lg">
        <button class="fr-btn fr-btn--close" aria-controls="{{ index }}" title="{{ 'Close'|t }}" type="button">{{ 'Close'|t }}</button>
        <div class="fr-grid-row fr-grid-row-lg--gutters">
          {% if parent.content and parent.content.extra_title %}
            <div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
              <div class="fr-mega-menu__leader">
                <h4 class="fr-h4 fr-mb-2v">{{ parent.content.extra_title }}</h4>
                {% if parent.content.extra_description %}
                  <p class="fr-hidden fr-unhidden-lg">{{ parent.content.extra_description }}</p>
                {% endif %}
                {% if parent.content.extra_link %}
                  {{ include('ui_suite_dsfr:link', {
                    label: parent.content.extra_link.label,
                    icon: {pack_id: 'dsfr', icon_id: 'arrow-right-line'},
                    icon_position: 'right',
                    url: parent.content.extra_link.url,
                    attributes: {class: 'fr-link--align-on-content'},
                  }, with_context: false) }}
                {% endif %}
              </div>
            </div>
          {% endif %}
          {% for item in items %}
            {% if item.below or item.url %}
            <div class="fr-col-12 fr-col-lg-3">
              <h5 class="fr-mega-menu__category">
                {% if not item.url %}
                  <span class="fr-nav__link">{{ item.title }}</span>
                {% else %}
                  {{ _self.singlelink(item) }}
                {% endif %}
              </h5>
              {% if item.below %}
                {{ _self.mega_menu_links(item.below, attributes, menu_level + 2, menu_id) }}
              {% endif %}
            </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    {% else %}
      <ul class="fr-mega-menu__list">
        {% for item in items %}
          {% if item.url %}
            {% set item_attributes = create_attribute(item.attributes|default({})) %}
          <li{{ item_attributes }}>
            {{ _self.singlelink(item) }}
          </li>
          {% endif %}
        {% endfor %}
      </ul>
    {% endif %}
  {% endif %}
{% endmacro %}

{% macro singlelink(item) %}
  {% set link_attributes = create_attribute(item.link_attributes|default({})).addClass('fr-nav__link') %}
  {% set link_attributes = item.url ? link_attributes.setAttribute('href', item.url) : link_attributes %}
  {% if link_attributes.target == '_blank' %}
    {% set link_attributes = link_attributes.setAttribute('title', '@title - new window'|t({'@title': link_attributes.title ?: item.title})) %}
  {% endif %}
  {% if item.in_active_trail %}
    {% set link_attributes = link_attributes.setAttribute('aria-current', 'page') %}
  {% endif %}
  <a{{ link_attributes }}>{{ item.title }}</a>
{% endmacro %}
