{% set product = variant.product %}

<div class="row">
    <div class="col-2">
        {% if variant.hasImages %}
            {% include '@SyliusShop/Product/_mainImage.html.twig' with {'product': variant, 'filter': 'sylius_shop_product_tiny_thumbnail'} %}
        {% else %}
            {% include '@SyliusShop/Product/_mainImage.html.twig' with {'product': product, 'filter': 'sylius_shop_product_tiny_thumbnail'} %}
        {% endif %}
    </div>
    <div class="col-10 d-flex justify-content-center align-items-center">
        <a href="{{ path('sylius_shop_product_show', {'slug': product.slug}) }}">
            <div class="nav-link" {{ sylius_test_html_attribute('product-name', item.productName) }}>{{ item.productName }}</div>
        </a>
    </div>
</div>
{% if product.hasOptions() %}
    <div class="ui horizontal divided list sylius-product-options" {{ sylius_test_html_attribute('product-options') }}>
        {% for optionValue in variant.optionValues %}
            <div class="item" data-sylius-option-name="{{ optionValue.name }}" {{ sylius_test_html_attribute('option-name', optionValue.name) }}>
                {{ optionValue.value }}
            </div>
        {% endfor %}
    </div>
{% elseif item.variantName is not null %}
    <div class="ui horizontal divided list">
        <div class="item sylius-product-variant-name" {{ sylius_test_html_attribute('product-variant-name') }}>
            {{ item.variantName }}
        </div>
    </div>
{% endif %}