{% 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 products = this.showCategoryMenu ? this.shopProducts : this.allShopProducts %}
    {% set productCollection = this.productCollection %}

    <div {{ attributes.defaults({ 'data-scroll-target': 'content', class: 'theme-container theme-shop-layout' }) }}>
        {{ component('shop:Vacation', { config: config }) }}

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

        {{ component('shop:InformationBlocks', {
            zone: constant('CpCreation\\VitiCore\\Shop\\Model\\InformationBlock::ZONE_TOP'),
            class: config.enablePartnerCodeFront ? 'theme-shop-information-blocks--after-partner' : ''
        }) }}

        {% if categories|length > 0 or this.collectionSource %}
            {% if this.shouldDisplayTabs %}
                <div class="theme-shop-tabs">
                    {{ 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="{{ productCollection ? productCollection.name : (showCategoryMenu and category ? category.name : 'shop.title'|trans) }}">
                    {% for product in this.mobileBarProducts %}
                        <span data-mobile-bar-option data-value="{{ product.slug }}">{{ product.name }}</span>
                    {% endfor %}
                </div>

                {% if productCollection %}
                    <h2 data-scroll-target="shopHeading" class="theme-shop-heading">{{ productCollection.name }}</h2>
                    {% if productCollection.description|default('')|striptags|trim is not empty %}
                        <div class="theme-shop-collection-description">
                            {{ productCollection.description|raw }}
                        </div>
                    {% endif %}
                {% elseif showCategoryMenu %}
                    <h2 data-scroll-target="shopHeading" class="theme-shop-heading">
                        {{ 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="theme-shop-collection-description">
                            {{ category.shopCategoryMessage|raw }}
                        </div>
                    {% endif %}
                {% endif %}

                {{ component('shop:ProductGrid', {
                    products: products,
                    category: category,
                    showLoginWhenEmpty: not this.collectionSource
                }) }}

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

            {{ component('shop:LegalNotice') }}
        {% else %}
            <p class="theme-shop-empty">{{ 'shop.empty'|trans }}</p>
            {{ component('shop:InformationBlocks', {
                zone: constant('CpCreation\\VitiCore\\Shop\\Model\\InformationBlock::ZONE_BOTTOM'),
                class: 'theme-shop-information-blocks--bottom'
            }) }}
        {% endif %}
        {% endif %}
    </div>
{% endif %}
{% endif %}
