{% extends 'base.html.twig' %}
{% block title -%}
    {{- 'shop.title'|trans({}, 'meta') -}}
{%- endblock %}
{% block meta %}
    {{
    include('partials/seo.html.twig', {
        title_key: 'shop.title',
        description_key: 'shop.description',
        robots: 'index,follow'
    })
    }}
{% endblock meta %}
{% block header_top %}
    <twig:Image
        mapping="public"
        class="peer dark fixed -z-20 h-[100vh] max-h-[100svh] w-full overflow-hidden bg-transparent"
        img:class="min-safe-h-screen min-h[100vh] h-[100vh] w-full object-cover"
        lazy="{{ false }}"
        quality="{{ 50 }}"
        responsive="{{ true }}"
        path="images/header/shop.jpg"
        imageWidth="1800"
        imageHeight="1177" />
{% endblock %}
{% block main %}
    <div
        class="relative -z-10 mt-[-60px] flex h-screen min-h-[650px] flex-col items-center justify-center p-6 sm:p-10 xl:p-0">
        <div class="mx-auto max-w-xl">
            <h1 class="flex flex-col items-center text-center font-serif text-3xl tracking-widest text-white after:mt-6 after:mb-3 after:h-[2px] after:w-12 after:bg-white md:text-4xl lg:text-6xl lg:after:mt-10 lg:after:mb-6">
                {{ 'shop.title'|trans()|raw }}
            </h1>
            <div
                class="text-center font-medium text-white text-shadow-md lg:text-lg">
                {{ 'shop.baseline'|trans()|raw }}
            </div>
        </div>
    </div>
    <div data-scroll-target="content" class="bg-light max-w-large large:mx-auto relative mx-2 flex flex-col lg:mx-8">
        {% if config.enablePartnerCodeFront %}
            <div class="mt-10 px-6 md:px-10 lg:mt-20 lg:px-20">
                {{ component('shop:PartnerCode') }}
            </div>
        {% endif %}
        {{ component('shop:InformationBlocks', { zone: constant('CpCreation\\VitiCore\\Shop\\Model\\InformationBlock::ZONE_TOP') }) }}
        {% if categories|length > 0 %}
            {% if categories|length >= 2 %}
                <div class="mx-auto mt-10 flex w-full max-w-7xl flex-col justify-center gap-10 md:flex-row lg:mt-20">

                    {{ component('shop:Tabs', {
                        categories: categories,
                        activeSlug: app.request.attributes.get('slug') ?? (categories|first ? (categories|first).slug : '')
                    }) }}
                </div>
            {% endif %}

            <turbo-frame id="shop-content" data-scroll-target="shopFrame" data-turbo-action="advance">
                <div
                    class="hidden"
                    aria-hidden="true"
                    data-mobile-bar-source
                    data-mobile-bar-label="{{ category.name }}">
                    {% for product in shopProducts %}
                        <span data-mobile-bar-option data-value="{{ product.slug }}">{{ product.name }}</span>
                    {% endfor %}
                </div>
                <h2
                    data-scroll-target="shopHeading"
                    class="mx-auto mt-10 mb-20 flex items-center justify-center text-3xl md:text-4xl">
                    {{ category.name }}
                </h2>
                {% if category.description|default('')|striptags|trim is not empty %}
                    <div class="mx-auto -mt-12 mb-16 w-full max-w-3xl px-6 text-center text-sm leading-7 text-dark/80 md:px-10 lg:text-base [&_p]:my-0">
                        {{ category.description|raw }}
                    </div>
                {% endif %}
                {% if shopProducts|length > 0 %}
                    <div
                        class="my-10 grid gap-x-10 gap-y-20 px-6 md:grid-cols-2 md:px-10 lg:my-20 lg:gap-y-28 lg:px-20 xl:grid-cols-3">
                        {% for product in shopProducts %}
                            {# @var product \CpCreation\VitiCore\Product\Model\Product #}
                            <div id="{{ product.slug }}">
                                {{ component('cart:ItemForm',{ 'product' : product } ) }}
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="mx-auto my-10 grid w-full max-w-xl gap-x-6 gap-y-8 px-6 md:px-10 lg:my-20 lg:px-20">
                        {% if category.noGroupMatchMessage|default('')|striptags|trim is not empty %}
                            <div class="text-dark/80 text-center text-sm leading-7 [&_p]:m-0">
                                {{ category.noGroupMatchMessage | raw }}
                            </div>
                        {% endif %}
                        <a
                            href="{{ path('app_login', { _target_path: app.request.requestUri }) }}"
                            target="_top"
                            class="border-dark/15 text-dark hover:border-dark hover:bg-dark w-full border bg-white/80 px-6 py-4 text-center text-sm font-semibold tracking-[0.16em] uppercase transition hover:text-white">
                            {{ 'shop.group_code_login' | trans }}
                        </a>
                    </div>
                {% endif %}
                {{ component('shop:InformationBlocks', { zone: constant('CpCreation\\VitiCore\\Shop\\Model\\InformationBlock::ZONE_BOTTOM'), class: 'mb-10 lg:mb-20' }) }}
            </turbo-frame>
            {{ component('shop:LegalNotice', { class: 'max-w-7xl' }) }}
        {% else %}
            <p class="justify-center">Aucuns produits pour le moment</p>
            {{ component('shop:InformationBlocks', { zone: constant('CpCreation\\VitiCore\\Shop\\Model\\InformationBlock::ZONE_BOTTOM'), class: 'mb-10 lg:mb-20' }) }}
        {% endif %}
    </div>
{% endblock %}

{% block mobile_bottom_bar %}
    {% if categories|length > 0 %}
        <div
            data-scroll-target="mobileBar"
            class="border-gold/20 fixed inset-x-0 bottom-0 z-40 w-screen border-t bg-white/95 px-2 pt-3 pb-[calc(1rem+env(safe-area-inset-bottom))] opacity-0 shadow-[0_-10px_30px_rgba(56,56,56,0.08)] backdrop-blur-sm md:hidden"
            style="visibility: hidden; opacity: 0; transform: translateY(24px); pointer-events: none;"
            x-cloak>
            <label for="shop-product-select" class="sr-only" data-scroll-target="mobileLabel">
                {{ category.name }}
            </label>
            <select
                id="shop-product-select"
                data-scroll-target="mobileSelect"
                data-placeholder="{{ 'shop.navigate_cuvees'|trans }}"
                class="border-gold/30 bg-light text-dark w-full border px-2 py-1.5 text-xs tracking-[0.08em] normal-case outline-none"
                data-action="change->scroll#selectSection"
                {% if shopProducts|length == 0 %}
            disabled
                {% endif %}>
                <option value="">{{ 'shop.navigate_cuvees'|trans }}</option>
                {% for product in shopProducts %}
                    <option value="{{ product.slug }}">
                        {{ product.name }}
                    </option>
                {% endfor %}
            </select>
        </div>
    {% endif %}
{% endblock %}
