<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <template id="products_open_packaging" inherit_id="website_sale.products">
        <xpath expr="//div[hasclass('products_attributes_filters')]" position="after">
            <div class="mt-3">
            <a t-att-href="keep('/shop',open_packagings = False if open_packagings else True)">
                <h6 t-attf-class="o_packaging_collapse_title mb-3 {{_titleClasses}}"><b>
                <span t-if="open_packagings">All Products</span>
                <span t-else="">Open Packagings</span>
                </b></h6>
            </a>
            </div>
        </xpath>
    </template>

    <template id="o_wsale_offcanvas" name="Open Packagings" inherit_id="website_sale.o_wsale_offcanvas">
        <xpath expr="//t[@t-call='website_sale.filter_products_price']" position="before">
        <div class="position-relative o_wsale_offcanvas_title px-4 border-top">
            <a t-att-href="keep('/shop',open_packagings =  False if open_packagings else True)">
                <h6 t-attf-class="o_packaging_collapse_title mb-3 pt-3 {{_titleClasses}}"><b>
                <span t-if="open_packagings">All Products</span>
                <span t-else="">Open Packagings</span>
                </b></h6>
            </a>
        </div>
        </xpath>
    </template>

    <template id="products" inherit_id="website_sale.products">
        <xpath expr="//div[contains(@t-attf-class, 'o_wsale_product_grid_wrapper')]" position="attributes">
            <attribute name="t-attf-class" add="overflow-hidden" separator=" "/>
        </xpath>
    </template>

    <template
        id="ecom_show_extra_fields_products_item"
        inherit_id="website_sale.products_item"
        active="True"
        name="Show Extra Fields"
    >
        <xpath expr="//span[contains(@t-attf-class,'o_ribbon')]" position="after">
            <t t-set="template_packaging_vals" t-value="get_product_packagings(product)"/>
            <t t-if="template_packaging_vals">
                <span
                    t-attf-class="o_ribbon o_not_editable o_ribbon_right"
                    t-att-style="'color: white; background-color: %s;' % template_packaging_vals['state_color']"
                    t-out="'+%d'%(template_packaging_vals['open_qty'])"
                />
            </t>
        </xpath>
        <xpath expr="//div[hasclass('o_wsale_product_information_text')]" position="after">
            <p class="text-muted">
                <t t-foreach='website.shop_extra_field_ids' t-as='field' t-if='product[field.name]'>
                    <b><t t-out='field.label'/>: </b>
                    <t t-if='field.field_id.ttype != "binary"'>
                        <span t-out='product[field.name]' t-options="{'widget': field.field_id.ttype}"/>
                    </t>
                    <t t-else=''>
                        <a
                            target='_blank'
                            t-attf-href='/web/content/product.template/#{product.id}/#{field.name}?download=1'
                        >
                            <i class='fa fa-file'/>
                        </a>
                    </t>
                    <br/>
                </t>
            </p>
        </xpath>
    </template>

    <template id="product" inherit_id="website_sale.product">
        <xpath expr="//div[@id='o_wsale_cta_wrapper']" position="before">
            <t t-if="packaging_info">
                <div>
                    <span t-out="'+%d/+%d'%(packaging_info['open_qty'],packaging_info['open_max_qty'])"/>
                </div>
            </t>
        </xpath>
        <xpath expr="//div[contains(@t-attf-class,'css_quantity')]" position="attributes">
                <!-- Todo: catch if not set -->
                <!-- <attribute
                t-if="packaging_info"
                name="t-attf-style"
                add="'background-color: {{packaging_info[\'state_color\']}};' if packaging_info"
                separator=" "
            /> -->

        </xpath>
    </template>

    <template id="product_max_quantity_config">
        <div class="css_quantity input-group">
            <button
                t-attf-href="#"
                class="btn btn-primary float_left js_add_cart_json d-none d-md-inline-block"
                aria-label="Remove one"
                title="Remove one"
            >
                <i class="fa fa-minus"/>
            </button>
            <input
                type="text"
                class="js_quantity form-control quantity text-center"
                style="max-width: 4rem"
                data-min="1"
                name="add_max_qty"
                t-att-value="add_max_qty or 1"
            />
            <button
                t-attf-href="#"
                class="btn btn-primary float_left js_add_cart_json d-none d-md-inline-block"
                aria-label="Add one"
                title="Add one"
            >
                <i class="fa fa-plus"/>
            </button>
        </div>
    </template>

    <template id="cart_lines_packaging" inherit_id="website_sale.cart_lines" name="Shopping Cart Lines">
        <xpath expr="//td[hasclass('td-product_name')]" position="inside">
            <div t-if="line.product_packaging_id and (line.product_packaging_id.qty != 1)">
                <span>Packaging Size: <t t-out="line.product_packaging_id.qty"/></span>
            </div>
        </xpath>
        <xpath expr="//th[hasclass('td-qty')]" position="after">
            <th class="text-center td-qty">
                <t t-if="show_qty">
                    <span>Max Qty</span>
                </t>
            </th>
        </xpath>
        <xpath expr="//td[hasclass('td-qty')]" position="attributes">
            <!-- TODO: Fix if-statement -->
            <attribute name="t-attf-style" add="background-color: {{line.batch_product_id.get_state_color()}};"/>
        </xpath>

        <xpath expr="//td[hasclass('td-qty')]" position="inside">
            <div t-if="line.product_packaging_id">
                &#40;+<t t-out="round(line.batch_product_id.open_packaging_qty*10)/10"/>&#41;
            </div>
        </xpath>
        <xpath expr="//td[hasclass('td-qty')]" position="after">
            <td class="text-center td-qty">
                <div class="css_quantity input-group mx-auto justify-content-center">
                    <t t-if="not line._is_not_sellable_line()">
                        <t t-if="show_qty">
                            <a
                                t-attf-href="#"
                                class="btn btn-link js_add_cart_json d-none d-md-inline-block"
                                aria-label="Remove one"
                                title="Remove one"
                            >
                                <i class="fa fa-minus"/>
                            </a>
                            <input
                                type="text"
                                name="max-qty"
                                class="js_quantity form-control quantity"
                                t-att-data-line-id="line.id"
                                t-att-data-product-id="line.product_id.id"
                                t-att-value="line.product_uom_max_qty and line.product_uom_max_qty or line.product_uom_qty"
                                t-att-data-min="line.product_uom_qty"
                            />
                            <t t-if="line._get_shop_warning(clear=False)">
                                <a t-attf-href="#" class="btn btn-link">
                                <i
                                        class='fa fa-warning text-warning'
                                        t-att-title="line._get_shop_warning()"
                                        role="img"
                                        aria-label="Warning"
                                    />
                                </a>
                            </t>
                            <a
                                t-else=''
                                t-attf-href="#"
                                class="btn btn-link float_left js_add_cart_json d-none d-md-inline-block"
                                aria-label="Add one"
                                title="Add one"
                            >
                                <i class="fa fa-plus"/>
                            </a>
                        </t>
                        <t t-else="">
                            <input
                                type="hidden"
                                class="js_quantity form-control quantity"
                                t-att-data-line-id="line.id"
                                t-att-data-product-id="line.product_id.id"
                                t-att-value="line.product_uom_qty == line.product_uom_qty and line.product_uom_qty or line.product_uom_qty"
                            />
                        </t>
                    </t>
                    <t t-else="">
                        <span class="text-muted w-100" t-out="line.product_uom_qty"/>
                        <input
                            type="hidden"
                            class="js_quantity form-control quantity"
                            t-att-data-line-id="line.id"
                            t-att-data-product-id="line.product_id.id"
                            t-att-value="line.product_uom_qty"
                        />
                    </t>
                </div>
                <div>
                    &#40;+<t t-out="round(line.batch_product_id.open_packaging_max_qty*10)/10"/>&#41;
                </div>
            </td>
        </xpath>
    </template>

    <template id="configure_optional_products" inherit_id="sale_product_configurator.configure_optional_products">
        <!-- TodDo: Add Batch qtys to order modal
        <xpath expr="//td[hasclass('css_quantity')]" position="before">
            <div>
                <t t-out="custom_attribute.batch_id.id"/>
                            &#40;+<t t-out="round(line.batch_product_id.open_packaging_qty*10)/10"/>&#41;
            </div>
        </xpath> -->

        <xpath expr="//th[hasclass('td-qty')]" position="after">
            <th class="text-center td-max-qty"><span class='label'>Max Quantity</span></th>
        </xpath>
         <xpath expr="//td[hasclass('td-qty')]" position="after">
            <!--  TODO: Add JS part
            <td class="text-center td-max-qty">
                <t t-call='nfu_ecommerce.product_max_quantity_config'/>
            </td> -->
        </xpath>
    </template>
    <template id="cart_hide_checkout_button" inherit_id="website_sale.cart">
        <!-- TODO: Introduce flag -->
        <xpath expr="//div[contains(@t-if,'website_sale_order')]" position="attributes">
            <attribute name="t-if" add="False" separator=" and "/>
        </xpath>
    </template>
    <template id="short_cart_summary_hide_checkout_button" inherit_id="website_sale.short_cart_summary">
        <!-- TODO: Introduce flag -->
        <xpath expr="//a[contains(@t-if,'website_sale_order')]" position="attributes">
            <attribute name="t-if" add="False" separator=" and "/>
        </xpath>
    </template>
    <template id="cart_summary_packaging" inherit_id="website_sale.cart_summary" name="Cart right column">
        <xpath expr="//th[hasclass('td-qty')]" position="after">
            <th class="border-top-0 td-qty">Max Qty</th>
        </xpath>
        <xpath expr="//td[hasclass('td-qty')]" position="after">
             <td class='td-qty'>
                <div t-out="line.product_uom_max_qty"/>
            </td>
        </xpath>
    </template>
   <template id="total" inherit_id="website_sale.total">
        <xpath expr="//tr[@id='empty']" position="after">
                  <tr id="balance">
                      <td class="text-end border-0">Balance:</td>
                      <td class="text-xl-end border-0">
                          <span
                        t-field="website_sale_order.balance"
                        class="monetary_field"
                        style="white-space: nowrap;"
                        t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}"
                    />
                      </td>
                  </tr>
        </xpath>
        <xpath expr="//tr[@id='order_total']" position="after">
                  <tr id="updated_balance">
                      <td class="text-end border-0">New balance:</td>
                      <td class="text-xl-end border-0">
                        <t t-if="website_sale_order.updated_balance &lt; 0">
                          <span
                            t-field="website_sale_order.updated_balance"
                            class="monetary_field text-danger"
                            style="white-space: nowrap;"
                            t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}"
                        />
                        </t>
                        <t t-else="">
                          <span
                            t-field="website_sale_order.updated_balance"
                            t-att-class="monetary_field"
                            style="white-space: nowrap;"
                            t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}"
                        />
                        </t>
                      </td>
                  </tr>
        </xpath>
   </template>
</odoo>
