{% set products = this.products %}
{% set currentIndex = this.currentIndex %}
{% set previousProduct = this.previousProduct %}
{% set nextProduct = this.nextProduct %}
{% set showCategoryMenu = this.showCategoryMenu|default(true) %}
{% set backToShopRouteParams = showCategoryMenu ? { slug: product.category.slug } : {} %}

{% if products|length > 1 %}
    <section {{ attributes.defaults({ class: 'space-y-8' }) }}>
        <div
            class="product-navigation splide min-w-0"
            data-controller="product-navigation"
            aria-label="{{ 'shop.navigate_cuvees'|trans }}"
            tabindex="0"
        >
            <div class="product-navigation__track splide__track overflow-hidden border-b border-[#8A5A34]/35">
                <ul class="splide__list pb-4">
                    {% for item in products %}
                        {% set isCurrent = item.id == product.id %}
                        <li class="splide__slide min-w-40 md:min-w-48">
                            <a
                                href="{{ path('shop_product', { categorySlug: item.category.slug, slug: item.slug }) }}"
                                class="product-navigation__item group relative flex flex-col items-center gap-2 px-2 pb-3 text-center transition"
                                {% if isCurrent %}data-product-navigation-target="active" aria-current="page"{% endif %}
                            >
                                {% if isCurrent %}
                                    <span class="absolute inset-x-0 -bottom-[17px] h-[3px] bg-[#8A5A34]"></span>
                                {% endif %}
                                <span class="font-display text-[20px] leading-tight [font-optical-sizing:auto] {% if isCurrent %}text-primary{% else %}text-primary/55 group-hover:text-primary/80{% endif %}">
                                    {{ item.name|raw }}
                                </span>
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <a
                href="{{ path('shop', backToShopRouteParams) }}"
                class="inline-flex items-center gap-2 border border-primary/15 bg-white px-4 py-3 font-label text-[11px] font-semibold uppercase tracking-[0.18em] text-primary transition hover:border-primary hover:bg-primary hover:text-white"
            >
                <span aria-hidden="true">&larr;</span>
                {{ 'shop.product.back_to_shop'|trans }}
            </a>

            <div class="flex flex-wrap items-center gap-3">
                {% if previousProduct %}
                    <a
                        href="{{ path('shop_product', { categorySlug: previousProduct.category.slug, slug: previousProduct.slug }) }}"
                        class="inline-flex h-12 w-12 items-center justify-center rounded-full border border-primary/12 bg-white text-primary transition hover:border-primary hover:bg-primary hover:text-white"
                        aria-label="{{ 'theme.shop.product.previous'|trans }}"
                    >
                        <span aria-hidden="true">&larr;</span>
                    </a>
                {% endif %}
                {% if nextProduct %}
                    <a
                        href="{{ path('shop_product', { categorySlug: nextProduct.category.slug, slug: nextProduct.slug }) }}"
                        class="inline-flex h-12 w-12 items-center justify-center rounded-full border border-primary/12 bg-white text-primary transition hover:border-primary hover:bg-primary hover:text-white"
                        aria-label="{{ 'theme.shop.product.next'|trans }}"
                    >
                        <span aria-hidden="true">&rarr;</span>
                    </a>
                {% endif %}
            </div>
        </div>
    </section>
{% endif %}
