{% 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 result.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="{{ path(result.urlParams.path, result.urlParams.params) }}" class="product-box-image-wrapper">
            {% if result.image is not empty %}
                {% set path = result.image|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %}
            {% else %}
                {% set path = '//placehold.it/200x200' %}
            {% endif %}

            <img src="{{ path }}" alt="{{ result.attribute('name').value | join }}" class="w-100" />
        </a>

        <div class="product-box-text-wrapper">

            <a href="{{ path(result.urlParams.path, result.urlParams.params) }}" class="product-box-name">
                <h2 class="product-box-title">{{ result.attribute('name').value | join }}</h2>

                {% if result.attribute('BRAND') is not null %}
                    <h3 class="product-box-brand">{{ result.attribute('BRAND').value[0] }}</h3>
                {% endif %}
            </a>

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