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

<div class="ui one card">
    <div class="ui fluid card" {{ sylius_test_html_attribute('product') }}>
        <a href="{{ path('sylius_shop_product_show', {'slug': product.slug, '_locale': product.translation.locale}) }}"
           class="blurring dimmable image">
            <div class="ui dimmer">
                <div class="content">
                    <div class="center">
                        <div class="ui inverted button">{{ 'sylius.ui.view_more'|trans }}</div>
                    </div>
                </div>
            </div>
            {% if product.imagesByType('thumbnail') is not empty %}
                {% set path = product.imagesByType('thumbnail').first.path|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %}
            {% elseif product.images.first %}
                {% set path = product.images.first.path|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %}
            {% else %}
                {% set path = '//placehold.it/200x200' %}
            {% endif %}

            <img src="{{ path }}" {{ sylius_test_html_attribute('main-image') }} alt="{{ product.name }}"
                 class="ui bordered image"/>
        </a>
        <div class="content" {{ sylius_test_html_attribute('product-content') }}>
            <a href="{{ path('sylius_shop_product_show', {'slug': product.slug, '_locale': product.translation.locale}) }}"
               class="header sylius-product-name" {{ sylius_test_html_attribute('product-name', product.name) }}>{{ product.name }}</a>
            {% if not product.enabledVariants.empty() %}
                <div class="sylius-product-price" {{ sylius_test_html_attribute('product-price') }}>{{ money.calculatePrice(product|sylius_resolve_variant) }}</div>
            {% endif %}
        </div>
    </div>
</div>
