{% import "@SyliusShop/Common/Macro/money.html.twig" as money %}

{% set url = path('sylius_shop_product_show', {'slug': item.slug, '_locale': sylius.localeCode}) %}
{% set variantsInStock = item.variants|filter(variant => variant.is_in_stock) %}

<div class="product-box-container" {{ sylius_test_html_attribute('product') }}>
    {% if item.applied_promotions is not empty %}
        {% set appliedPromotions = item.applied_promotions|filter(promotion => promotion.channel_code == sylius.channel.code) %}
        {% include '@SyliusShop/Product/Show/_catalogPromotionLabels.html.twig' with {'appliedPromotions': appliedPromotions, 'withDescription': false} %}
    {% endif %}

    <a href="{{ url }}" class="product-box-image-wrapper {% if variantsInStock|length == 0 %}disabled{% endif %}">
        {% if item.images is not empty %}
            {% set path = item.images|first.path %}
        {% else %}
            {% set path = '//placehold.it/200x200' %}
        {% endif %}

        {% set runtimeConfigurationImage = [
            {
                'media': '(max-width: 380px)',
                'sizes' : '150px',
                'srcset':
                [
                    {
                        'width':'150',
                        'height': '150',
                        'filter_set': 'shop_product_box_small',
                    },
                ]
            },
            {
                'sizes' : '280px',
                'srcset':
                [
                    {
                        'width': '280',
                        'height': '280',
                        'filter_set': 'shop_product_box_big',
                    },
                ]
            },
        ] %}
        {{ dedi_sylius_image_optimizer_for_image(path, item.name|default(''), {
            'class' : 'w-100 img-1'
        }, runtimeConfigurationImage) }}

        {% if item.image_hover %}
            {% set path = item.image_hover %}

            {%  set runtimeConfigurationImage = [
                {
                    'media': '(max-width: 380px)',
                    'sizes' : '150px',
                    'srcset':
                    [
                        {
                            'width':'150',
                            'height': '150',
                            'filter_set': 'shop_product_box_hover_small',
                        },
                    ]
                },
                {
                    'sizes' : '280px',
                    'srcset':
                    [
                        {
                            'width':'280',
                            'height': '280',
                            'filter_set': 'shop_product_box_hover_big',
                        },
                    ]
                },
            ]
            %}
            {{ dedi_sylius_image_optimizer_for_image(path, item.name|default(''), {
                'class' : 'w-100 img-hover'
            }, runtimeConfigurationImage) }}
        {% endif %}
    </a>

    <div class="product-box-text-wrapper">
        <a href="{{ url }}" class="product-box-name" {{ sylius_test_html_attribute('product-name', item.name) }}>
            <h2 class="product-box-title">{{ item.name }}</h2>

            {% if item.complementary_name is not null %}
                <p class="product-box-complementary-name">{{ item.complementary_name }}</p>
            {% endif %}
        </a>

        {% if item.reviews is not null %}
            <a href="{{ url }}#product-reviews" class="product-box-review review-rating">
                <div class="ui star large rating" data-rating="{{ item.reviews.rating|round }}" data-max-rating="5" data-average-rating="{{ item.reviews.rating|round(2) }}" style="pointer-events: none;" {{ sylius_test_html_attribute('average-rating', item.reviews.rating|round(2)) }}></div>
                <span class="product-box-review-nb">({{ item.reviews.count }})</span>
            </a>
        {% endif %}

        {% if item.prices is not empty %}
            {% set pricing = item.prices|filter(price => price.channelCode == sylius.channel.code)|first %}
            <div class="product-box-price-wrapper price-wrapper right" {{ sylius_test_html_attribute('product-price') }}>
                {% if pricing.priceReduced == false %}
                    <span class="price">{{ money.convertAndFormat(pricing.price) }}</span>
                {% else  %}
                    <span class="price promo">{{ money.convertAndFormat(pricing.price) }}</span>
                    <span class="price-old">{{ money.convertAndFormat(pricing.originalPrice) }}</span>
                {% endif %}
            </div>
        {% endif %}
    </div>
</div>
