<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
    <t t-name="product.ProductCatalogOrderLine">
        <!-- Replace the element found using the css selector by the content of the portalled
             template.  -->
        <t t-portal="`#product-${props.productId}-price`">
            <div class="d-inline-flex align-items-baseline">
                <span t-if="showPrice" t-out="price" class="o_product_catalog_price fw-bold me-4"/>
                <span t-if="props.code" t-out="props.code" class="text-muted"/>
            </div>
        </t>
        <div 
            t-if="props.readOnly and props.warning"
            class="text-danger text-truncate my-2 pt-3 border-top">
            <i class="fa fa-warning" t-att-title="props.warning"/>
            <span 
                class="px-1" 
                t-att-title="props.warning"
                t-out="props.warning"/>
        </div>
        <span t-elif="props.readOnly" class="m-2 pt-3 border-top" t-out="props.warning">
            You can't edit this product in the catalog.
        </span>
        <div t-else="" class="d-flex justify-content-end align-items-center m-2">
            <div t-if="isInOrder()"
                    class="input-group o_product_catalog_quantity o_product_catalog_cancel_global_click w-50">
                <div class="d-flex">
                    <button class="btn btn-primary border"
                            t-on-click.stop="this.env.decreaseQuantity"
                            t-att-disabled="disableRemove"
                            t-att-data-tooltip="disabledButtonTooltip">
                        <i class="fa fa-minus center"/>
                    </button>
                    <div class="d-flex w-100">
                        <input class="o_input text-center text-bg-light rounded-0 border border-end-0"
                                type="number"
                                t-att-class="this.env.displayUoM ? 'w-50' : 'w-100'"
                                t-att-value="quantity"
                                t-on-change="this.env.setQuantity"
                                t-on-focus="_onFocus"/>
                        <span class="fst-italic text-muted text-bg-light text-truncate w-50 border border-start-0 py-1" t-if="this.env.displayUoM" t-out="props.uomDisplayName"/>
                    </div>
                    <button class="btn btn-primary border"
                            t-on-click.stop="(ev) => this.env.increaseQuantity()">
                        <i class="fa fa-plus"/>
                    </button>
                </div>
            </div>
            <t t-elif="props.warning">
                <i class="fa fa-warning text-warning" t-att-title="props.warning"/>
                <span 
                    class="text-truncate text-warning px-1" 
                    t-att-title="props.warning"
                    t-out="props.warning"/>
            </t>
            <div 
                class="ms-auto o_product_catalog_buttons o_product_catalog_cancel_global_click"
                style="min-width: max-content;">
                <button t-if="!isInOrder()"
                        t-on-click.stop="() => this.env.addProduct()"
                        class="btn btn-secondary">
                    <i class="fa fa-shopping-cart"/>
                    Add
                </button>
                <div t-else="" class="o_tooltip_div_remove" t-att-data-tooltip="this.disabledButtonTooltip">
                    <button t-on-click.stop="this.env.removeProduct"
                            t-att-disabled="disableRemove"
                            class="btn btn-light border">
                        <i class="fa fa-trash"/>
                        Remove
                    </button>
                </div>
            </div>
        </div>
    </t>
</templates>
