{% load menu_tags i18n %}
<div class="fr-collapse fr-mega-menu"
     id="mega-menu-{{ menu.parent_menu_item.id }}"
     tabindex="-1">
  <div class="fr-container fr-container--fluid fr-container-lg">
    <button class="fr-link--close fr-link"
            aria-controls="mega-menu-{{ menu.parent_menu_item.id }}">{% translate "Close" %}</button>
    <div class="fr-grid-row fr-grid-row-lg--gutters">
      <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">{{ menu.parent_menu_item.menu_text }}</h4>
          {% if menu.description %}<p class="fr-hidden fr-displayed-lg">{{ menu.description|safe }}</p>{% endif %}
          {% if menu.main_link %}
            <a class="fr-link fr-fi-arrow-right-line fr-link--icon-right fr-link--align-on-content"
               href="{{ menu.main_link }}">{% translate "See the whole section" %}</a>
          {% endif %}
        </div>
      </div>
      {% for category in menu.get_categories %}
        <div class="fr-col-12 fr-col-lg-3">
          <h5 class="fr-mega-menu__category">
            <a class="fr-nav__link" href="#" target="_self">
              {% if category.category.heading %}
                {{ category.category.heading }}
              {% else %}
                {{ category.category.title }}
              {% endif %}
            </a>
          </h5>
          {% flat_menu category.category.handle template="sites_conformes_content_manager/menus/mega_menu_category.html" %}
        </div>
      {% endfor %}
    </div>
  </div>
</div>