{% set no_image = "/sites/default/images/placeholders/no-image-items.png" %}

{% if (products|length) > 0 %}
    <ul class="productList browseProducts">
        {% for product in products %}
            {% set price = product.price %}
            {% set sale_price = product.sale_price %}
            {% set discount = null %}
            {% if sale_price and sale_price != price and sale_price < price %}
                {% set discount = ((price - sale_price) / price * 100)|round %}
            {% endif %}
            {% set display_price = sale_price ? sale_price : price %}
            {% set default_size_id = (product.recommended_size_id ?? 0) > 0 ? product.recommended_size_id : false %}

            <li>
                <div class="productListCard">
                    <a href="{{ product.url }}" class="productListCard__image">
                        {% if discount %}
                            <span class="productListCard__off">-{{ discount }}% off</span>
                        {% endif %}

                        {% if product.image %}
                            <img class="lazy" data-src="{{ product.image }}" alt="{{ product.name }} image" />
                            <noscript>
                                <img src="{{ product.image }}" alt="{{ product.name }} image" />
                            </noscript>
                        {% else %}
                            <img class="lazy" data-src="{{ no_image }}" alt="Empty image of {{ product.name }}" />
                            <noscript>
                                <img src="{{ no_image }}" alt="Empty image of {{ product.name }}" />
                            </noscript>
                        {% endif %}
                    </a>

                    <div class="productListCard__info">
                        {% if product.name %}
                            <h4 class="productListCard__name">
                                <a href="{{ product.url }}" class="productListCard__link">{{ product.name }}</a>
                            </h4>
                        {% endif %}
                        {% if price or sale_price %}
                            <div class="productListCard__price">
                                {% if (product.sizes|length) > 1 %}
                                    <span>From</span>
                                {% endif %}
                                {{ display_price|multi_currency|raw }}
                            </div>
                        {% endif %}
                    </div>

                    <add-to-basket
                        :ajax-add-to-basket="$store.state.minibasket.productCardsQuickAdd"
                        :basket-button-data="{{ product.basket_button_data|json_encode }}"
                        :browse-page="true"
                        :product="{{ product|json_encode }}"
                        :default-size-selected-id="{{ default_size_id|json_encode }}"
                        :single-size-select="true"
                        :large-button="false"
                        :show-more-info-button="false"
                        :show-quantity-select-overwrite="false"
                        button1Class="buttonOutlined"
                    ></add-to-basket>
                </div>
            </li>
        {% endfor %}
    </ul>
{% else %}
    <div class="noProducts">
        <h4 class="noProductsTitle">No products found</h4>
    </div>
{% endif %}
