{% set products = this.products %}
{% set previousProduct = this.previousProduct %}
{% set nextProduct = this.nextProduct %}
{% set backToShopRouteParams = this.showCategoryMenu ? { slug: product.category.slug } : {} %}

{% if products|length > 1 %}
    <nav
        {{ attributes.defaults({
            class: 'mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-8 md:px-10',
            'aria-label': 'shop.product_navigation.label'|trans,
        }) }}
    >
        <ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3">
            {% for item in products %}
                {% set isCurrent = item.id == product.id %}
                <li>
                    <a
                        href="{{ path('shop_product', { categorySlug: item.category.slug, slug: item.slug }) }}"
                        class="text-link-muted transition hover:text-foreground {{ isCurrent ? 'font-semibold text-foreground underline underline-offset-4' }}"
                        data-turbo-frame="_top"
                        {% if isCurrent %}aria-current="page"{% endif %}
                    >
                        {{ item.name|raw }}
                    </a>
                </li>
            {% endfor %}
        </ul>

        <div class="flex flex-wrap items-center justify-between gap-4">
            <a
                href="{{ path('shop', backToShopRouteParams) }}"
                class="text-link-muted underline underline-offset-4 transition hover:text-foreground"
                data-turbo-frame="_top"
            >
                {{ 'shop.product_navigation.back_to_shop'|trans }}
            </a>

            <div class="flex items-center gap-4">
                {% if previousProduct %}
                    <a
                        href="{{ path('shop_product', { categorySlug: previousProduct.category.slug, slug: previousProduct.slug }) }}"
                        class="text-link-muted underline underline-offset-4 transition hover:text-foreground"
                        data-turbo-frame="_top"
                        rel="prev"
                    >
                        {{ 'shop.product_navigation.previous'|trans }}
                    </a>
                {% endif %}

                {% if nextProduct %}
                    <a
                        href="{{ path('shop_product', { categorySlug: nextProduct.category.slug, slug: nextProduct.slug }) }}"
                        class="text-link-muted underline underline-offset-4 transition hover:text-foreground"
                        data-turbo-frame="_top"
                        rel="next"
                    >
                        {{ 'shop.product_navigation.next'|trans }}
                    </a>
                {% endif %}
            </div>
        </div>
    </nav>
{% endif %}
