{% 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.defaults({ class: 'mx-auto my-10 grid w-full max-w-xl gap-x-6 gap-y-8 px-4 md:px-10 lg:my-20 lg:px-20' }) }}>
        {% if category and category.noGroupMatchMessage|default('')|striptags|trim is not empty %}
            <div class="text-foreground/80 text-center text-sm leading-7 [&_p]:m-0">
                {{ category.noGroupMatchMessage|raw }}
            </div>
        {% endif %}

        {% if showLoginWhenEmpty %}
            <a
                href="{{ path('app_login', { _target_path: app.request.requestUri }) }}"
                target="_top"
                class="border-foreground/15 text-foreground hover:border-foreground hover:bg-foreground w-full border bg-surface/80 px-6 py-4 text-center text-sm font-semibold tracking-status uppercase transition hover:text-on-foreground">
                {{ 'shop.group_code_login'|trans }}
            </a>
        {% endif %}
    </div>
{% endif %}
