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

{% set url = path(search_result_url_param(result).path, search_result_url_param(result).params) %}
{% set name = result.attribute('name').value | join %}
{% set complementaryName = result.attribute('complementary_name') %}
{% set imageHover = result.attribute('image_hover') %}
{% set reviews = result.attribute('reviews') %}
{% set price = result.priceByChannelAndCurrency(channel.code, currencyCode) %}
{% set originalPrice = result.originalPriceByChannelAndCurrency(channel.code, currencyCode) %}

<div class="product-box-container" {{ sylius_test_html_attribute('product') }}>
    {% if originalPrice is not null %}
        <div class="product-box-tag">
            <span class="badge badge-secondary">{{ 'app.ui.product.tag.promo'|trans }}</span>
        </div>
    {% endif %}

    <a href="{{ url }}" class="product-box-image-wrapper">
        {% if result.image is not empty %}
            {% set path = result.image %}
        {% else %}
            {% set path = '//placehold.it/200x200' %}
        {% endif %}

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

        {% if imageHover %}
            {% set path = imageHover.value[0] %}

            {%  set runtimeConfigurationImage = [
                {
                    'media': '(max-width: 380px)',
                    'sizes' : '150px',
                    'srcset':
                    [
                        {'width':'150', 'height': '150'},
                    ]
                },
                {
                    'sizes' : '280px',
                    'srcset':
                    [
                        {'width':'280', 'height': '280'},
                    ]
                },
            ]
            %}
            {{ dedi_sylius_image_optimizer_for_image(path, 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', name) }}>
            <h2 class="product-box-title">{{ name }}</h2>

            {% if complementaryName is not null %}
                <p class="product-box-complementary-name">{{ complementaryName.value[0] }}</p>
            {% endif %}
        </a>

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

        {% if result.price is not empty %}
            <div class="product-box-price-wrapper price-wrapper right" {{ sylius_test_html_attribute('product-price') }}>
                {% if originalPrice is null %}
                    <span class="price">{{ money.format(price.value, currencyCode) }}</span>
                {% else %}
                    <span class="price promo">{{ money.format(price.value, currencyCode) }}</span>
                    <span class="price-old">{{ money.format(originalPrice.value, currencyCode) }}</span>
                {% endif %}
            </div>
        {% endif %}
    </div>
</div>
