{% if not this.collectionSource or this.productCollection %}
{% if template %}
    {% include template with { catalog: this } only %}
{% else %}
    {% set config = this.config %}
    {% set categories = this.categories %}
    {% set category = this.category %}
    {% set showCategoryMenu = this.showCategoryMenu %}
    {% set mobileBarProducts = this.mobileBarProducts %}

    <div {{ attributes.defaults({ 'data-scroll-target': 'content', class: 'bg-page max-w-large large:mx-auto relative mx-2 flex flex-col lg:mx-8' }) }}>
        {{ component('shop:Vacation', { config: config }) }}

        {% if not config.shopDisabledForVacation %}
        {% if config.enablePartnerCodeFront %}
            <div class="mt-10 px-4 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'),
            class: config.enablePartnerCodeFront ? 'mt-6 lg:mt-0' : ''
        }) }}

        {% if categories|length > 0 or this.collectionSource %}
            {% if this.shouldDisplayTabs %}
                <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: this.activeSlug,
                        route: route,
                        routeParam: routeParam,
                        frame: frame
                    }) }}
                </div>
            {% endif %}

            <turbo-frame id="{{ frame }}" 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 this.collectionSource %}
                    {% set productCollection = this.productCollection %}
                    {% if productCollection %}
                        <h2
                            data-scroll-target="shopHeading"
                            class="mx-auto mt-10 mb-20 flex items-center justify-center text-3xl md:text-4xl">
                            {{ productCollection.name }}
                        </h2>
                        {% if productCollection.description|default('')|striptags|trim is not empty %}
                            <div class="text-foreground/80 mx-auto -mt-12 mb-16 w-full max-w-3xl px-4 text-center text-sm leading-7 md:px-10 lg:text-base [&_p]:my-0">
                                {{ productCollection.description|raw }}
                            </div>
                        {% endif %}
                    {% endif %}

                    {{ component('shop:ProductGrid', {
                        products: this.shopProducts,
                        showLoginWhenEmpty: false
                    }) }}
                {% elseif showCategoryMenu %}
                    <h2
                        data-scroll-target="shopHeading"
                        class="mx-auto mt-10 mb-20 flex items-center justify-center text-3xl md:text-4xl">
                        {{ category ? category.name : 'shop.title'|trans }}
                    </h2>
                    {% if category and this.shopProducts|length > 0 and category.shopCategoryMessage|default('')|striptags|trim is not empty %}
                        <div class="text-foreground/80 mx-auto -mt-12 mb-16 w-full max-w-3xl px-4 text-center text-sm leading-7 md:px-10 lg:text-base [&_p]:my-0">
                            {{ category.shopCategoryMessage|raw }}
                        </div>
                    {% endif %}

                    {{ component('shop:ProductGrid', {
                        products: this.shopProducts,
                        category: category,
                        showLoginWhenEmpty: true
                    }) }}
                {% else %}
                    {% for shopProductGroup in this.shopProductGroups %}
                        {% set categoryGroup = shopProductGroup.category %}
                        {% set categoryProducts = shopProductGroup.products %}
                        <section class="{{ loop.first ? '' : 'pt-4 lg:pt-8' }}">
                            <h2
                                {% if loop.first %}data-scroll-target="shopHeading"{% endif %}
                                class="mx-auto mt-10 mb-20 flex items-center justify-center text-3xl md:text-4xl">
                                {{ categoryGroup.name }}
                            </h2>
                            {% if categoryProducts|length > 0 and categoryGroup.shopCategoryMessage|default('')|striptags|trim is not empty %}
                                <div class="text-foreground/80 mx-auto -mt-12 mb-16 w-full max-w-3xl px-4 text-center text-sm leading-7 md:px-10 lg:text-base [&_p]:my-0">
                                    {{ categoryGroup.shopCategoryMessage|raw }}
                                </div>
                            {% endif %}

                            {{ component('shop:ProductGrid', {
                                products: categoryProducts,
                                category: categoryGroup,
                                showLoginWhenEmpty: true
                            }) }}
                        </section>
                    {% endfor %}
                {% 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 %}
        {% endif %}
    </div>
{% endif %}
{% endif %}
