{% sw_extends '@Storefront/storefront/layout/navigation/categories.html.twig' %}

{% block layout_navigation_categories %}

    {% set navigationMaxDepth = 3 %}

    {% if not level %}
        {% set level = 0 %}
    {% endif %}
    {% set activeId = page.header.navigation.active.id %}

    {% if page.product is defined %}
        {% set activePath = page.product.categoryTree %}
    {% else %}
        {% set activePath = page.header.navigation.active.path %}
    {% endif %}

    <div class="{% if level == 0 %}row {% endif %}navigation-flyout-categories is-level-{{ level }}">
        {% for treeItem in navigationTree %}
            {% set id = treeItem.category.id %}
            {% set name = treeItem.category.translated.name %}
            {% set link = category_url(treeItem.category) %}

            {% block layout_navigation_flyout_bar_category_link %}
                {% if category.type == 'page' %}
                    <a class="nav-link"
                        href="{{ seoUrl('frontend.navigation.page', { navigationId: category.id }) }}"
                        itemprop="url"
                        title="{{ name }}">
                        {% block layout_navigation_flyout_bar_category_link_text %}
                            {{ "general.toCategory"|trans|sw_sanitize }} {{ name }}
                            {% sw_icon 'arrow-right' style {
                                'color': 'primary',
                                'pack':'solid'
                            } %}
                        {% endblock %}
                    </a>
                {% endif %}
            {% endblock %}

            {% block layout_navigation_categories_item %}
                <div class="{% if level == 0 %}{% if navigationMedia %}col-4 {% else %}col-3 {% endif %}{% endif %}navigation-flyout-col">
                    {% block layout_navigation_categories_item_link %}
                        {% if treeItem.category.type == 'folder' %}
                            <div class="nav-item nav-link navigation-flyout-link is-level-{{ level }}"
                                 title="{{ name }}">
                                <span itemprop="name">{{ name }}</span>
                            </div>
                        {% else %}
                            <a class="nav-item nav-link navigation-flyout-link is-level-{{ level }}{% if id == activeId or id in activePath %} active{% endif %}"
                               href="{{ link }}"
                               itemprop="url"
                               {% if category_linknewtab(treeItem.category) %}target="_blank"{% endif %}
                               title="{{ name }}">
                                <span itemprop="name">{{ name }}</span>
                            </a>
                        {% endif %}
                    {% endblock %}

                    {% block layout_navigation_categories_recoursion %}
                        {% if level < navigationMaxDepth %}
                            {% sw_include '@Storefront/storefront/layout/navigation/categories.html.twig' with {
                                navigationTree: treeItem.children,
                                level: level + 1,
                                page: page
                            } only %}
                        {% endif %}
                    {% endblock %}
                </div>
            {% endblock %}
        {% endfor %}
    </div>
{% endblock %}