<?xml version="1.0" encoding="UTF-8" ?>
<templates id="template" xml:space="preserve">

    <t t-name="ProductItem" owl="1">
        <article class="product" tabindex="0" t-on-keypress="spaceClickProduct"
                 t-on-click="() => this.trigger('click-product', props.product)"
                 t-att-data-product-id="props.product.id"
                 t-attf-aria-labelledby="article_product_{{props.product.id}}">
                <t t-if="props.product.image_128">
                    <div class="product-img">
                        <img t-att-src="imageUrl" t-att-alt="props.product.display_name" />
                    </div>
                </t>
                <div class="product-content">
                    <div t-attf-class="#{props.product.image_128 ? 'product-name' : 'product-name no-image' }" t-attf-id="article_product_{{props.product.id}}">
                        <t t-esc="props.product.display_name" />
                    </div>
                    <span class="price-tag">
                        <t t-esc="price" />
                    </span>
                </div>
        </article>
    </t>

</templates>
