{% macro item(taxon, lvl) %}
    {% import _self as macros %}

    <li {% if taxon.children|length > 0 %}class="has-submenu"{% endif %}>

        <div class="menu-title title-menu-lvl{{ lvl }}">
            <a class="menu-link" href="{{ path('sylius_shop_product_index', {'slug': taxon.slug, '_locale': taxon.translation.locale}) }}" {{ sylius_test_html_attribute('menu-item') }}>
                {{ taxon.name }}
            </a>
            {% if taxon.children|length > 0 %}
                <span class="menu-link-icon"></span>
            {% endif %}
        </div>

        {% if taxon.children|length > 0 %}
            <div class="menu-block">
                <div class="container">
                    <div class="menu-back">
                        <span class="menu-back-icon"></span>
                        <span class="menu-back-link">
                            {{ taxon.name }}
                        </span>
                    </div>

                    <div class="row">
                        <div class="col-12 col-lg-9 no-position-mobile">
                            <ul class="menu-lvl{{ lvl+1 }}">
                                {% for childTaxon in taxon.children %}
                                    {{ macros.item(childTaxon, lvl+1) }}
                                {% endfor %}
                            </ul>
                            <a class="menu-link menu-see-all" href="{{ path('sylius_shop_product_index', {'slug': taxon.slug, '_locale': taxon.translation.locale}) }}">
                                {{ 'app.ui.menu.see_all'|trans }}
                                {% include '@SyliusShop/Icons/fleche.html.twig' %}
                            </a>
                        </div>
                        <div class="col-lg-3 d-none d-lg-block menu-image">
                            {{ sylius_template_event('sylius.shop.taxon.horizontal_menu.cms', {'taxon': taxon}) }}

                            {% if lvl==1 %}
                                <a class="menu-link menu-see-all-tablet" href="{{ path('sylius_shop_product_index', {'slug': taxon.slug, '_locale': taxon.translation.locale}) }}">
                                    {{ 'app.ui.menu.see_all_section'|trans }}
                                    {% include '@SyliusShop/Icons/fleche.html.twig' %}
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </li>

{% endmacro %}

{% import _self as macros %}

{% if taxons|length > 0 %}
<ul class="main-menu menu-lvl1" {{ sylius_test_html_attribute('menu') }}>
    {% for taxon in taxons %}
        {{ macros.item(taxon, 1) }}
    {% endfor %}
</ul>
{% endif %}
