{% block layout_navbar %}
    <div class="container">
        {% set navbarOptions = {
            pathIdList: shopware.navigation.pathIdList
        } %}

        {% block layout_navbar_nav_element %}
            <nav class="navbar navbar-expand-lg main-navigation-menu"
                 id="main-navigation-menu"
                 itemscope="itemscope"
                 itemtype="https://schema.org/SiteNavigationElement"
                 data-navbar="true"
                 data-navbar-options="{{ navbarOptions|json_encode }}"
                 aria-label="{{ 'header.navigationAriaLabel'|trans|striptags }}"
            >
                <div class="collapse navbar-collapse" id="main_nav">
                    <ul class="navbar-nav main-navigation-menu-list flex-wrap">
                        {% set homeLabel = context.salesChannel.translated.homeName|default('general.homeLink'|trans) %}

                        {% block layout_navbar_menu_home %}
                            {% if context.salesChannel.translated.homeEnabled %}
                                <li class="nav-item nav-item-{{ context.salesChannel.navigationCategoryId }}">
                                    <a class="nav-link main-navigation-link home-link root nav-item-{{ context.salesChannel.navigationCategoryId }}-link"
                                       href="{{ path('frontend.home.page') }}"
                                       itemprop="url"
                                       title="{{ homeLabel|striptags }}">
                                        <span itemprop="name" class="main-navigation-link-text">{{ homeLabel|sw_sanitize }}</span>
                                    </a>
                                </li>
                            {% endif %}
                        {% endblock %}

                        {% block layout_navbar_menu_items %}
                            {% for treeItem in header.navigation.tree %}
                                {% set category = treeItem.category %}
                                {% set id = category.id %}
                                {% set name = category.translated.name %}
                                {% set hasChildren = treeItem.children|length > 0 %}
                                {% set itemSkipped = category.type == 'folder' and not hasChildren %}

                                {% block layout_navbar_menu_item %}
                                    {% if not itemSkipped %}
                                        <li class="nav-item nav-item-{{ id }} dropdown position-static">
                                            {% block layout_navbar_menu_item_link %}
                                                <a class="nav-link nav-item-{{ id }}-link root main-navigation-link p-2 {% if hasChildren %}dropdown-toggle{% else %}no-dropdown{% endif %}"
                                                   href="{{ category.seoUrl ?: '#' }}"
                                                   {% if hasChildren %}data-bs-toggle="dropdown"{% endif %}
                                                   {% if category.type != 'folder' and category.shouldOpenInNewTab %}target="_blank"{% endif %}
                                                   itemprop="url"
                                                   title="{{ name }}"
                                                >
                                                    {% block layout_navbar_menu_item_link_content %}
                                                        <span itemprop="name" class="main-navigation-link-text">{{ name }}</span>
                                                    {% endblock %}
                                                </a>
                                            {% endblock %}

                                            {% if hasChildren %}
                                                {% block layout_navbar_menu_item_children %}
                                                    <div class="dropdown-menu w-100 p-4">
                                                        {% sw_include '@Storefront/storefront/layout/navbar/content.html.twig' with {
                                                            themeIconConfig: themeIconConfig,
                                                            navigationTree: treeItem,
                                                            level: level+1,
                                                            page: page
                                                        } only %}
                                                    </div>
                                                {% endblock %}
                                            {% endif %}
                                        </li>
                                    {% endif %}
                                {% endblock %}
                            {% endfor %}
                        {% endblock %}
                    </ul>
                </div>
            </nav>
        {% endblock %}
    </div>
{% endblock %}