<div
    x-data="{ active: '{{ activeSlug }}' }"
    class="shop-tabs-splide splide"
    role="group"
    aria-label="{{ 'shop.categories_navigation'|trans }}"
    data-controller="shop-tabs">
    <ul class="splide__pagination"></ul>
    <div class="splide__track">
        <div class="splide__list">
            {% for category in categories %}
                <div class="splide__slide">
                    <a
                        {% if frame %}
                            data-turbo-frame="{{ frame }}"
                        {% endif %}
                        data-shop-tabs-link
                        href="{{ path(route, this.routeParameters(category)) }}"
                        x-on:click="active = '{{ category.slug }}'"
                        {% if category.slug == activeSlug %}
                            data-shop-tabs-active="true"
                        {% endif %}
                        :class="active === '{{ category.slug }}' ? 'is-active' : ''"
                        class="shop-tab-link">
                        {{ category.name }}
                    </a>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
