{% block layout_main_navigation %}
    <div class="main-navigation"
         id="mainNavigation"
         data-flyout-menu="true">
        {% block layout_main_navigation_navbar %}
            <div class="container">
                {% block layout_main_navigation_menu %}
                    <nav class="nav main-navigation-menu"
                        itemscope="itemscope"
                        itemtype="http://schema.org/SiteNavigationElement">
                        {% set homeLabel = context.salesChannel.translated.homeName|default("general.homeLink"|trans) %}

                        {% block layout_main_navigation_menu_home %}
                            {% if context.salesChannel.translated.homeEnabled %}
                                <a class="nav-link main-navigation-link{% if controllerAction is same as('home') %} active{% endif %} home-link"
                                    href="{{ path('frontend.home.page') }}"
                                    itemprop="url"
                                    title="{{ homeLabel|striptags }}">
                                    <div class="main-navigation-link-text">
                                        <span itemprop="name">{{ homeLabel|sw_sanitize }}</span>
                                    </div>
                                </a>
                            {% endif %}
                        {% endblock %}

                        {% block layout_main_navigation_menu_items %}
                            {% set activePath = page.header.navigation.active.path %}

                            {% for treeItem in page.header.navigation.tree %}
                                {% set category = treeItem.category %}
                                {% set name = category.translated.name %}

                                {% block layout_main_navigation_menu_item %}
                                    {% if category.type == 'folder' %}
                                        <div class="nav-link main-navigation-link"
                                            {% if treeItem.children|length > 0 %}
                                                data-flyout-menu-trigger="{{ category.id }}"
                                            {% endif %}
                                              title="{{ name }}">
                                            <div class="main-navigation-link-text">
                                                <span itemprop="name">{{ name }}</span>
                                            </div>
                                        </div>
                                    {% else %}
                                        <a class="nav-link main-navigation-link{% if category.id == page.header.navigation.active.id or category.id in activePath %} active{% endif %}"
                                           href="{{ category_url(category) }}"
                                           itemprop="url"
                                           {% if treeItem.children|length > 0 %}data-flyout-menu-trigger="{{ category.id }}"{% endif %}
                                           {% if category_linknewtab(category) %}target="_blank"{% endif %}
                                           title="{{ name }}">
                                            <div class="main-navigation-link-text">
                                                <span itemprop="name">{{ name }}</span>
                                            </div>
                                        </a>
                                    {% endif %}
                                {% endblock %}
                            {% endfor %}
                        {% endblock %}
                    </nav>
                {% endblock %}
            </div>
        {% endblock %}

        {% block layout_main_navigation_menu_flyout_wrapper %}
            {% set navigationChildrenCount = 0 %}
            {% for treeItem in page.header.navigation.tree %}
                {% if treeItem.category.childCount > 0 %}
                    {% set navigationChildrenCount = navigationChildrenCount + 1 %}
                {% endif %}
            {% endfor %}

            {% if navigationChildrenCount > 0 %}
                {% block layout_main_navigation_menu_flyout_container %}
                    <div class="navigation-flyouts">
                        {% block layout_main_navigation_menu_flyouts %}
                            {% for treeItem in page.header.navigation.tree %}
                                {% if treeItem.children|length > 0 %}
                                    {% block layout_main_navigation_menu_flyout %}
                                        <div class="navigation-flyout"
                                             data-flyout-menu-id="{{ treeItem.category.id }}">
                                            <div class="container">
                                                {% block layout_main_navigation_menu_flyout_include %}
                                                    {% sw_include '@Storefront/storefront/layout/navigation/flyout.html.twig' with {navigationTree: treeItem, level: level+1, page: page} only %}
                                                {% endblock %}
                                            </div>
                                        </div>
                                    {% endblock %}
                                {% endif %}
                            {% endfor %}
                        {% endblock %}
                    </div>
                {% endblock %}
            {% endif %}
        {% endblock %}
    </div>
{% endblock %}