{% load menu_tags %}
<div class="design-system-collapse design-system-mega-menu"
     id="mega-menu-{{ menu.parent_menu_item.id }}"
     tabindex="-1">
    <div class="design-system-container design-system-container--fluid design-system-container-lg">
        <button class="design-system-link--close design-system-link"
                aria-controls="mega-menu-{{ menu.parent_menu_item.id }}">Fermer</button>
        <div class="design-system-grid-row design-system-grid-row-lg--gutters">
            <div class="design-system-col-12 design-system-col-lg-8 design-system-col-offset-lg-4--right">
                <div class="design-system-mega-menu__leader">
                    <h4 class="design-system-h4 design-system-mb-2v">{{ menu.title }}</h4>
                    {% if menu.description %}<p class="design-system-hidden design-system-displayed-lg">{{ menu.description|safe }}</p>{% endif %}
                    {% if menu.main_link %}
                        <a class="design-system-link design-system-fi-arrow-right-line design-system-link--icon-right design-system-link--align-on-content"
                           href="{{ menu.main_link }}">Voir toute la rubrique</a>
                    {% endif %}
                </div>
            </div>
            {% for category in menu.get_categories %}
                <div class="design-system-col-12 design-system-col-lg-3">
                    <h5 class="design-system-mega-menu__category">
                        <a class="design-system-nav__link" href="#" target="_self">
                            {% if category.category.heading %}
                                {{ category.category.heading }}
                            {% else %}
                                {{ category.category.title }}
                            {% endif %}
                        </a>
                    </h5>
                    {% comment %} {% include_block category.category.handle template="menus/mega_menu_category.html" %}  {% endcomment %}
                    {% flat_menu category.category.handle template="menus/mega_menu_category.html" %} 
                </div>
            {% endfor %}
        </div>
    </div>
</div>
