<div class="grid-x grid-margin-x grid-padding-x grid-margin-y text-center align-center" data-equalizer>
    {% set priceDefault = null %}
    {% set firstCategorySlug = null %}
    {% set firstCategoryName= null %}
    {% set firstCategoryDescription= null %}
    <h3 class="shop-categories hide-for-small-only">{% trans from 'messages' %}shop.categories{% endtrans %}</h3>
    <div class="swiper-container swiper-category hide-for-small-only">
        <div class="swiper-wrapper filters-group">
            {% if  config.viewFavoriteCat %}
                <div class="swiper-slide"><a href="#" class="category-filter-item active category-favorite" data-filter="favorite"
                                             data-name="{{ config.translations[app.request.get('_locale')].favoriteCatName }}"
                                             data-id="first" data-first
                                             data-scroll-ignore>{{ config.translations[app.request.get('_locale')].favoriteCatName }}</a>
                </div>
            {% endif %}
            {% for category in categories %}
                {% if loop.first %}
                    {% set firstCategorySlug = category.slug %}
                    {% set firstCategoryName= category.name %}
                    {% set firstCategoryDescription= category.description %}
                {% endif %}

                <div class="swiper-slide"><a href="#"
                                             class="category-filter-item{% if config.viewFavoriteCat == false and loop.first %} active{% endif %}"
                                             data-filter="{{ category.slug }}"
                                             data-name="{{ category.name }}" data-description="{{ category.description|raw }}" data-id="{{ category.slug }}"
                                             data-scroll-ignore {% if config.viewFavoriteCat == false and loop.first %} data-first{% endif %}>{{ category.name }}
                        ({{ category.products|length }})</a></div>

            {% endfor %}

        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="cell small-12 show-for-small-only">
        <div class="category-filter text-center">
            <h4 class="categories">{% trans from 'messages' %}shop.categories{% endtrans %}</h4>
            <input class="menu-btn" type="checkbox" id="menu-btn" checked/>
            <label class="menu-icon-filter" for="menu-btn"><span class="navicon"></span></label>
            <ul class="menu">
                {% if  config.viewFavoriteCat %}
                    <li data-filter="favorite"
                        data-name="{{ config.translations[app.request.get('_locale')].favoriteCatName }}"
                        class="category-filter-item category-filter-active"
                        data-first data-id="first"><i
                                class="fas fa-star"></i> {{ config.translations[app.request.get('_locale')].favoriteCatName }}
                    </li>
                {% endif %}
                {% for category in categories %}
                    <li class="category-filter-item" data-filter="{{ category.slug }}" data-name="{{ category.name }}"
                        data-id="{{ category.slug }}">{{ category.name }}
                        ({{ category.products|length }})
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="container-input">
        <input type="text" name="quickSearch" placeholder="{% trans %} shop.search {% endtrans %}" class="quicksearch">
    </div>
    <div class="cell small-12">
        <h3 class="shop-title-category">
            {% if config.viewFavoriteCat %}
            {{ config.translations[app.request.get('_locale')].favoriteCatName }}
            {% else %}
                {{ firstCategoryName }}
            {% endif %}
        </h3>
        <div class="grid-x grid-margin-x">
            <div class="cell small-12 shop-description-category">
                {% if firstCategoryDescription %}
                    {{ firstCategoryDescription|raw }}
                {% endif %}
            </div>
        </div>
        <div class="grid-x grid-margin-x grid-padding-x grid-margin-y small-up-1 medium-up-1 large-up-2 shop-isotope">
            {% 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.favorite %}favorite{% endif %} {% if config.viewFavoriteCat and item.favorite == false %}no-visible{% endif %} {% if config.viewFavoriteCat == false and firstCategorySlug != item.category.slug %}no-visible{% endif %}"
                        data-category="{% if item.category %}{{ item.category.slug }} {% endif %}" {% if item.orderInFavorites %}data-order="{{ item.orderInFavorites }}"{% 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" data-lozad-container>
                        <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 data-position="top"
                                                     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 data-position="bottom"
                                                 data-click-open="false"
                                                 title="{{ 'shop.awardDetails'|trans({'%infos%': transDetail}) }}">
                                                + {{ countRest }}</div>
                                        {% endif %}
                                    {% else %}
                                        {% for award in item.awards %}
                                            <img class="lozad align-center top"
                                                 src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                                 data-src="{{ asset(award.image.path)|imagine_filter('relative_heighten_100_filter') }}"
                                                 alt="{{ award.title }}" data-tooltip-js
                                                 title="{{ award.title }} - {{ award.description }}" data-width="100"
                                                 data-max-width/>
                                        {% endfor %}
                                    {% endif %}
                                </div>
                            {% endif %}
                            <picture class="lozad"
                                     data-iesrc="{{ asset(path) | imagine_filter('relative_heighten_586_filter') }}"
                                     data-alt="{{ item.name }} {% if item.quality %}{{ item.quality }}{% endif %}"
                                     data-height>
                                <source srcset="{{ asset(path) | imagine_filter('relative_heighten_586_filter') }}"
                                        media="(min-width: 640px)" data-force-height="400">
                                <source srcset="{{ asset(path) | imagine_filter('relative_heighten_586_filter') }}"
                                        media="(min-width: 0px)" data-force-height="200">
                            </picture>
                        </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 %}/>
                                    </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>
    </div>
</div>
