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

    <t t-name="point_of_sale.ProductCard">
        <article tabindex="0"
            role="button"
            t-attf-class="{{props.class}} {{props.color ? `o_colorlist_item_color_transparent_${props.color}` : ''}} product position-relative btn btn-light d-flex align-items-stretch p-0 rounded-3 text-start cursor-pointer {{ props.imgUrl ? 'd-flex align-items-stretch' : ''}} {{ props.available ? '' : 'opacity-50' }}"
            t-on-keypress="(event) => event.code === 'Space' ? props.onClick(event) : ()=>{}"
            t-on-click.stop="props.onClick"
            t-att-data-product-id="props.productId"
            t-attf-aria-labelledby="article_product_{{props.productId}}">
            <div t-if="props.imageUrl" class="product-img ratio ratio-4x3 rounded-top rounded-3">
                <img class="w-100 object-fit-cover bg-200 pe-none" t-att-src="props.imageUrl" t-att-alt="props.name" draggable="false"/>
            </div>
            <div class="product-content h-100 px-2 rounded-bottom-3 flex-shrink-1"
                t-att-class="{'d-flex' : !props.isComboPopup, 'my-1': !(props.isComboPopup and !props.imageUrl)}">
                <div class="overflow-hidden lh-sm product-name"
                    t-att-class="{
                        'no-image d-flex text-center w-100 flex-column': !props.imageUrl,
                        'mt-1': props.isComboPopup and !props.imageUrl
                    }"
                    t-attf-id="article_product_{{props.productId}}"
                    t-esc="props.name" />
                <span t-if="props.productCartQty"
                    t-out="this.productQty"
                    class="product-cart-qty position-absolute bottom-0 end-0 m-1 px-2 rounded bg-black text-white fs-5 fw-bolder"
                    t-att-class="{'text-danger': this.productQty lt 0}"/>
            </div>
            <span t-if="props.comboExtraPrice" style="font-size: 0.75rem;" class="price-extra px-2 py-0 rounded-1 text-bg-info position-absolute top-0 end-0 mt-1 me-1">
                <t t-esc="props.comboExtraPrice"/>
            </span>
            <t t-slot="quantityButtons" />
        </article>
    </t>
</templates>
