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

<div class="col-6 col-md-3 col-lg-12 d-flex">
    <div class="product-box-container horizontal" {{ sylius_test_html_attribute('product') }}>
        {% if item.prices is not empty %}
            {% set pricing = item.prices|filter(price => price.channelCode == sylius.channel.code)|first %}
            {% if pricing.originalPrice is not null %}
                <div class="product-box-tag">
                    <span class="badge badge-secondary">{{ 'app.ui.product.tag.promo'|trans }}</span>
                </div>
            {% endif %}
        {% endif %}

        <a href="{{ path('sylius_shop_product_show', {'slug': item.slug, '_locale': sylius.localeCode}) }}"
           class="product-box-image-wrapper">
            {% if item.images|first %}
                {% set path = item.images|first.path|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %}
            {% else %}
                {% set path = '//placehold.it/200x200' %}
            {% endif %}

            <img src="{{ path }}" alt="{{ item.name }}"  class="w-100"/>
        </a>
        <div class="product-box-text-wrapper">
            <a href="{{ path('sylius_shop_product_show', {'slug': item.slug, '_locale': sylius.localeCode}) }}"
               class="product-box-name">
                <h2 class="product-box-title">{{ item.name }}</h2>
            </a>
            {% if item.complementary_name is not empty %}
                <p class="product-box-complementary-name">{{ item.complementary_name }}</p>
            {% endif %}

            {% if item.prices is not empty %}
                {% set pricing = item.prices|filter(price => price.channelCode == sylius.channel.code)|first %}
                {% 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 %}
            {% endif %}
        </div>
    </div>
</div>
