{% set collection = this.productCollection %}
{% set products = this.products %}

{% if collection and products|length > 0 %}
    <section {{ attributes.defaults({ class: 'theme-variant-collection' }) }}>
        {% set heading = title|default(collection.name) %}
        {% if heading %}
            <h2>{{ heading }}</h2>
        {% endif %}

        <div class="theme-cuvee-grid">
            {% for product in products %}
                {% set productColor = product.color ?: '#d3ad74' %}
                {% set productHref = product.slug ? path('cuvee_detail', { slug: product.slug }) : path('cuvees') %}
                {% set productTitle = product.fullName ?: product.name %}
                <article class="theme-cuvee-item">
                    <div class="theme-cuvee-item-img">
                        <a href="{{ productHref }}"
                           data-turbo-frame="cuvees-content"
                           title="{{ 'cuvee.button_item'|trans({'%cuvee%': productTitle}) }}">
                            {% if product.image and product.image.path %}
                                <twig:Image
                                    path="{{ product.image.path }}"
                                    alt="{{ productTitle|striptags }}"
                                    class="theme-cuvee-item-picture"
                                    img:class="theme-cuvee-item-picture__image"
                                    responsive="{{ false }}"
                                    imageWidth="300"
                                    imageHeight="500"
                                />
                            {% endif %}
                            <span class="theme-cuvee-item-square theme-hover-link-effect-3" style="background-color: {{ productColor }}"></span>
                        </a>
                    </div>

                    <div class="theme-cuvee-item-info">
                        <h3>{{ product.name|raw }}</h3>
                        {% if product.quality %}
                            <h4>{{ product.quality|raw }}</h4>
                        {% endif %}
                        {% if product.otherText1 %}
                            <p>{{ product.otherText1|raw }}</p>
                        {% endif %}
                        <a class="theme-button-stroke theme-hover-link-effect"
                           style="border-color: {{ productColor }}"
                           href="{{ productHref }}"
                           data-turbo-frame="cuvees-content"
                           title="{{ 'cuvee.button_item'|trans({'%cuvee%': productTitle}) }}">
                            {{ 'cuvee.button'|trans }}
                        </a>
                    </div>
                </article>
            {% endfor %}
        </div>
    </section>
{% endif %}
