<div
  x-data="{ active: '{{ activeSlug }}' }"
  class="shop-tabs-splide splide relative mx-2 min-w-0 overflow-hidden lg:mx-8"
  role="group"
  aria-label="Catégories boutique"
  data-controller="shop-tabs">
  <ul class="splide__pagination !static mb-3 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
            data-turbo-frame="shop-content"
            data-shop-tabs-link
            href="{{ path('shop', { slug: category.slug }) }}"
            x-on:click="active = '{{ category.slug }}'"
            {% if category.slug == activeSlug %}
              data-shop-tabs-active="true"
            {% endif %}
            :class="
              active === '{{ category.slug }}'
              ? 'font-medium text-black border-b-2 border-black'
              : 'text-gray-500 border-b-2 border-transparent'
            "
            class="block pb-2 text-lg whitespace-nowrap transition-colors duration-200">
            {{ category.name }}
          </a>
        </div>
      {% endfor %}
    </div>
  </div>
</div>
