{% macro categoryItem(taxon) %}
<div class="col col-md-4 col-lg-3 col-xl-2 mb-4">
    <div class="category-card w-100 text-center px-1 px-lg-2 px-xxl-3 mx-auto" style="min-width: 165px">
        <div class="category-card-body">
            <a class="d-block text-decoration-none" href="{{ path('sylius_shop_product_index', {'slug': taxon.slug, '_locale': taxon.translation.locale}) }}">
                <div class="bg-body-tertiary rounded-pill mb-3 mx-auto" style="max-width: 164px  ; max-height: 164px ">
                    {% if taxon.images|length > 0 %}
                    {% set image = taxon.images|first %}
                    <img src="{{ image.path|imagine_filter('sylius_shop_product_thumbnail') }}" class="rounded-pill" alt="{{ taxon.name }} "style="max-width: 164px  ; max-height: 164px ">

                    {% endif %}
                </div>
                <h3 class="category-card-title h6 text-truncate">{{ taxon.name }}</h3>
            </a>
            <ul class="category-card-list nav w-100 flex-column gap-1 pt-3">
                {% for child in taxon.children %}
                <li class="w-100">
                    <a class="nav-link justify-content-center min-w-0 w-100 fw-normal hover-effect-underline p-0" href="{{ path('sylius_shop_product_index', {'slug': child.slug, '_locale': child.translation.locale}) }}">
                        <span class="text-truncate">{{ child.name }}</span>
                    </a>
                </li>

                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endmacro %}

{% import _self as macros %}

{% if taxons|length > 0 %}
<section class="container mt-5">
    <div class="overflow-x-auto pt-xxl-3" data-simplebar data-simplebar-auto-hide="false">
        <div class="row flex-nowrap flex-md-wrap justify-content-md-center g-0 gap-4 gap-md-0">
            {% for taxon in taxons %}
            {{ macros.categoryItem(taxon) }}
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}