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

{% set variant = product|sylius_resolve_variant %}
{% set hasDiscount = variant|sylius_has_discount({'channel': sylius.channel}) %}
{% set complementaryName = product.getComplementaryName ? product.getComplementaryName() : null %}

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

    <a href="{{ path('sylius_shop_product_show', {'slug': product.slug, '_locale': product.translation.locale}) }}" class="product-box-image-wrapper">
        {% include '@SyliusShop/Product/_mainImage.html.twig' with {'product': product} %}
    </a>

    <div class="product-box-text-wrapper">
        <a href="{{ path('sylius_shop_product_show', {'slug': product.slug, '_locale': product.translation.locale}) }}" class="product-box-name" {{ sylius_test_html_attribute('product-name', product.name) }}>
            <h2 class="product-box-title">{{ product.name }}</h2>

            {% if complementaryName is not null %}
                <h3 class="product-box-complementary-name">{{ complementaryName }}</h3>
            {% endif %}
        </a>

        {% if product.acceptedReviews|length > 0 %}
            <a href="{{ path('sylius_shop_product_show', {'slug': product.slug, '_locale': product.translation.locale}) }}#product-reviews" class="product-box-review review-rating">
                {% include '@SyliusShop/Product/_starRating.html.twig' %}
                <span class="product-box-review-nb">({{ product.acceptedReviews|length }})</span>
            </a>
        {% endif %}

        {% if not product.variants.empty() %}
            <div class="product-box-price-wrapper" {{ sylius_test_html_attribute('product-price') }}>
                <span class="product-price {% if hasDiscount %}promo{% endif %}">{{ money.calculatePrice(product|sylius_resolve_variant) }}</span>
                {% if hasDiscount %}
                    <span class="product-price-old">{{ money.calculateOriginalPrice(product|sylius_resolve_variant) }}</span>
                {% endif %}
            </div>
        {% endif %}
    </div>
</div>
