{% if products|length > 0 %}
    <div {{ attributes.defaults({ class: 'my-10 grid gap-x-10 gap-y-20 px-4 md:grid-cols-2 md:px-10 lg:my-20 lg:gap-y-28 lg:px-20 xl:grid-cols-3' }) }}>
        {% for product in products %}
            {# @var product \CpCreation\VitiCore\Product\Model\Product #}
            {% set reviewSummary = this.getReviewSummary(product) %}
            <div id="{{ product.slug }}">
                {{ component('cart:ItemForm', {
                    product: product,
                    reviewRatingValue: reviewSummary ? reviewSummary.ratingValue : null,
                    reviewCount: reviewSummary ? reviewSummary.reviewCount : 0,
                    reviewsEnabled: this.reviewsEnabled
                }) }}
            </div>
        {% endfor %}
    </div>
{% else %}
    <div {{ attributes.without('class') }} class="mx-auto my-10 flex w-full max-w-2xl flex-col items-center gap-6 px-4 text-center md:px-10 lg:my-20">
        {% if category and category.noGroupMatchMessage|default('')|striptags|trim is not empty %}
            <div class="max-w-xl text-[16px] leading-8 text-on-surface-variant [&_p]:m-0">
                {{ category.noGroupMatchMessage|raw }}
            </div>
        {% endif %}

        {% if showLoginWhenEmpty %}
            <a
                href="{{ path('app_login', { _target_path: app.request.requestUri }) }}"
                target="_top"
                class="inline-flex min-h-[50px] w-full items-center justify-center border border-primary/20 bg-transparent px-8 py-3 font-label text-[12px] font-semibold uppercase tracking-[0.18em] text-primary transition hover:border-primary hover:bg-primary hover:text-white sm:w-auto">
                {{ 'shop.group_code_login'|trans }}
            </a>
        {% endif %}
    </div>
{% endif %}
