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

    {% if taxon.children|length > 0 %}
        <li class="nav-item dropdown" {{ sylius_test_html_attribute('menu-item') }}>
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                {{ taxon.name }}
            </a>
            <ul class="dropdown-menu">
                {% for child_taxon in taxon.children %}
                    {{ macros.dropdownItem(child_taxon) }}
                {% endfor %}
            </ul>
        </li>
    {% else %}
        <li class="nav-item">
            <a
                href="{{ path('sylius_shop_product_index', {'slug': taxon.slug, '_locale': taxon.translation.locale}) }}"
                class="nav-link" {{ sylius_test_html_attribute('menu-item') }}
            >{{ taxon.name }}</a>
        </li>
    {% endif %}
{% endmacro %}

{% macro dropdownItem(taxon) %}
    <li>
        <a class="dropdown-item" href="{{ path('sylius_shop_product_index', {'slug': taxon.slug, '_locale': taxon.translation.locale}) }}">
            {{ taxon.name }}
        </a>
    </li>
{% endmacro %}

{% import _self as macros %}

{% if taxons|length > 0 %}
    <nav class="navbar navbar-expand-lg">
        <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <i class="navbar-toggler-icon"></i>
        </button>

        <div class="collapse navbar-collapse justify-content-center" id="mainNavbar">
            <div class="navbar-nav gap-3" {{ sylius_test_html_attribute('menu') }}>
                {% for taxon in taxons %}
                    {{ macros.item(taxon) }}
                {% endfor %}
            </div>
        </div>
    </nav>
{% endif %}