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


{% block layout_navigation_categories %}
    {% set navigationMaxDepth = 0 %}

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

    <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 = treeItem.category.externalLink %}


            {% 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 {% if treeItem.category.media.fileExtension == 'svg' %}has-icon {% endif%}is-level-{{ level }}{% if id is same as(activeId) %} active{% endif %}"
                               href="{% if link %}{{ link }}{% else %}{{ seoUrl('frontend.navigation.page', { navigationId: id }) }}{% endif %}"
                               itemprop="url"
                               title="{{ name }}">
                                {% if treeItem.category.media.fileExtension == 'svg' %}
                                    <img class="nav-item-icon" src="{{ treeItem.category.media.url }}" alt="" />
                                {% endif %}

                                <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 %}
