<div
    x-data="{ active: '{{ activeSlug }}' }"
    class="shop-tabs-splide splide relative min-w-0 overflow-hidden"
    role="group"
    aria-label="{{ 'theme.shop.tabs.label'|trans }}"
    data-controller="shop-tabs"
>
    <ul class="splide__pagination !static mb-4 flex items-center justify-center gap-2"></ul>
    <div class="splide__track overflow-hidden">
        <div class="splide__list">
            {% for category in categories %}
                <div class="splide__slide !w-auto">
                    <a
                        href="{{ path(route, this.routeParameters(category)) }}"
                        {% if frame %}data-turbo-frame="{{ frame }}"{% endif %}
                        data-shop-tabs-link
                        x-on:click="active = '{{ category.slug }}'"
                        {% if category.slug == activeSlug %}data-shop-tabs-active="true"{% endif %}
                        :class="active === '{{ category.slug }}' ? 'bg-primary text-white border-primary' : 'bg-white text-primary border-primary/15 hover:border-primary/50'"
                        class="block border px-5 py-3 font-label text-[12px] uppercase tracking-[0.18em] whitespace-nowrap transition-all duration-200"
                    >
                        {{ category.name }}
                    </a>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
