<div class="grid-x grid-margin-x grid-margin-y small-up-1 medium-up-1 large-up-2 text-center align-center"
     data-equalizer>
    {% set priceDefault = null %}
    {% for item in products %}
        {% set soldOut = item.soldOut %}
        {% set classRibbon = "hidden" %}
        {% set ribbonColor = false %}
        {% if item.secondImage is not null %}
            {% set path = item.secondImage.path %}
        {% else %}
            {% set path = item.image.path %}
        {% endif %}
        {% if item.ribbonCustom %}
            {% set classRibbon = false %}
            {% if item.ribbonCustomColor %}
                {% set ribbonColor = item.ribbonCustomColor %}
            {% endif %}
            {% set classRibbonText = item.ribbonCustom %}
        {% else %}
            {% set classRibbonText = false %}
            {% if item.new %}
                {% set classRibbon = "new" %}
                {% set classRibbonText = "shop.new" %}
            {% endif %}
            {% for variant in item.variants %}
                {% if variant.byDefault %}
                    {% if variant.priceDiscount is not null %}
                        {% set classRibbon = "promo" %}
                        {% set classRibbonText = "shop.promo" %}
                    {% endif %}
                    {% if ((variant.soldOut or soldOutWithStock(variant)) and item.variants|length < 2) or item.soldOut   %}
                        {% set classRibbon = "soldout" %}
                        {% set classRibbonText = "shop.soldout" %}
                        {% set soldOut = true %}
                    {% endif %}
                {% endif %}
            {% endfor %}
        {% endif %}
        {% if item.selectVariant %}
            {% set selectBox = item.selectVariant  %}
        {% else %}
            {% set selectBox = 'shop.select_volume'|trans %}
        {% endif %}
        {% set selectedId = item.variants[0].id %}
        <article {% if viewShop %} itemscope itemtype="http://schema.org/Product" {% endif %}
                class="cell element-item {% if item.category %}{{ item.category.slug }} {% endif %}" {% if item.enableColor %}style="--color-border:{{ item.color }};"{% endif %}>
            <div class="ribbon {% if classRibbon %}{{ classRibbon }}{% endif %}">
                <span {% if ribbonColor %}style="background-color: {{ ribbonColor }};"{% endif %}>{% if classRibbonText %}{{ classRibbonText|trans|raw }}{% endif %}</span>
            </div>
            <div class="grid-x grid-margin-x cuvee">
                <div class="cell small-12 medium-6 text-center img-cuvee">
                    {% if config.enableAwardShop %}
                        <div class="awards">
                            {% if config.maxAwardsVisibleInShop %}
                                {% set countRest = 0 %}
                                {% for award in item.awards %}
                                    {% if loop.index <= config.maxAwardsVisibleInShop %}
                                        <img src="{{ asset(award.image.path)|imagine_filter('relative_heighten_100_filter') }}"
                                             alt="{{ award.title }}" data-tooltip-js
                                             title="{{ award.title }} - {{ award.description }}">
                                    {% else %}
                                        {% set countRest = countRest + 1 %}
                                    {% endif %}
                                {% endfor %}
                                {% if countRest > 0 %}
                                    {% set transDetail = 'shop.details'|trans %}
                                    <div class="countRest-award" data-tooltip-js
                                         title="{{ 'shop.awardDetails'|trans({'%infos%': transDetail}) }}">
                                        + {{ countRest }}</div>
                                {% endif %}
                            {% else %}
                                {% for award in item.awards %}
                                    <img src="{{ asset(award.image.path)|imagine_filter('relative_heighten_100_filter') }}"
                                         alt="{{ award.title }}" data-tooltip-js
                                         title="{{ award.title }} - {{ award.description }}">
                                {% endfor %}
                            {% endif %}
                        </div>
                    {% endif %}
                    <img class="align-center"
                         src="{{ asset(path) | imagine_filter('relative_heighten_586_filter') }}"
                         alt="{{ item.name }} {% if item.quality %}{{ item.quality }}{% endif %}">
                </div>
                <div class="cell small-12 medium-6">
                    <div class="article-info" data-product="{{ item.id }}" data-equalizer-watch>
                        <div class="cuvee-name text-right">
                            <h6 class="name" {% if item.enableColor %}style="--color-cuvee:{{ item.color }};"{% endif %}>{% if item.header %}{{ item.header|raw }}{% endif %} {{ item.name|raw }}</h6>
                            <span class="quality" {% if item.enableColorQuality %}style="--color-border:{{ item.color }};"{% endif %}>{% if item.quality %}{{ item.quality|raw }}{% endif %} </span>
                        </div>
                        {% if viewShop %}
                        <div class="grid-x variant-row-vo">
                            <div class="cell small-12 text-right">
                                {% if item.variants|length > 1 %}

                                    <select class="variant-type" data-product="{{ item.id }}">
                                        {% for variant in item.variants | filter(v=> v.unpublished == FALSE) %}
                                            {% set selected  = '' %}
                                            {% if variant.byDefault %}
                                                {#{% set selected  = 'selected="selected"' %}#}
                                                {% set selectedId  = variant.id %}
                                            {% endif %}
                                            {% if variant.priceDiscount %}
                                                {% set price = variant.priceDiscount %}
                                                {% set dataOldPrice = 'data-old-price="'~variant.price~'"' %}
                                                {% set dataDiscount = 1 %}
                                            {% else %}
                                                {% set dataOldPrice = '' %}
                                                {% set price = variant.price %}
                                                {% set dataDiscount = 0 %}
                                            {% endif %}
                                            {% if variant.soldOut or item.soldOut or soldOutWithStock(variant) %}
                                                {% set dataSoldOut = 1 %}
                                            {% else %}
                                                {% set dataSoldOut = 0 %}
                                            {% endif %}
                                            {% if loop.first %}
                                                <option value=""
                                                        {{ dataOldPrice }}
                                                        data-price="{{ price }}"
                                                        data-discount="{{ dataDiscount }}"
                                                        data-soldout="{{ dataSoldOut }}"
                                                        selected="selected">
                                                    {{selectBox }}
                                                </option>
                                            {% endif %}

                                            <option value="{{ variant.id }}"
                                                    {{ dataOldPrice }}
                                                    data-price="{{ price }}"
                                                    data-discount="{{ dataDiscount }}"
                                                    data-soldout="{{ dataSoldOut }}"{{ selected }}>{{ variant.type.name }} {{ (variant.type.volume) }} {{ variant.type.unity }} {% if variant.type.gift is defined and variant.type.gift %}{{ variant.price/100 }} €{% endif %}</option>
                                        {% endfor %}
                                    </select>


                                {% else %}
                                    <div class="cell small-12 text-right">
                                        <p class="variant-name variant"
                                           data-product="{{ item.id }}">{{ item.variants[0].type.name }} {{ (item.variants[0].type.volume) }} {{ item.variants[0].type.unity }} {% if item.variants[0].type.gift is defined and item.variants[0].type.gift%}{{ item.variants[0].price/100 }} €{% endif %}</p>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="grid-x variant-row-vo align-middle">
                            <div class="cell small-3 text-left">
                                <span>{% trans %}shop.price {% endtrans %}</span>
                            </div>
                            <div class="cell small-9">
                                <div
                                        class="text-right"
                                        data-product="{{ item.id }}">
                                                <span class="variant-price">
                                                    {% set lowPrice = 10000000 %}
                                                    {% set highPrice = 0 %}
                                                    {% for variant in item.variants %}
                                                        {% if variant.byDefault %}
                                                            {% if variant.priceDiscount is not null %}
                                                                {% set priceDefault = variant.priceDiscount %}
                                                                <span class="old-price">{{ (variant.price / 100) | number_format(2) }}
                                                                    €</span>
                                                                <span>{{ (variant.priceDiscount / 100) | number_format(2) }}
                                                                €</span>
                                                            {% else %}
                                                                {% set priceDefault = variant.price %}
                                                                <span>{{ (variant.price / 100) | number_format(2) }}
                                                                    €</span>
                                                            {% endif %}
                                                        {% endif %}
                                                        {% if variant.price < lowPrice %}
                                                            {% set lowPrice = variant.price %}
                                                        {% endif %}
                                                        {% if variant.price > highPrice %}
                                                            {% set highPrice = variant.price %}
                                                        {% endif %}
                                                    {% endfor %}
                                                </span>
                                    <sup>{{ taxe }}</sup>
                                </div>
                            </div>
                        </div>
                        <div class="grid-x variant-row-vo variant-row-qty align-middle">
                            <div class="cell small-8 text-left">
                                <span>{% trans %}shop.quantity_item{% endtrans %}</span>
                            </div>
                            <div class="cell small-4">
                                <input class="variant-qty text-center"
                                       data-product="{{ item.id }}"
                                       data-item="{{ selectedId }}" data-abide min="0"
                                       type="number"
                                       name="quantity"
                                       value="0" {% if soldOut %}disabled{% endif %}/>
                                <span class="form-error">Oups.</span>
                            </div>
                        </div>
                    </div>

                    <a href="#" class="cell button expanded button-shop add-cart" data-scroll-ignore
                       data-item="{{ selectedId }}" data-product="{{ item.id }}"
                       data-price="{{ priceDefault }}" data-selectBox="{{ selectBox|lower }}" {% if soldOut %}data-soldout{% endif %}><i
                                class="fas fa-cart-arrow-down"></i> {% trans %}shop.add_cart{% endtrans %}
                    </a>
                    {% if item.otherText1 %}
                        <div class="article-other-info">
                            <span>{{ item.otherText1 | raw }}</span>
                        </div>
                    {% endif %}
                    {% else %}
                        <p class="text-center">{{ 'shop.view_with_partner_code' | trans }}</p>
                    {% endif %}
                    <a class="button expanded js-cd-panel-trigger"
                       data-panel="shop"
                       data-title="{% if item.header %}{{ item.header|striptags }}{% endif %} {{ item.name|striptags }} {% if item.quality %}{{ item.quality|striptags }}{% endif %}"
                       data-text='{% include 'shop/_panel.html.twig' with {'item': item} %}'><i
                                class="fas fa-info-circle"></i> {% trans %}shop.details{% endtrans %}
                    </a>

                </div>
            </div>
            {% if viewShop %}
                <meta itemprop="name"
                      content="{% if item.header %}{{ item.header|capitalize }} {% endif %}{{ item.name|upper }}{% if item.quality %} {{ item.quality }}{% endif %} - {{ 'company'|trans }}"/>
                <meta itemprop="image" content="{{ asset(path) | imagine_filter('relative_heighten_586_filter') }}"/>
                <meta itemprop="description" content="{{ item.description|striptags }}"/>
                <div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer">
                    <meta itemprop="lowPrice" content="{{ (lowPrice / 100) | number_format(2) }}"/>
                    <meta itemprop="highPrice" content="{{ (highPrice / 100) | number_format(2) }}"/>
                    <meta itemprop="offerCount" content="{{ item.variants|length }}">
                    <meta itemprop="url" content="{{ app.request.uri }}"/>
                    {% if soldOut %}
                        <meta itemprop="availability" content="http://schema.org/SoldOut"/>
                    {% else %}
                        <meta itemprop="availability" content="https://schema.org/InStock"/>
                    {% endif %}
                    {% for variant in item.variants %}
                        <div itemprop="offers" itemtype="http://schema.org/Offer" itemscope>
                            <meta itemprop="url" content="{{ app.request.uri }}"/>
                            {% if variant.soldOut %}
                                <meta itemprop="availability" content="http://schema.org/SoldOut"/>
                            {% else %}
                                <meta itemprop="availability" content="https://schema.org/InStock"/>
                            {% endif %}
                            <meta itemprop="priceCurrency" content="EUR"/>
                            <meta itemprop="price" content="{{ (variant.price / 100) | number_format(2) }}"/>
                            <meta itemprop="priceValidUntil" content="{{ "now"|date_modify("+8 day")|date("c") }}"/>
                            <div itemprop="seller" itemtype="http://schema.org/Organization" itemscope>
                                <meta itemprop="name" content="{{ 'company'|trans }}"/>
                            </div>
                            <meta itemprop="sku" content="{{ item.slug }}_{{ variant.type.name }}"/>
                        </div>
                    {% endfor %}
                    <meta itemprop="priceCurrency" content="EUR"/>
                </div>
                <meta itemprop="sku" content="{{ item.slug }}"/>
                <div itemprop="brand" itemtype="http://schema.org/Thing" itemscope>
                    <meta itemprop="name" content="{{ 'company'|trans }}"/>
                </div>
            {% endif %}
        </article>
    {% endfor %}

</div>
