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

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

        <div class="product-collection__items">
            {% for product in products %}
                <article class="product-collection__item">
                    {% if product.image and product.image.path %}
                        <twig:Image
                            path="{{ product.image.path }}"
                            alt="{{ product.fullName|striptags }}"
                            class="product-collection__image"
                            row:class="w-full"
                            img:class="product-collection__image-element"
                            responsive="{{ false }}"
                            imageWidth="300"
                            imageHeight="300"
                        />
                    {% endif %}

                    <h3>{{ product.fullName ?: product.name }}</h3>

                    {% if product.description %}
                        <div class="product-collection__description">
                            {{ product.description|raw }}
                        </div>
                    {% endif %}
                </article>
            {% endfor %}
        </div>
    </section>
{% endif %}
