{% set catalog = this %}
{% set config = catalog.config %}
{% set categories = catalog.categories %}
{% set category = catalog.category %}
{% set showCategoryMenu = catalog.showCategoryMenu %}
{% set shopProducts = catalog.shopProducts %}
{% set mobileBarProducts = catalog.mobileBarProducts %}

<section
    {% if attributes is defined %}
        {{ attributes.defaults({
            class: 'mx-auto max-w-[1440px] px-4 py-20 md:px-16 md:py-24',
            'data-scroll-target': 'content'
        }) }}
    {% else %}
        class="mx-auto max-w-[1440px] px-4 py-20 md:px-16 md:py-24"
        data-scroll-target="content"
    {% endif %}
>
    {{ component('shop:Vacation', { config: config }) }}

    {% if not config.shopDisabledForVacation %}
    {% if config.enablePartnerCodeFront %}
        <div class="mb-12">
            {{ component('shop:PartnerCode') }}
        </div>
    {% endif %}

    {{ component('shop:InformationBlocks', {
        zone: constant('CpCreation\\VitiCore\\Shop\\Model\\InformationBlock::ZONE_TOP'),
        class: config.enablePartnerCodeFront ? 'mb-10' : ''
    }) }}

    {% if categories|length > 0 %}
        {% if catalog.shouldDisplayTabs %}
            <div class="mb-14">
                {{ component('shop:Tabs', {
                    categories: categories,
                    activeSlug: catalog.activeSlug,
                    route: 'shop',
                    routeParam: 'slug',
                    frame: 'shop-content'
                }) }}
            </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="{{ showCategoryMenu and category ? category.name : 'shop.title'|trans }}"
            >
                {% for product in mobileBarProducts %}
                    <span data-mobile-bar-option data-value="{{ product.slug }}">{{ product.name }}</span>
                {% endfor %}
            </div>

            {% if showCategoryMenu %}
                <div class="mb-14 text-center">
                    <span class="mb-4 block font-label text-[12px] font-semibold uppercase tracking-[0.24em] text-secondary">{{ 'theme.shop.collection.kicker'|trans }}</span>
                    <h2 data-scroll-target="shopHeading" class="font-display text-[40px] font-semibold [font-optical-sizing:auto] text-primary">
                        {{ category ? category.name : 'shop.title'|trans }}
                    </h2>
                </div>

                {% if category and shopProducts|length > 0 and category.shopCategoryMessage|default('')|striptags|trim is not empty %}
                    <div class="mx-auto mb-12 max-w-3xl text-center text-on-surface-variant [&_p]:my-0">
                        {{ category.shopCategoryMessage|raw }}
                    </div>
                {% endif %}

                {{ component('shop:ProductGrid', {
                    products: shopProducts,
                    category: category,
                    class: 'grid grid-cols-1 gap-x-12 gap-y-16 md:grid-cols-2 xl:grid-cols-3'
                }) }}
            {% else %}
                {% for shopProductGroup in catalog.shopProductGroups %}
                    {% set categoryGroup = shopProductGroup.category %}
                    {% set categoryProducts = shopProductGroup.products %}

                    <section class="{{ loop.first ? '' : 'pt-20 md:pt-24' }}">
                        <div class="mb-14 text-center">
                            <span class="mb-4 block font-label text-[12px] font-semibold uppercase tracking-[0.24em] text-secondary">{{ 'theme.shop.collection.kicker'|trans }}</span>
                            <h2 {% if loop.first %}data-scroll-target="shopHeading"{% endif %} class="font-display text-[40px] font-semibold [font-optical-sizing:auto] text-primary">
                                {{ categoryGroup.name }}
                            </h2>
                        </div>

                        {% if categoryProducts|length > 0 and categoryGroup.shopCategoryMessage|default('')|striptags|trim is not empty %}
                            <div class="mx-auto mb-12 max-w-3xl text-center text-on-surface-variant [&_p]:my-0">
                                {{ categoryGroup.shopCategoryMessage|raw }}
                            </div>
                        {% endif %}

                        {{ component('shop:ProductGrid', {
                            products: categoryProducts,
                            category: categoryGroup,
                            class: 'grid grid-cols-1 gap-x-12 gap-y-16 md:grid-cols-2 xl:grid-cols-3'
                        }) }}
                    </section>
                {% endfor %}
            {% endif %}

            {{ component('shop:InformationBlocks', {
                zone: constant('CpCreation\\VitiCore\\Shop\\Model\\InformationBlock::ZONE_BOTTOM'),
                class: 'mt-16'
            }) }}
        </turbo-frame>

        {{ component('shop:LegalNotice', { class: 'mt-16' }) }}
    {% else %}
        <p class="text-center text-on-surface-variant">{{ 'theme.shop.empty'|trans }}</p>
        {{ component('shop:InformationBlocks', {
            zone: constant('CpCreation\\VitiCore\\Shop\\Model\\InformationBlock::ZONE_BOTTOM'),
            class: 'mt-16'
        }) }}
    {% endif %}
    {% endif %}
</section>
