<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <!-- Layout and common templates -->
    <template id="assets_backend" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_backend.js"></script>
            <link rel="stylesheet" type="text/scss" href="/website_sale/static/src/scss/website_sale_dashboard.scss"/>
            <link rel="stylesheet" type="text/scss" href="/website_sale/static/src/scss/website_sale_backend.scss"/>
        </xpath>
    </template>

    <template id="assets_frontend" inherit_id="website.assets_frontend">
        <xpath expr="link[last()]" position="after">
            <link rel="stylesheet" type="text/scss" href="/website_sale/static/src/scss/website_sale.scss" />
            <link rel="stylesheet" type="text/scss" href="/website_sale/static/src/scss/website_mail.scss" />
            <link rel="stylesheet" type="text/scss" href="/website_sale/static/src/scss/website_sale_frontend.scss"/>
            <link rel="stylesheet" type="text/scss" href="/sale/static/src/scss/sale_portal.scss"/>
            <link rel="stylesheet" type="text/scss" href="/sale/static/src/scss/product_configurator.scss"/>
            <link rel="stylesheet" type="text/scss" href="/website_sale/static/src/scss/website_sale_options.scss"/>
        </xpath>
        <xpath expr="script[last()]" position="after">
            <script type="text/javascript" src="/sale/static/src/js/product_configurator_mixin.js"></script>
            <script type="text/javascript" src="/sale/static/src/js/product_configurator_modal.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_utils.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_payment.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_validate.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_tour_buy.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_tracking.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_tour_shop_customize.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_tour_shop_custom_attribute_value.js"></script>
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_options.js"></script>
        </xpath>
    </template>

    <template id="assets_editor" inherit_id="website.assets_editor" name="Shop Editor">
        <xpath expr="." position="inside">
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale.editor.js"></script>
        </xpath>
    </template>

    <template id="assets_common" name="tour" inherit_id="web.assets_common">
        <xpath expr="." position="inside">
            <script type="text/javascript" src="/website_sale/static/src/js/website_sale_tour_shop.js"></script>
        </xpath>
    </template>

    <template id="header" inherit_id="website.layout" name="Header Shop My Cart Link">
        <xpath expr="//header//ul[@id='top_menu']/li" position="before">
            <t t-set="website_sale_order" t-value="website.sale_get_order()" />
            <li class="nav-item divider d-none"/> <!-- Make sure the cart and related menus are not folded (see autohideMenu) -->
            <li id="my_cart" t-attf-class="nav-item#{'' if website_sale_order and website_sale_order.cart_quantity else ' d-none'}">
                <a href="/shop/cart" class="nav-link">
                    <i class="fa fa-shopping-cart"></i>
                    My Cart <sup t-attf-class="my_cart_quantity badge badge-primary" t-esc="website_sale_order and website_sale_order.cart_quantity or ''" />
                </a>
            </li>
        </xpath>
    </template>

    <template id="search" name="Search Box">
        <form t-att-action="keep('/shop'+ ('/category/'+slug(category)) if category else None, search=0)" method="get" t-att-class="_classes">
            <t t-if="attrib_values">
                <t t-foreach="attrib_values" t-as="a">
                    <input type="hidden" name="attrib" t-att-value="'%s-%s' % (a[0], a[1])" />
                </t>
            </t>
            <t t-call="website.website_search_box" />
        </form>
    </template>

    <template id="search count" inherit_id="website.website_search_box" active="False" customize_show="True" name="Show # found">
        <xpath expr="//button[hasclass('oe_search_button')]" position="inside">
            <span t-if='search' class='oe_search_found'> <small>(<t t-esc="search_count"/> found)</small></span>
        </xpath>
    </template>

    <template id="404">
        <t t-call="website.layout">
            <div id="wrap">
                <div class="oe_structure oe_empty">
                    <div class="container">
                        <h1 class="mt32">Product not found!</h1>
                        <p>Sorry, this product is not available anymore.</p>
                        <p>
                            <a t-attf-href="/shop">Return to the product list.</a>
                        </p>
                    </div>
                </div>
            </div>
        </t>
    </template>

    <!-- Product item used by /shop and /shop/cart -->
    <template id="products_item" name="Products item">
        <t t-set="product_href" t-value="keep('/shop/product/%s' % slug(product), page=(pager['page']['num'] if pager['page']['num']&gt;1 else None))" />
        <form action="/shop/cart/update" method="post">
            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
            <div itemscope="itemscope" itemtype="http://schema.org/Product">
                <div class="ribbon-wrapper">
                    <a href="#" role="button" class="ribbon btn btn-danger">Sale</a>
                </div>
                <div class="oe_product_image">
                    <a itemprop="url" t-att-href="product_href">
                        <span itemprop="image" t-attf-content="{{request.httprequest.url_root}}web/image/product.template/{{product.id}}/image" t-field="product.image" t-options="{'widget': 'image', 'resize': None if product_image_big else '300x300', 'zoom': 'image'}" t-att-alt="product.name" />
                    </a>
                </div>
                <t t-if="show_publish">
                    <div id="website_published_button" class="" groups="sales_team.group_sale_manager">
                        <t t-call="website.publish_management">
                            <t t-set="object" t-value="product" />
                            <t t-set="publish_edit" t-value="True" />
                            <t t-set="action" t-value="'product.product_template_action'" />
                        </t>
                    </div>
                </t>
                <section>
                    <h6>
                        <a itemprop="name" t-att-href="product_href" t-att-content="product.name" t-field="product.name" />
                        <a role="button" t-if="not show_publish and not product.website_published" t-att-href="product_href" class="btn btn-secondary btn-sm btn-danger" title="This product is unpublished.">Unpublished</a>
                    </h6>
                    <div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer" class="product_price" t-if="product.product_variant_ids">
                        <b>
                            <t t-if="product.product_variant_id and product.website_price_difference and website.get_current_pricelist().discount_policy=='without_discount'">
                                <del class="text-danger mr8" style="white-space: nowrap;" t-esc="compute_currency(product.website_public_price)" t-options="{'widget': 'monetary', 'display_currency': website.get_current_pricelist().currency_id, 'from_currency': website.currency_id}" />
                            </t>

                            <span t-esc="product.website_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
                            <span itemprop="price" style="display:none;" t-esc="product.website_price" />
                            <span itemprop="priceCurrency" style="display:none;" t-esc="website.currency_id.name" />
                        </b>
                    </div>
                </section>
            </div>
        </form>
    </template>

    <template id="products_description" inherit_id="website_sale.products_item" active="False" customize_show="True" name="Product Description">
        <xpath expr="//div[hasclass('product_price')]" position="before">
            <div class="text-info oe_subdescription" contenteditable="false">
                <div itemprop="description" t-field="product.description_sale"></div>
            </div>
        </xpath>
    </template>

    <template id="products_add_to_cart" inherit_id="website_sale.products_item" active="False" customize_show="True" name="Add to Cart">
        <xpath expr="//div[hasclass('product_price')]" position="inside">
            <input name="product_id" t-att-value="product.product_variant_id.id" type="hidden" />
            <t t-if="len(product.product_variant_ids) == 1">
                <a href="#" role="button" class="btn btn-secondary btn-sm a-submit" aria-label="Shopping cart" title="Shopping cart">
                    <span class="fa fa-shopping-cart" />
                </a>
            </t>
            <t t-if="len(product.product_variant_ids) &gt; 1">
                <a role="button" class="btn btn-secondary btn-sm" t-att-href="keep('/shop/product/%s' % slug(product), page=(pager['page']['num'] if pager['page']['num']&gt;1 else None))" aria-label="Shopping cart" title="Shopping cart">
                    <span class="fa fa-shopping-cart" />
                </a>
            </t>
        </xpath>
        <xpath expr="//div[hasclass('product_price')]/t[1]" position="attributes">
            <attribute name="t-if">len(product.product_variant_ids) == 1 and not len(product.optional_product_ids) &gt;= 1</attribute>
        </xpath>
        <xpath expr="//div[hasclass('product_price')]/t[2]" position="attributes">
            <attribute name="t-if">len(product.product_variant_ids) &gt; 1 or len(product.optional_product_ids) &gt;= 1</attribute>
        </xpath>
    </template>

    <template id="pricelist_list" name="Pricelists Dropdown">
        <t t-set="website_sale_pricelists" t-value="website.get_pricelist_available(show_visible=True)" />
        <div t-attf-class="dropdown#{'' if website_sale_pricelists and len(website_sale_pricelists)&gt;1 else ' d-none'} #{_classes}">
            <t t-set="curr_pl" t-value="website.get_current_pricelist()" />
            <a role="button" href="#" class="dropdown-toggle btn btn-secondary" data-toggle="dropdown">
                <t t-esc="curr_pl and curr_pl.name or ' - '" />
            </a>
            <div class="dropdown-menu" role="menu">
                <t t-foreach="website_sale_pricelists" t-as="pl">
                    <a role="menuitem" t-att-href="'/shop/change_pricelist/%s' % pl.id" class="dropdown-item">
                        <span class="switcher_pricelist" t-att-data-pl_id="pl.id" t-esc="pl.name" />
                    </a>
                </t>
            </div>
        </div>
    </template>

    <!-- /shop product listing -->
    <template id="products" name="Products">
        <t t-call="website.layout">
            <t t-set="additional_title">Shop</t>
            <div id="wrap" class="js_sale">
                <div class="oe_structure" id="oe_structure_website_sale_products_1"/>
                <div class="container py-2 oe_website_sale">
                    <div class="products_pager form-inline justify-content-center">
                        <t t-call="website_sale.search">
                            <t t-set="_classes">o_website_sale_search</t>
                        </t>
                        <t t-call="website_sale.pricelist_list">
                            <t t-set="_classes">ml-2</t>
                        </t>
                        <t t-call="website.pager">
                            <t t-set="_classes">ml-2</t>
                        </t>
                    </div>
                    <div class="row mt-3">
                        <div class="d-none" id="products_grid_before"></div>
                        <div class="col-lg-12" id="products_grid">
                            <table width="100%">
                                <tbody>
                                    <tr t-ignore="true">
                                        <td t-foreach="range(0,rows)" t-as="row" t-attf-width="#{100/rows}%"></td>
                                    </tr>
                                    <tr t-foreach="bins" t-as="tr_product">
                                        <t t-foreach="tr_product" t-as="td_product">
                                            <t t-if="td_product">
                                                <t t-set="product" t-value="td_product['product']" />
                                                <td t-att-colspan="td_product['x'] != 1 and td_product['x']" t-att-rowspan="td_product['y'] != 1 and td_product['y']" t-attf-class="oe_product oe_grid oe-height-#{td_product['y']*2} #{ td_product['class'] }">
                                                    <div class="oe_product_cart" t-att-data-publish="product.website_published and 'on' or 'off'">
                                                        <t t-set="product_image_big" t-value="td_product['x']+td_product['y'] &gt; 2" />
                                                        <t t-call="website_sale.products_item" />
                                                    </div>
                                                </td>
                                            </t>
                                            <td t-if="not td_product" class="oe-height-2" />
                                        </t>
                                    </tr>
                                </tbody>
                            </table>
                            <t t-if="not bins">
                                <div class="text-center text-muted oe_product">
                                    <h3 class="css_editable_display mt8">No product defined.</h3>
                                    <t t-if="search">
                                        <p>
                                            No results found for "<strong t-esc='search'/>".
                                        </p>
                                    </t>
                                    <p groups="sales_team.group_sale_manager">Click <i>'New'</i> in the top-right corner to create your first product.</p>
                                </div>
                            </t>
                        </div>
                    </div>
                    <div class="products_pager form-inline justify-content-center mt-3">
                        <t t-call="website.pager"/>
                    </div>
                </div>
                <div class="oe_structure mb32" id="oe_structure_website_sale_products_2"/>
            </div>
        </t>
    </template>

    <template id="sort" inherit_id="website_sale.products" active="True" customize_show="True" name="Show Sort by">
        <xpath expr="//div[hasclass('products_pager')]/t[@t-call][last()]" position="after">
            <t t-set="list_price_desc_label">Catalog price: High to Low</t>
            <t t-set="list_price_asc_label">Catalog price: Low to High</t>
            <t t-set="name_asc_label">Name - A to Z</t>
            <t t-set="name_desc_label">Name - Z to A</t>
            <t t-set="website_sale_sortable" t-value="[
                (list_price_desc_label, 'list_price desc'),
                (list_price_asc_label, 'list_price asc'),
                (name_asc_label, 'name asc'),
                (name_desc_label, 'name desc')
            ]"/>
            <t t-set="website_sale_sortable_current" t-value="[sort for sort in website_sale_sortable if sort[1]==request.params.get('order', '')]"/>
            <div class="dropdown ml-2 dropdown_sorty_by">
                <a role="button" href="#" class="dropdown-toggle btn btn-secondary" data-toggle="dropdown">
                    <t t-if='len(website_sale_sortable_current)'>
                        <span>Sorting by : <t t-raw='website_sale_sortable_current[0][0]'/></span>
                    </t>
                    <t t-else='1'>
                        <span>Sort by</span>
                    </t>
                </a>
                <div class="dropdown-menu" role="menu">
                    <t t-foreach="website_sale_sortable" t-as="sortby">
                        <a role="menuitem" t-att-href="keep('/shop', order=sortby[1])" class="dropdown-item">
                            <span t-raw="sortby[0]"/>
                        </a>
                    </t>
                </div>
            </div>
        </xpath>
    </template>


    <!-- Add to cart button-->
    <template id="categories_recursive" name="Category list">
        <li class="nav-item">
            <a t-att-href="keep('/shop/category/' + slug(c), category=0)" t-attf-class="nav-link#{' active' if c.id == int(category or 0) else ''}">
                <span t-field="c.name"/>
            </a>
            <ul t-if="c.child_id" class="nav nav-pills flex-column nav-hierarchy">
                <t t-foreach="c.child_id" t-as="c">
                    <t t-if="not search or c.id in search_categories_ids">
                        <t t-call="website_sale.categories_recursive" />
                    </t>
                </t>
            </ul>
        </li>
    </template>

    <template id="products_categories" inherit_id="website_sale.products" active="False" customize_show="True" name="eCommerce Categories">
        <xpath expr="//div[@id='products_grid_before']" position="inside">
            <ul class="nav nav-pills flex-column mt16">
                <li class="nav-item">
                    <a t-att-href="keep('/shop',category=0)" t-attf-class="nav-link#{'' if category else ' active'} o_not_editable">All Products</a>
                </li>
                <t t-foreach="categories" t-as="c">
                    <t t-call="website_sale.categories_recursive" />
                </t>
            </ul>
        </xpath>
        <xpath expr="//div[@id='products_grid_before']" position="attributes">
            <attribute name="class">col-lg-3 col-md-4 col-12</attribute>
        </xpath>
        <xpath expr="//div[@id='products_grid']" position="attributes">
            <attribute name="class">col-lg-9 col-md-8</attribute>
        </xpath>
    </template>

    <template id="option_collapse_categories_recursive" name="Collapse Category Recursive">
        <li class="nav-item">
            <i t-if="categ.child_id" t-attf-class="text-primary fa #{'fa-chevron-down' if categ.id in parent_category_ids else 'fa-chevron-right'}"
               t-attf-title="#{'Unfold' if categ.id in parent_category_ids else 'Fold'}"
               t-attf-aria-label="#{'Unfold' if categ.id in parent_category_ids else 'Fold'}" role="img"/>
            <a t-att-href="keep('/shop/category/' + slug(categ), category=0)" t-attf-class="nav-link#{' active' if categ.id == int(category or 0) else ''}" t-field="categ.name"></a>
            <ul t-if="categ.child_id" class="nav nav-pills flex-column nav-hierarchy" t-att-style="'display:block;' if categ.id in parent_category_ids else 'display:none;'">
                <t t-foreach="categ.child_id" t-as="categ">
                    <t t-if="not search or c.id in search_categories_ids">
                        <t t-call="website_sale.option_collapse_categories_recursive" />
                    </t>
                </t>
            </ul>
        </li>
    </template>

    <template id="option_collapse_products_categories" name="Collapsible Category List" inherit_id="website_sale.products_categories" active="False" customize_show="True">
        <xpath expr="//div[@id='products_grid_before']/ul" position="replace">
            <ul class="nav nav-pills flex-column mt16" id="o_shop_collapse_category">
                <li class="nav-item">
                    <a t-att-href="keep('/shop',category=0)" t-attf-class="nav-link#{'' if category else ' active'} o_not_editable">All Products</a>
                </li>
                <t t-foreach="categories" t-as="categ">
                    <t t-call="website_sale.option_collapse_categories_recursive" />
                </t>
            </ul>
        </xpath>
    </template>

    <template id="products_attributes" inherit_id="website_sale.products" active="False" customize_show="True" name="Product Attribute's Filters">
        <xpath expr="//div[@id='products_grid_before']" position="inside">
            <form class="js_attributes" method="get">
                <input type="hidden" name="search" t-att-value="search" />
                <ul class="nav nav-pills flex-column mt16">
                    <t t-foreach="attributes" t-as="a">
                        <li t-if="a.value_ids and len(a.value_ids) &gt; 1" class="nav-item">
                            <div>
                                <strong t-field="a.name" />
                            </div>
                            <t t-if="a.type == 'select'">
                                <select class="form-control" name="attrib">
                                    <option value="" />
                                    <t t-foreach="a.value_ids" t-as="v">
                                        <option t-att-value="'%s-%s' % (a.id,v.id)" t-esc="v.name" t-att-selected="v.id in attrib_set" />
                                    </t>
                                </select>
                            </t>
                            <t t-if="a.type == 'radio'">
                                <ul class="nav nav-pills flex-column">
                                    <t t-foreach="a.value_ids" t-as="v">
                                        <li class="nav-item">
                                            <label style="margin: 0 20px;" t-attf-class="nav-link#{' active' if v.id in attrib_set else ''}">
                                                <input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id,v.id)" t-att-checked="'checked' if v.id in attrib_set else None" />
                                                <span style="font-weight: normal" t-field="v.name" />
                                            </label>
                                        </li>
                                    </t>
                                </ul>
                            </t>
                            <t t-if="a.type == 'color'">
                                <t t-foreach="a.value_ids" t-as="v">
                                    <label t-attf-style="background-color:#{v.html_color or v.name}" t-attf-class="css_attribute_color #{'active' if v.id in attrib_set else ''}">
                                        <input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id,v.id)" t-att-checked="'checked' if v.id in attrib_set else None" t-att-title="v.name" />
                                    </label>
                                </t>
                            </t>
                        </li>
                    </t>
                </ul>
            </form>
        </xpath>
        <xpath expr="//div[@id='products_grid_before']" position="attributes">
            <attribute name="class">col-lg-3 d-none d-md-block</attribute>
        </xpath>
        <xpath expr="//div[@id='products_grid']" position="attributes">
            <attribute name="class">col-lg-9</attribute>
        </xpath>
    </template>

    <template id="products_list_view" inherit_id="website_sale.products" active="False" customize_show="True" name="List View">
        <xpath expr="//div[@id='products_grid']//table" position="replace">
            <t t-foreach="products" t-as="product">
                <div class="oe_product oe_list oe_product_cart" t-att-data-publish="product.website_published and 'on' or 'off'">
                    <t t-call="website_sale.products_item">
                        <t t-set="show_publish" t-value="True" />
                    </t>
                </div>
            </t>
        </xpath>
    </template>

    <!-- /shop/product product page -->
    <template id="product_edit_options" inherit_id="website.user_navbar" name="Edit Product Options">
        <xpath expr="//li[@id='edit-page-menu']" position="after">
            <t t-if="main_object._name == 'product.template'" t-set="action" t-value="'product.product_template_action'" />
        </xpath>
    </template>
    <template id="product" name="Product">
        <t t-call="website.layout">
            <t t-set="additional_title" t-value="product.name" />
            <div itemscope="itemscope" itemtype="http://schema.org/Product" id="wrap" class="js_sale">
                <section t-attf-class="container py-2 oe_website_sale #{(compute_currency(product.lst_price) - product.website_price) &gt; 0.01 and website.get_current_pricelist().discount_policy == 'without_discount'  and 'discount'}" id="product_detail">
                    <div class="row">
                        <div class="col-md-4">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a t-att-href="keep(category=0)">Products</a>
                                </li>
                                <li t-if="category" class="breadcrumb-item">
                                    <a t-att-href="keep('/shop/category/%s' % slug(category), category=0)" t-field="category.name" />
                                </li>
                                <li class="breadcrumb-item active">
                                    <span t-field="product.name" />
                                </li>
                            </ol>
                        </div>
                        <div class="col-md-8">
                            <div class="form-inline justify-content-end">
                                <t t-call="website_sale.search"/>
                                <t t-call="website_sale.pricelist_list">
                                    <t t-set="_classes">ml-2</t>
                                </t>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <t t-set="variant_img" t-value="any(product.mapped('product_variant_ids.image_variant'))"/>
                            <t t-set="image_ids"  t-value="product.product_image_ids"/>
                            <div id="o-carousel-product" class="carousel slide" data-ride="carousel" data-interval="0">
                              <div class="carousel-outer">
                                <div class="carousel-inner">
                                    <div t-if="variant_img" class="carousel-item active" itemprop="image" t-field="product[:1].product_variant_id.image" t-options="{'widget': 'image', 'class': 'product_detail_img js_variant_img', 'alt-field': 'name', 'zoom': 'image', 'unique': str(product['__last_update']) + (str(product.product_variant_id['__last_update']) or '')}"/>
                                    <div t-attf-class="carousel-item#{'' if variant_img else ' active'}" itemprop="image" t-field="product.image" t-options="{'widget': 'image', 'class': 'product_detail_img', 'alt-field': 'name', 'zoom': 'image', 'unique': product['__last_update']}"/>
                                    <t t-if="len(image_ids)" t-foreach="image_ids" t-as="pimg">
                                        <div class="carousel-item" t-field="pimg.image" t-options='{"widget": "image", "class": "product_detail_img", "alt-field": "name", "zoom": "image" }'/>
                                    </t>
                                </div>

                                <t t-if="len(image_ids) or variant_img">
                                    <a class="carousel-control-prev" href="#o-carousel-product" role="button" data-slide="prev" >
                                        <span class="fa fa-chevron-left" role="img" aria-label="Previous" title="Previous"/>
                                    </a>
                                    <a class="carousel-control-next" href="#o-carousel-product" role="button" data-slide="next">
                                        <span class="fa fa-chevron-right" role="img" aria-label="Next" title="Next"/>
                                    </a>
                                </t>
                              </div>

                              <ol class="carousel-indicators" t-if="len(image_ids) or variant_img">
                                <li t-if="variant_img" data-target="#o-carousel-product" data-slide-to="0" class="active">
                                    <img class="img img-fluid js_variant_img_small" t-attf-src="/website/image/product.product/{{product.product_variant_id.id}}/image/90x90" t-att-alt="product.name"/>
                                </li>
                                <li data-target="#o-carousel-product" t-att-data-slide-to="1 if variant_img else '0'" t-att-class="'' if variant_img else 'active'">
                                    <img class="img img-fluid" t-attf-src="/website/image/product.template/{{product.id}}/image/90x90" t-att-alt="product.name"/>
                                </li>
                                <t t-if="len(image_ids)" t-foreach="image_ids" t-as="pimg">
                                    <li data-target="#o-carousel-product" t-att-data-slide-to="pimg_index + (variant_img and 2 or 1)">
                                        <img class="img img-fluid" t-attf-src="/website/image/product.image/{{pimg.id}}/image/90x90" t-att-alt="pimg.name"/>
                                    </li>
                                </t>
                              </ol>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-4 offset-xl-2" id="product_details">
                            <h1 itemprop="name" t-field="product.name">Product Name</h1>
                            <span itemprop="url" style="display:none;" t-esc="'%sshop/product/%s' % (request.httprequest.url_root, slug(product))"/>
                            <form action="/shop/cart/update" method="POST">
                                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                <div class="js_product js_main_product">
                                    <t t-placeholder="select">
                                        <input type="hidden" class="product_id" name="product_id" t-att-value="product.product_variant_id.id if len(product.product_variant_ids) == 1 else '0'" />
                                        <input type="hidden" class="product_template_id" name="product_template_id" t-att-value="product.id" />
                                        <t t-call="sale.variants">
                                            <t t-set="ul_class" t-value="'flex-column'" />
                                        </t>
                                    </t>
                                    <t t-call="website_sale.product_price" />
                                    <p t-if="product.has_dynamic_attributes() or len(product.product_variant_ids) &gt; 1" class="css_not_available_msg bg-danger" style="padding: 15px;">This combination does not exist.</p>
                                    <a role="button" id="add_to_cart" class="btn btn-primary btn-lg mt8 js_check_product a-submit" href="#">Add to Cart</a>
                                </div>
                            </form>
                            <hr t-if="product.description_sale" />
                            <div class="o_not_editable">
                                <p t-field="product.description_sale" class="text-muted" />
                            </div>
                            <hr />
                            <p class="text-muted">
                              30-day money-back guarantee<br />
                              Free Shipping in U.S.<br />
                              Buy now, get in 2 days
                            </p>
                        </div>
                    </div>
                </section>
                <div itemprop="description" t-field="product.website_description" class="oe_structure mt16" id="product_full_description" />
            </div>
        </t>
    </template>

    <template inherit_id='website_sale.product' id="product_picture_magnify" customize_show="True" name="Image Zoom">
        <xpath expr='//div[hasclass("js_sale")]' position='attributes'>
            <attribute name="class" separator=" " add="ecom-zoomable zoomodoo-next" />
        </xpath>
    </template>

    <template inherit_id='website_sale.product' id="product_picture_magnify_auto" active="False" customize_show="True" name="Automatic Image Zoom">
        <xpath expr='//div[hasclass("js_sale")]' position='attributes'>
            <attribute name="data-ecom-zoom-auto">1</attribute>
            <attribute name="class" separator=" " add="ecom-zoomable zoomodoo-next" />

        </xpath>
    </template>

    <template id="recommended_products" inherit_id="website_sale.product" customize_show="True" name="Alternative Products">
        <xpath expr="//div[@id='product_full_description']" position="after">
            <div class="container mt32" t-if="product.alternative_product_ids">
                <h3>Alternative Products:</h3>
                <div class="row mt16" style="">
                    <t t-foreach="product.alternative_product_ids" t-as="alt_product">
                        <div class="col-lg-2" style="width: 170px; height:130px; float:left; display:inline; margin-right: 10px; overflow:hidden;">
                            <div class="mt16 text-center" style="height: 100%;">
                                <div t-field="alt_product.image_small" t-options="{'widget': 'image', 'class': 'rounded shadow o_alternative_product' }" />
                                <h6>
                                    <a t-attf-href="/shop/product/#{ slug(alt_product) }" style="display: block">
                                        <span t-att-title="alt_product.name" t-field="alt_product.name" class="o_text_overflow" style="display: block;" />
                                    </a>
                                </h6>
                            </div>
                        </div>
                    </t>
                </div>
            </div>
        </xpath>
    </template>

    <template id="product_attributes" inherit_id="website_sale.product" name="Product attributes">
        <xpath expr="//p[@t-field='product.description_sale']" position="after">
            <hr t-if="sum([(1 if len(l.value_ids)==1 else 0) for l in product.attribute_line_ids])" id='hr_product_attributes_simple'/>
            <p class="text-muted" id="product_attributes_simple">
                <t t-foreach="product.attribute_line_ids.sorted(key=lambda x: x.attribute_id.sequence)" t-as="variant_id">
                    <t t-if="len(variant_id.value_ids)==1">
                        <span t-field="variant_id.attribute_id" />: <span t-field="variant_id.value_ids[0].name" /><br /></t>
                </t>
            </p>
        </xpath>
    </template>

    <!-- Product options: OpenChatter -->
    <template id="product_comment" inherit_id="website_sale.product" active="False" customize_show="True" name="Discussion and Rating">
        <xpath expr="//div[@t-field='product.website_description']" position="after">
            <div class="o_shop_discussion_rating">
                <section class="container mt16 mb16">
                    <hr/>
                    <div class="row">
                        <div class="col-lg-8 offset-lg-2">
                            <t t-call="portal.message_thread">
                                <t t-set="object" t-value="product"/>
                                <t t-set="display_rating" t-value="True"/>
                            </t>
                        </div>
                    </div>
                </section>
            </div>
        </xpath>
    </template>

    <template id="product_quantity" inherit_id="website_sale.product" customize_show="True" name="Select Quantity">
      <xpath expr="//a[@id='add_to_cart']" position="before">
        <div class="css_quantity input-group oe_website_spinner" contenteditable="false">
            <div class="input-group-prepend">
                <a t-attf-href="#" class="btn btn-secondary js_add_cart_json" aria-label="Remove one" title="Remove one">
                    <i class="fa fa-minus"></i>
                </a>
            </div>
            <input type="text" class="form-control quantity" data-min="1" name="add_qty" value="1"/>
            <div class="input-group-append">
                <a t-attf-href="#" class="btn btn-secondary float_left js_add_cart_json" aria-label="Add one" title="Add one">
                    <i class="fa fa-plus"></i>
                </a>
            </div>
        </div>
      </xpath>
    </template>

    <template id="product_price">
      <div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer" class="product_price mt16">
          <h4 class="oe_price_h4 css_editable_mode_hidden">
              <span class="text-danger oe_default_price" style="text-decoration: line-through; white-space: nowrap;"
                t-esc="compute_currency(product.website_public_price)" t-options="{'widget': 'monetary', 'display_currency': website.get_current_pricelist().currency_id, 'from_currency': website.currency_id}" t-att-style="'text-decoration: line-through; white-space: nowrap; ' + '' if product.product_variant_id and product.website_price_difference and website.get_current_pricelist().discount_policy == 'without_discount' else 'display: none;'"
              />
              <b class="oe_price" style="white-space: nowrap;" t-esc="product.website_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
              <span itemprop="price" style="display:none;" t-esc="product.website_price"/>
              <span itemprop="priceCurrency" style="display:none;" t-esc="website.currency_id.name"/>
          </h4>
          <h4 class="css_non_editable_mode_hidden decimal_precision" t-att-data-precision="str(product.currency_id.decimal_places)">
            <span t-field="product.lst_price"
                t-options='{
                   "widget": "monetary",
                   "display_currency": product.currency_id,
               }'/>
          </h4>
          <h4 class="d-none oe_not_available bg-warning">Option not available</h4>
      </div>
    </template>

    <template id="product_variants" inherit_id="website_sale.product" active="False" customize_show="True" name="List View of Variants">
      <xpath expr="//t[@t-placeholder='select']" position="replace">
        <t t-set="attribute_exclusions" t-value="get_attribute_exclusions(product, reference_product)"/>
        <ul class="d-none js_add_cart_variants" t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)"/>
        <input type="hidden" t-if="len(product.product_variant_ids) == 1" class="product_id" name="product_id" t-att-value="product.product_variant_id.id"/>
        <t t-if="len(product.product_variant_ids) &gt; 1">
            <div t-foreach="product.product_variant_ids" t-as="variant_id" class="custom-control custom-radio">
                <input type="radio" name="product_id" class="custom-control-input js_product_change" t-att-checked="'checked' if variant_id_index == 0 else None" t-attf-id="radio_variant_#{variant_id.id}" t-att-value="variant_id.id" t-att-data-lst_price="compute_currency(variant_id.lst_price)" t-att-data-price="variant_id.price"/>
                <label t-attf-for="radio_variant_#{variant_id.id}" label-default="label-default" class="custom-control-label">
                    <span t-esc="variant_id.name_get()[0][1]"/>
                    <t t-set="diff_price" t-value="variant_id.price - variant_id.product_tmpl_id.price"/>
                    <span class="badge badge-pill" t-if="diff_price != 0">
                        <t t-esc="diff_price > 0 and '+' or '-'"/><span t-esc="abs(diff_price)" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
                    </span>
                </label>
            </div>
        </t>
      </xpath>
    </template>

    <template id="wizard_checkout" name="Wizard Checkout">
        <t t-set="website_sale_order" t-value="website.sale_get_order()"/>

        <div class="row">
            <div class="col-xl">
                <div class="wizard">
                    <div class="progress-wizard">
                        <a class="no-decoration" t-att-href="step&gt;=10 and '/shop/cart' or '#'">
                          <div id="wizard-step10" t-att-class="'progress-wizard-step %s' % (step == 10 and 'active' or step&gt;10 and 'complete' or 'disabled')">
                            <div class="progress-wizard-bar d-none d-md-block"/>
                            <span class="progress-wizard-dot d-none d-md-inline-block"></span>
                            <div class="text-center progress-wizard-steplabel">Review Order</div>
                          </div>
                        </a>
                        <a class="no-decoration" t-att-href="step&gt;=20 and '/shop/checkout' or '#'">
                          <div id="wizard-step20" t-att-class="'progress-wizard-step %s' % (step == 20 and 'active' or step&gt;20 and 'complete' or 'disabled')">
                            <div class="progress-wizard-bar d-none d-md-block"/>
                            <span class="progress-wizard-dot d-none d-md-inline-block"></span>
                            <div class="text-center progress-wizard-steplabel">Address</div>
                          </div>
                        </a>
                        <a class="no-decoration" t-att-href="step&gt;=40 and '/shop/payment' or '#'">
                          <div id="wizard-step40" t-att-class="'progress-wizard-step %s' % (step == 40 and 'active' or step&gt;40 and 'complete' or 'disabled')">
                            <div class="progress-wizard-bar d-none d-md-block"/>
                            <span class="progress-wizard-dot d-none d-md-inline-block"></span>
                            <div class="text-center progress-wizard-steplabel">Confirm Order</div>
                          </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <template id="extra_info" name="Checkout Extra Info">
        <t t-call="website.layout">
            <t t-set="no_footer">1</t>
            <div id="wrap">
                <div class="container oe_website_sale py-2">
                    <div class="row">
                        <div class="col-12">
                            <t t-call="website_sale.wizard_checkout">
                                <t t-set="step" t-value="30"/>
                            </t>
                        </div>
                        <div class="col-12 col-xl-auto order-xl-2 d-none d-xl-block">
                            <t t-call="website_sale.cart_summary"/>
                        </div>
                        <div class="col-12 col-xl order-xl-1 oe_cart">
                            <div class="row">
                                <div class="col">
                                    <form action="/website_form/" method="post" class="s_website_form container-fluid" enctype="multipart/form-data" data-force_action="shop.sale.order" data-model_name="sale.order" data-success_page="/shop/payment">
                                        <div class="form-group row form-field o_website_form_custom">
                                            <div class="col-lg-3 col-md-4 text-md-right">
                                                <label class="col-form-label" for="client_order_ref">Your Reference</label>
                                            </div>
                                            <div class="col-lg-9 col-md-8">
                                                <input type="text" class="form-control o_website_form_input" name="client_order_ref"/>
                                            </div>
                                        </div>
                                        <div class="form-group row form-field o_website_form_custom">
                                            <div class="col-lg-3 col-md-4 text-md-right">
                                                <label class="col-form-label" for="Give us your feedback">Give us your feedback</label>
                                            </div>
                                            <div class="col-lg-9 col-md-8">
                                                <textarea class="form-control o_website_form_input" rows="8" name="Give us your feedback" />
                                            </div>
                                        </div>
                                        <div class="form-group row form-field o_website_form_custom">
                                            <div class="col-lg-3 col-md-4 text-md-right">
                                                <label class="col-form-label" for="a_document">A document to provide</label>
                                            </div>
                                            <div class="col-lg-9 col-md-8">
                                                <input type="file" class="form-control o_website_form_input" name="a_document" />
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-lg-3 col-md-4">
                                            </div>
                                            <div class="col-lg-9 col-md-8">
                                                <a role="button" href="/shop/checkout" class="btn btn-secondary mb32 float-left"><span class="fa fa-chevron-left" /> Previous</a>
                                                <a role="button" class="btn btn-primary float-right mb32 o_website_form_send" href="/shop/confirm_order">Next <span class="fa fa-chevron-right" /></a>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="oe_structure" id="oe_structure_website_sale_extra_info_1"/>
        </t>
    </template>

    <template id="extra_info_option" name="Extra Step Option" inherit_id="wizard_checkout" active="False" customize_show="True">
        <!-- Add a "flag element" to trigger style variation -->
        <xpath expr="//div[hasclass('wizard')]/div" position="before">
            <span class="o_wizard_has_extra_step d-none"/>
        </xpath>
        <xpath expr="//div[@id='wizard-step20']" position="after">
            <a class="no-decoration" t-att-href="step&gt;=30 and '/shop/extra_info' or '#'">
                <div id="wizard-step30" t-att-class="'progress-wizard-step %s' % (step == 30 and 'active' or step&gt;30 and 'complete' or 'disabled')">
                    <div class="progress-wizard-bar d-none d-md-block"/>
                    <span class="progress-wizard-dot d-none d-md-inline-block"></span>
                    <div class="text-center progress-wizard-steplabel">Extra Info</div>
                </div>
            </a>
        </xpath>
    </template>

    <!-- We use this template where we want to give the user a link to the product of a sale order line. -->
    <template id="cart_line_product_link" name="Shopping Cart Line Product Link">
        <a t-attf-href="/shop/product/#{ slug(line.product_id.product_tmpl_id) }">
            <t t-raw="0"/>
        </a>
    </template>

    <!-- This template displays all the lines following the first one on the description of the sale order line, with a muted style. For typical products this content will be the product description_sale. -->
    <template id="cart_line_description_following_lines" name="Shopping Cart Line Description Following Lines">
        <div t-if="line.get_description_following_lines()" t-attf-class="text-muted {{div_class}} small">
            <t t-foreach="line.get_description_following_lines()" t-as="name_line">
                <span><t t-esc="name_line"/></span>
                <br t-if="not name_line_last" />
            </t>
        </div>
    </template>

    <!-- This template is the one at the "Review order" step (the first one) on the checkout workflow. -->
    <template id="cart_lines" name="Shopping Cart Lines">
        <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="js_cart_lines alert alert-info">
          Your cart is empty!
        </div>
        <table class="mb16 table table-striped table-sm js_cart_lines" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
            <thead>
                <tr>
                    <th class="td-img">Product</th>
                    <th></th>
                    <th class="text-center td-qty">Quantity</th>
                    <th class="text-center td-price">Price</th>
                    <th class="text-center td-action"></th>
                </tr>
            </thead>
            <tbody>
                <t t-foreach="website_sale_order.website_order_line" t-as="line">
                    <tr t-att-class="'optional_product info' if line.linked_line_id else None">
                        <td colspan="2" t-if="not line.product_id.product_tmpl_id" class='td-img'></td>
                        <td align="center" t-if="line.product_id.product_tmpl_id" class='td-img'>
                            <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'rounded'}" />
                        </td>
                        <td t-if="line.product_id.product_tmpl_id" class='td-product_name'>
                            <div>
                                <t t-call="website_sale.cart_line_product_link">
                                    <strong t-field="line.name_short" />
                                </t>
                            </div>
                            <t t-call="website_sale.cart_line_description_following_lines">
                                <t t-set="div_class" t-value="'d-none d-md-block'"/>
                            </t>
                        </td>
                        <td class="text-center td-qty">
                            <div t-if="not line.linked_line_id" class="css_quantity input-group oe_website_spinner">
                                <div class="input-group-prepend">
                                    <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"></i>
                                    </a>
                                </div>
                                <input type="text" 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="int(line.product_uom_qty) == line.product_uom_qty and int(line.product_uom_qty) or line.product_uom_qty" />
                                <div class="input-group-append">
                                    <a 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"></i>
                                    </a>
                                </div>
                            </div>
                            <t t-if="line.linked_line_id">
                              <span class="js_quantity text-muted" t-att-data-line-id="line.id" t-att-data-product-id="line.product_id.id" t-esc="int(line.product_uom_qty)"/>
                            </t>
                        </td>
                        <td class="text-center td-price" name="price">
                            <t t-if="(compute_currency(line.product_id.lst_price) - line.price_reduce ) &gt; 0.01  and website.get_current_pricelist().discount_policy=='without_discount'">
                                <del t-attf-class="#{'text-danger mr8'}" style="white-space: nowrap;" t-esc="compute_currency(line.product_id.website_public_price)" t-options="{'widget': 'monetary', 'display_currency': website.get_current_pricelist().currency_id, 'from_currency': website.currency_id}" />
                            </t>
                            <span t-field="line.price_reduce_taxexcl" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" groups="account.group_show_line_subtotals_tax_excluded" />
                            <span t-field="line.price_reduce_taxinc" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" groups="account.group_show_line_subtotals_tax_included" />
                        </td>
                        <td class="td-action">
                            <a href='#' aria-label="Remove from cart" title="Remove from cart" class='js_delete_product no-decoration'> <small><i class='fa fa-trash-o'></i></small></a>
                        </td>
                    </tr>
                </t>
            </tbody>
        </table>

    </template>

    <template id="cart" name="Shopping Cart">
        <t t-call="website.layout">
            <div id="wrap">
                <div class="container oe_website_sale py-2">
                    <div class="row">
                        <div class="col-12">
                            <t t-call="website_sale.wizard_checkout">
                                <t t-set="step" t-value="10" />
                            </t>
                        </div>
                        <div class="col-12 col-xl-8 oe_cart">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div t-if="abandoned_proceed or access_token" class="mt8 mb8 alert alert-info" role="alert"> <!-- abandoned cart choices -->
                                        <t t-if="abandoned_proceed">
                                            <p>Your previous cart has already been completed.</p>
                                            <p t-if="website_sale_order">Please proceed your current cart.</p>
                                        </t>
                                        <t t-if="access_token">
                                            <p>This is your current cart.</p>
                                            <p>
                                                <strong><a t-attf-href="/shop/cart/?access_token=#{access_token}&amp;revive=squash">Click here</a></strong> if you want to restore your previous cart. Your current cart will be replaced with your previous cart.</p>
                                            <p>
                                                <strong><a t-attf-href="/shop/cart/?access_token=#{access_token}&amp;revive=merge">Click here</a></strong> if you want to merge your previous cart into current cart.
                                            </p>
                                        </t>
                                    </div>
                                    <t t-call="website_sale.cart_lines" />
                                    <div class="clearfix" />
                                    <a role="button" href="/shop" class="btn btn-secondary mb32 d-none d-xl-inline-block">
                                        <span class="fa fa-chevron-left" />
                                        <span class="">Continue Shopping</span>
                                    </a>
                                    <a role="button" t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary float-right d-none d-xl-inline-block" href="/shop/checkout?express=1">
                                        <span class="">Process Checkout</span>
                                        <span class="fa fa-chevron-right" />
                                    </a>
                                    <div class="oe_structure" id="oe_structure_website_sale_cart_1"/>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-xl-4">
                            <t t-call="website_sale.short_cart_summary"/>
                            <div class="d-xl-none mt8">
                                <a role="button" href="/shop" class="btn btn-secondary mb32">
                                    <span class="fa fa-chevron-left" />
                                    Continue<span class="d-none d-md-inline"> Shopping</span>
                                </a>
                                <a role="button" t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary float-right" href="/shop/checkout?express=1">
                                    <span class="">Process Checkout</span>
                                    <span class="fa fa-chevron-right" />
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="oe_structure" id="oe_structure_website_sale_cart_2"/>
            </div>
        </t>
    </template>

    <!-- this template is the one when we mouse over "My Cart" on the top right -->
    <template id="cart_popover" name="Cart Popover">
        <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="alert alert-info">
          Your cart is empty!
        </div>
        <t t-if="website_sale_order and website_sale_order.website_order_line">
            <t t-foreach="website_sale_order.website_order_line" t-as="line">
                <div class="row mb8 cart_line">
                    <div class="col-3">
                        <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'rounded'}" />
                    </div>
                    <div class="col-9">
                        <div>
                            <t t-call="website_sale.cart_line_product_link">
                                <span class="h6" t-esc="line.name_short" />
                            </t>
                        </div>
                        Qty: <t t-esc="int(line.product_uom_qty) == line.product_uom_qty and int(line.product_uom_qty) or line.product_uom_qty" />
                    </div>
                </div>
            </t>
            <div class="text-center">
                <span class="h6">
                    <t t-call="website_sale.total">
                        <t t-set='hide_coupon'>True</t>
                    </t>
                </span>
                <a role="button" class="btn btn-primary" href="/shop/cart">
                       View Cart (<t t-esc="website_sale_order.cart_quantity" /> items)
                     </a>
            </div>
        </t>
    </template>

    <template id="suggested_products_list" inherit_id="website_sale.cart_lines" customize_show="True" name="Alternative Products in my cart">
        <xpath expr="//table[@id='cart_products']" position="after">
            <h5 class='text-muted js_cart_lines' t-if="suggested_products">Suggested Accessories:</h5>
            <table t-if="suggested_products" id="suggested_products" class="js_cart_lines table table-striped table-sm">
                <tbody>
                    <tr t-foreach="suggested_products" t-as="product">
                        <td class='td-img'>
                            <a t-attf-href="/shop/product/#{ slug(product.product_tmpl_id) }">
                                <span t-field="product.image_small" t-options="{'widget': 'image', 'class': 'rounded'}" />
                            </a>
                        </td>
                        <td class='td-product_name'>
                            <div>
                                <a t-attf-href="/shop/product/#{ slug(product.product_tmpl_id) }">
                                    <strong t-field="product.display_name" />
                                </a>
                            </div>
                            <div class="text-muted d-none d-md-block" t-field="product.description_sale" />
                        </td>
                        <td class='td-price'>
                            <t t-if="product.product_variant_id and product.website_price_difference  and website.get_current_pricelist().discount_policy=='without_discount'">
                                <del class="text-danger mr8" style="white-space: nowrap;" t-field="product.lst_price" t-options="{'widget': 'monetary','from_currency': product.currency_id, 'display_currency': website.currency_id}" />
                            </t>
                            <span t-field="product.website_price" style="white-space: nowrap;" t-options="{'widget': 'monetary','display_currency': website.currency_id}" />
                        </td>
                        <td class="col-lg-2 col-md-3 col-4 text-center">
                            <input class="js_quantity" name="product_id" t-att-data-product-id="product.id" type="hidden" />
                            <a role="button" class="btn btn-link js_add_suggested_products">
                                <strong>Add to Cart</strong>
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </xpath>
    </template>

    <template id='coupon_form' name='Coupon form'>
        <t t-if="request.params.get('code_not_available')" name="code_not_available">
            <p class="bg-warning">This promo code is not available</p>
        </t>
        <form t-att-action="'/shop/pricelist%s' % (redirect and '?r=' + redirect or '')"
            method="post" class="mb32" name="coupon_code">
            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
            <div class="input-group w-100">
                <input name="promo" class="form-control" type="text" placeholder="code..." t-att-value="website_sale_order.pricelist_id.code or None"/>
                <div class="input-group-append">
                    <a href="#" role="button" class="btn btn-secondary a-submit">Apply</a>
                </div>
            </div>
        </form>
    </template>

    <template id="checkout">
        <t t-call="website.layout">
            <t t-set="additional_title">Shop - Checkout</t>
            <t t-set="no_footer">1</t>
            <div id="wrap">
                <div class="container oe_website_sale py-2">
                    <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
                    <div class="row">
                        <div class="col-12">
                            <t t-call="website_sale.wizard_checkout">
                                <t t-set="step" t-value="20" />
                            </t>
                        </div>
                        <div class="col-12 col-xl-auto order-xl-2 d-none d-xl-block">
                            <t t-call="website_sale.cart_summary"/>
                        </div>
                        <div class="col-12 col-xl order-xl-1 oe_cart">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h3 class="o_page_header mt8">Billing Address</h3>
                                </div>
                                <div class="col-lg-6 one_kanban">
                                    <t t-call="website_sale.address_kanban">
                                        <t t-set='contact' t-value="order.partner_id"/>
                                        <t t-set='selected' t-value="1"/>
                                        <t t-set='readonly' t-value="1"/>
                                    </t>
                                </div>
                            </div>
                            <t t-if="not only_services" groups="sale.group_delivery_invoice_address">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <h3 class="o_page_header mt16 mb4">Shipping Address</h3>
                                    </div>
                                </div>
                                <div class="row all_shipping">
                                    <div class="col-lg-12">
                                        <div class="row mt8">
                                            <div class="col-md-12 col-lg-12 one_kanban">
                                                <form action="/shop/address" method="post" class=''>
                                                    <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                                    <a role="button" href="#" class='a-submit btn btn-secondary mb16 btn-block'>
                                                        <i class="fa fa-plus-square"/>
                                                        <span>Add an address</span>
                                                    </a>
                                                </form>
                                            </div>
                                            <t t-foreach="shippings" t-as="ship">
                                                <div class="col-md-12 col-lg-6 one_kanban">
                                                    <t t-call="website_sale.address_kanban">
                                                        <t t-set="actual_partner" t-value="order.partner_id" />
                                                        <t t-set='contact' t-value="ship"/>
                                                        <t t-set='selected' t-value="order.partner_shipping_id==ship"/>
                                                        <t t-set='readonly' t-value="bool(len(shippings)==1)"/>
                                                        <t t-set='edit_billing' t-value="bool(ship==order.partner_id)"/>
                                                    </t>
                                                </div>
                                            </t>
                                        </div>
                                    </div>
                                </div>
                            </t>
                            <div class="d-flex justify-content-between mt-3">
                                <a role="button" href="/shop/cart" class="btn btn-secondary mb32">
                                    <i class="fa fa-chevron-left"/>
                                    <span>Return to Cart</span>
                                </a>
                                <a role="button" href="/shop/confirm_order" class="btn btn-primary mb32">
                                    <span>Confirm</span>
                                    <i class="fa fa-chevron-right"/>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </t>
    </template>

    <template id="address_kanban" name="Kanban address">
            <form action="/shop/checkout" method="POST" class="d-none">
                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                <input type="hidden" name="partner_id" t-att-value="contact.id" />
                <t t-if='edit_billing'>
                    <input type="hidden" name="callback" value="/shop/checkout?use_billing" />
                </t>
                <input type='submit'/>
            </form>
            <div t-attf-class="card #{selected and 'border_primary' or 'js_change_shipping'}">
                <div class='card-body' style='min-height: 130px;'>
                    <a t-if="not actual_partner or (ship.id in actual_partner.ids + actual_partner.child_ids.ids)" href="#" class="btn btn-link float-right p-0 js_edit_address no-decoration" role="button" title="Edit this address" aria-label="Edit this address"><i class='fa fa-edit'/></a>
                    <t t-esc="contact" t-options="dict(widget='contact', fields=['name', 'address'], no_marker=True)"/>
                </div>
                <div class='card-footer' t-if='not readonly'>
                    <span class='btn-ship' t-att-style="'' if selected else 'display:none;'">
                        <a role="button" href='#' class="btn btn-block btn-primary">
                            <i class='fa fa-check'></i> Ship to this address
                        </a>
                    </span>
                    <span class='btn-ship' t-att-style="'' if not selected else 'display:none;'">
                        <a role="button" href='#' class="btn btn-block btn-secondary">
                            Select this address
                        </a>
                    </span>
                </div>
            </div>
    </template>

    <template id="address" name="Address Management">
        <t t-set="no_footer">1</t>
        <t t-call="website.layout">
            <div id="wrap">
                <div class="container oe_website_sale py-2">
                    <div class="row">
                        <div class="col-12">
                            <t t-call="website_sale.wizard_checkout">
                                <t t-set="step" t-value="20" />
                            </t>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-xl-auto order-xl-2 d-none d-xl-block">
                            <t t-call="website_sale.cart_summary"/>
                        </div>
                        <div class="col-12 col-xl order-xl-1 oe_cart">
                            <div>
                                <t t-if="mode == ('new', 'billing')">
                                    <h2 class="o_page_header mt8">Your Address
                                        <small> or </small>
                                        <a role="button" href='/web/login?redirect=/shop/checkout' class='btn btn-primary' style="margin-top: -11px">Log In</a>
                                    </h2>
                                </t>
                                <t t-if="mode == ('edit', 'billing')">
                                    <h2 class="o_page_header mt8">Your Address</h2>
                                </t>
                                <t t-if="mode[1] == 'shipping'">
                                    <h2 class="o_page_header mt8">Shipping Address </h2>
                                </t>
                                <t t-if="error" t-foreach="error.get('error_message', [])" t-as="err">
                                    <h4 class="text-danger" t-esc="err" />
                                </t>
                                <form action="/shop/address" method="post" class="checkout_autoformat">
                                    <div class="form-row">
                                        <div t-attf-class="form-group #{error.get('name') and 'o_has_error' or ''} col-lg-12 div_name">
                                            <label class="col-form-label" for="name">Name</label>
                                            <input type="text" name="name" t-attf-class="form-control #{error.get('name') and 'is-invalid' or ''}" t-att-value="'name' in checkout and checkout['name']" />
                                        </div>
                                        <div class="w-100"/>
                                        <t t-if="mode[1] == 'billing'">
                                            <div t-attf-class="form-group #{error.get('email') and 'o_has_error' or ''} col-lg-6" id="div_email">
                                                <label class="col-form-label" for="email">Email</label>
                                                <input type="email" name="email" t-attf-class="form-control #{error.get('email') and 'is-invalid' or ''}" t-att-value="'email' in checkout and checkout['email']" />
                                            </div>
                                        </t>
                                        <div t-attf-class="form-group #{error.get('phone') and 'o_has_error' or ''} col-lg-6" id="div_phone">
                                            <label class="col-form-label" for="phone">Phone</label>
                                            <input type="tel" name="phone" t-attf-class="form-control #{error.get('phone') and 'is-invalid' or ''}" t-att-value="'phone' in checkout and checkout['phone']" />
                                        </div>
                                        <div class="w-100"/>
                                        <div t-attf-class="form-group #{error.get('street') and 'o_has_error' or ''} col-lg-12 div_street">
                                            <label class="col-form-label" for="street">Street <span class="d-none d-md-inline"> and Number</span></label>
                                            <input type="text" name="street" t-attf-class="form-control #{error.get('street') and 'is-invalid' or ''}" t-att-value="'street' in checkout and checkout['street']" />
                                        </div>
                                        <div t-attf-class="form-group #{error.get('street2') and 'o_has_error' or ''} col-lg-12 div_street2">
                                            <label class="col-form-label label-optional" for="street2">Street 2</label>
                                            <input type="text" name="street2" t-attf-class="form-control #{error.get('street2') and 'is-invalid' or ''}" t-att-value="'street2' in checkout and checkout['street2']" />
                                        </div>
                                        <div class="w-100"/>
                                        <t t-set='zip_city' t-value='country and [x for x in country.get_address_fields() if x in ["zip", "city"]] or ["city", "zip"]'/>
                                        <t t-if="'zip' in zip_city and zip_city.index('zip') &lt; zip_city.index('city')">
                                            <div t-attf-class="form-group #{error.get('zip') and 'o_has_error' or ''} col-md-4 div_zip">
                                                <label class="col-form-label label-optional" for="zip">Zip Code</label>
                                                <input type="text" name="zip" t-attf-class="form-control #{error.get('zip') and 'is-invalid' or ''}" t-att-value="'zip' in checkout and checkout['zip']" />
                                            </div>
                                        </t>
                                        <div t-attf-class="form-group #{error.get('city') and 'o_has_error' or ''} col-md-8 div_city">
                                            <label class="col-form-label" for="city">City</label>
                                            <input type="text" name="city" t-attf-class="form-control #{error.get('city') and 'is-invalid' or ''}" t-att-value="'city' in checkout and checkout['city']" />
                                        </div>
                                        <t t-if="'zip' in zip_city and zip_city.index('zip') &gt; zip_city.index('city')">
                                            <div t-attf-class="form-group #{error.get('zip') and 'o_has_error' or ''} col-md-4 div_zip">
                                                <label class="col-form-label label-optional" for="zip">Zip Code</label>
                                                <input type="text" name="zip" t-attf-class="form-control #{error.get('zip') and 'is-invalid' or ''}" t-att-value="'zip' in checkout and checkout['zip']" />
                                            </div>
                                        </t>
                                        <div class="w-100"/>
                                        <div t-attf-class="form-group #{error.get('country_id') and 'o_has_error' or ''} col-lg-6 div_country">
                                            <label class="col-form-label" for="country_id">Country</label>
                                            <select id="country_id" name="country_id" t-attf-class="form-control #{error.get('country_id') and 'is-invalid' or ''}">
                                                <option value="">Country...</option>
                                                <t t-foreach="countries" t-as="c">
                                                    <option t-att-value="c.id" t-att-selected="c.id == (country and country.id or -1)">
                                                        <t t-esc="c.name" />
                                                    </option>
                                                </t>
                                            </select>
                                        </div>
                                        <div t-attf-class="form-group #{error.get('state_id') and 'o_has_error' or ''} col-lg-6 div_state" t-att-style="(not country or not country.state_ids) and 'display: none'">
                                            <label class="col-form-label" for="state_id">State / Province</label>
                                            <select name="state_id" t-attf-class="form-control #{error.get('state_id') and 'is-invalid' or ''}" data-init="1">
                                                <option value="">State / Province...</option>
                                                <t t-foreach="country and country.state_ids or []" t-as="s">
                                                    <option t-att-value="s.id" t-att-selected="s.id == ('state_id' in checkout and country and checkout['state_id'] != '' and int(checkout['state_id']))">
                                                        <t t-esc="s.name" />
                                                    </option>
                                                </t>
                                            </select>
                                        </div>
                                        <div class="w-100"/>
                                        <t t-if="mode == ('new', 'billing') and not only_services">
                                            <div class="col-lg-12">
                                                <div class="checkbox">
                                                  <label>
                                                    <input type="checkbox" id='shipping_use_same' class="mr8" name='use_same' value="1" checked='checked'/>Ship to the same address
                                                    <span class='ship_to_other text-muted' style="display: none">&amp;nbsp;(<i>Your shipping address will be requested later) </i></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </t>
                                    </div>

                                    <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                    <input type="hidden" name="submitted" value="1" />
                                    <input type="hidden" name="partner_id" t-att-value="partner_id or '0'" />
                                    <input type="hidden" name="callback" t-att-value="callback" />
                                    <!-- Example -->
                                    <input type="hidden" name="field_required" t-att-value="'phone,name'" />

                                    <div class="d-flex justify-content-between">
                                        <a role="button" t-att-href="mode == ('new', 'billing') and '/shop/cart' or '/shop/checkout'" class="btn btn-secondary mb32">
                                            <i class="fa fa-chevron-left"/>
                                            <span>Back</span>
                                        </a>
                                        <a role="button" href="#" class="btn btn-primary mb32 a-submit a-submit-disable a-submit-loading">
                                            <span>Next</span>
                                            <i class="fa fa-chevron-right"/>
                                        </a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </t>
    </template>

    <template id="address_b2b" inherit_id="address" name="Show b2b fields" customize_show="True" active="True">
        <xpath expr="//div[@id='div_phone']" position="after">
            <div class="w-100"/>
            <t t-if="mode == ('new', 'billing') or (mode == ('edit', 'billing') and (can_edit_vat or 'vat' in checkout and checkout['vat']))">
                <div t-attf-class="form-group #{error.get('company_name') and 'o_has_error' or ''} col-lg-6">
                    <label class="col-form-label font-weight-normal label-optional" for="company_name">Company Name</label>
                    <input type="text" name="company_name" t-attf-class="form-control #{error.get('company_name') and 'is-invalid' or ''}" t-att-value="'company_name' in checkout and checkout['company_name']" t-att-readonly="'1' if 'vat' in checkout and checkout['vat'] and not can_edit_vat else None" t-att-title="'Changing company name is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.' if 'vat' in checkout and checkout['vat'] and not can_edit_vat else None" />
                </div>
                <div t-attf-class="form-group #{error.get('vat') and 'o_has_error' or ''} col-lg-6 div_vat">
                    <label class="col-form-label font-weight-normal label-optional" for="vat">TIN / VAT </label>
                    <input type="text" name="vat" t-attf-class="form-control #{error.get('vat') and 'is-invalid' or ''}" t-att-value="'vat' in checkout and checkout['vat']" t-att-readonly="'1' if 'vat' in checkout and checkout['vat'] and not can_edit_vat else None" t-att-title="'Changing VAT number is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.' if 'vat' in checkout and checkout['vat'] and not can_edit_vat else None" />
                </div>
            </t>
        </xpath>
    </template>

    <template id="payment" name="Payment">
        <t t-call="website.layout">
            <t t-set="additional_title">Shop - Select Payment Acquirer</t>
            <t t-set="no_footer">1</t>

            <div id="wrap">
                <div class="container oe_website_sale py-2">
                    <div class="row">
                        <div class='col-12'>
                            <t t-call="website_sale.wizard_checkout">
                                <t t-set="step" t-value="40" />
                            </t>
                        </div>
                        <div class="col-12" t-if="errors">
                            <t t-foreach="errors" t-as="error">
                                <div class="alert alert-danger" t-if="error" role="alert">
                                    <h4>
                                        <t t-esc="error[0]" />
                                    </h4>
                                    <t t-esc="error[1]" />
                                </div>
                            </t>
                        </div>
                        <div class="col-12 col-xl-auto order-xl-2">
                            <t t-call="website_sale.cart_summary"/>
                        </div>
                        <div class="col-12 col-xl order-xl-1 oe_cart">
                            <div class="card">
                                <div class="card-body" id="shipping_and_billing">
                                    <a class='float-right no-decoration' href='/shop/checkout'><i class="fa fa-edit"/> Edit</a>
                                    <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
                                    <div><b>Billing<t t-if="same_shipping and not only_services"> &amp; Shipping</t>: </b><span t-esc='order.partner_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')" class="address-inline"/></div>
                                    <div t-if="not same_shipping and not only_services" groups="sale.group_delivery_invoice_address"><b>Shipping: </b><span t-esc='order.partner_shipping_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')"  class="address-inline"/></div>
                                </div>
                            </div>

                            <div class="oe_structure clearfix mt-3" id="oe_structure_website_sale_payment_1"/>

                            <div id="payment_method" class="mt-3" t-if="(acquirers or tokens) and website_sale_order.amount_total">
                                <h3 class="mb24">Pay with </h3>
                                <t t-call="payment.payment_tokens_list">
                                    <t t-set="mode" t-value="'payment'"/>
                                    <t t-set="submit_txt">Pay Now</t>
                                    <t t-set="icon_right" t-value="1"/>
                                    <t t-set="icon_class" t-value="'fa-chevron-right'"/>
                                    <t t-set="submit_class" t-value="'btn btn-primary'"/>
                                    <t t-set="pms" t-value="tokens"/>
                                    <t t-set="form_action" t-value="'/shop/payment/token'"/>
                                    <t t-set="prepare_tx_url" t-value="'/shop/payment/transaction/'"/>
                                    <t t-set="partner_id" t-value="partner"/>

                                    <t t-set="back_button_icon_class" t-value="'fa-chevron-left'"/>
                                    <t t-set="back_button_txt" t-value="'Return to Cart'"/>
                                    <t t-set="back_button_class" t-value="'btn btn-secondary'"/>
                                    <t t-set="back_button_link" t-value="'/shop/cart'"/>
                                </t>
                            </div>

                            <div t-if="not acquirers" class="mt-2">
                                <a role="button" class="btn-link"
                                    groups="base.group_system"
                                    t-attf-href="/web#return_label=Website&amp;action=#{payment_action_id}">
                                        <i class="fa fa-arrow-right"></i> Add payment acquirers
                                </a>
                            </div>
                            <div class="js_payment mt-3" t-if="not website_sale_order.amount_total" id="payment_method">
                                <form target="_self" action="/shop/payment/validate" method="post" class="float-right">
                                    <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                    <a role="button" class="btn btn-primary a-submit">
                                        <span t-if="order.amount_total &gt; 0">Pay Now <span class="fa fa-chevron-right"></span></span>
                                        <span t-if="order.amount_total == 0">Confirm Order <span class="fa fa-chevron-right"></span></span>
                                    </a>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="oe_structure" id="oe_structure_website_sale_payment_2"/>
            </div>
        </t>
    </template>


    <template id="short_cart_summary" name="Short Cart right column">
        <div class="card js_cart_summary" t-if="website_sale_order and website_sale_order.website_order_line" >
            <div class="card-body">
                <h4 class="d-none d-xl-block">Order Total</h4>
                <hr class="d-none d-xl-block"/>
                <div>
                    <t t-call="website_sale.total">
                        <t t-set='no_rowspan'>1</t>
                    </t>
                    <a role="button" t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-secondary float-right d-none d-xl-inline-block" href="/shop/checkout?express=1">
                        <span>Process Checkout</span>
                    </a>
                </div>
            </div>
        </div>
    </template>

    <!-- This template is the one present on the right during the payment process.
        Here it is important to not show too much information to the user, because we want him to pay!
        We shouldn't display link to products or long descriptions.
    -->
    <template id="cart_summary" name="Cart right column">
        <div class="card">
            <div class="card-body p-xl-0">
                <div class="toggle_summary d-xl-none">
                    <b>Your order: </b> <span t-field="website_sale_order.amount_total" t-options='{"widget": "monetary", "display_currency": website_sale_order.pricelist_id.currency_id}'/>
                    <span class='fa fa-chevron-down fa-border float-right' role="img" aria-label="Details" title="Details"></span>
                </div>
                <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="alert alert-info">
                    Your cart is empty!
                </div>
                <div class="toggle_summary_div d-none d-xl-block">
                    <table class="table table-striped table-sm w-xl-0" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
                        <thead>
                            <tr>
                                <th class="border-top-0 td-img">Product</th>
                                <th class="border-top-0"></th>
                                <th class="border-top-0 td-qty">Quantity</th>
                                <th class="border-top-0 text-center td-price">Price</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr t-foreach="website_sale_order.website_order_line" t-as="line">
                                <td class='' colspan="2" t-if="not line.product_id.product_tmpl_id"></td>
                                <td class='td-img' t-if="line.product_id.product_tmpl_id">
                                    <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'rounded'}" />
                                </td>
                                <td class='td-product_name' t-if="line.product_id.product_tmpl_id">
                                    <div>
                                        <strong t-field="line.name_short" />
                                    </div>
                                </td>
                                <td class='td-qty'>
                                    <div t-esc="line.product_uom_qty" />
                                </td>
                                <td class="text-center td-price">
                                    <span t-field="line.price_reduce_taxexcl" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" groups="account.group_show_line_subtotals_tax_excluded" />
                                    <span t-field="line.price_reduce_taxinc" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" groups="account.group_show_line_subtotals_tax_included" />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <t t-call="website_sale.total">
                        <t t-set='redirect'>/shop/payment</t>
                    </t>
                </div>
            </div>
        </div>
    </template>

    <template id="payment_sale_note" inherit_id="payment" name="Accept Terms &amp; Conditions" customize_show="True" active="False">
        <xpath expr="//div[@id='payment_method'][hasclass('js_payment')]" position="after">
            <div class="custom-control custom-checkbox float-right mt-2 oe_accept_cgv_button">
                <input type="checkbox" id="checkbox_cgv" class="custom-control-input"/>
                <label for="checkbox_cgv" class="custom-control-label">
                    I agree to the <a target="_BLANK" href="/shop/terms">terms &amp; conditions</a>
                </label>
            </div>
        </xpath>
    </template>

    <template id="confirmation">
        <t t-call="website.layout">
            <t t-set="additional_title">Shop - Confirmed</t>
            <div id="wrap">
                <div class="container oe_website_sale py-2">
                    <h1><span>Order</span> <em t-field="order.name" /> <t t-if="order.state == 'sale'"><span>Confirmed</span></t></h1>

                    <div class="row">
                        <div class="col-12 col-xl">
                            <div class="oe_cart">
                                <t t-set="payment_tx_id" t-value="order.get_portal_last_transaction()"/>
                                <t t-if="payment_tx_id.state == 'done'">
                                    <div class="thanks_msg">
                                        <h2>Thank you for your order.
                                            <a role="button" class="btn btn-primary d-none d-md-inline-block" href="/shop/print" target="_blank" aria-label="Print" title="Print"><i class="fa fa-print"></i> Print</a>
                                        </h2>
                                    </div>
                                </t>
                                <t t-if="request.env['ir.config_parameter'].sudo().get_param('auth_signup.invitation_scope', 'b2b') == 'b2c' and request.website.is_public_user()">
                                    <p class="alert alert-info mt-3" role="status">
                                        <a role="button" t-att-href='order.partner_id.signup_prepare() and order.partner_id.signup_url' class='btn btn-primary'>Sign Up</a>
                                         to follow your order.
                                    </p>
                                </t>
                                <div class="oe_structure clearfix mt-3" id="oe_structure_website_sale_confirmation_1"/>
                                <h3 class="text-left mt-3">
                                    <strong>Payment Information:</strong>
                                </h3>
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <td colspan="2">
                                                <t t-esc="order.get_portal_last_transaction().acquirer_id.name" />
                                            </td>
                                            <td class="text-right" width="100">
                                                <strong>Total:</strong>
                                            </td>
                                            <td class="text-right" width="100">
                                                <strong t-field="order.amount_total" t-options="{'widget': 'monetary', 'display_currency': order.pricelist_id.currency_id}" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <t t-call="website_sale.payment_confirmation_status"/>
                                <div class="card mt-3">
                                  <div class="card-body">
                                    <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
                                    <div><b>Billing <t t-if="same_shipping and not only_services"> &amp; Shipping</t>: </b><span t-esc='order.partner_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')" class="address-inline"/></div>
                                    <div t-if="not same_shipping and not only_services" groups="sale.group_delivery_invoice_address"><b>Shipping: </b><span t-esc='order.partner_shipping_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')"  class="address-inline"/></div>
                                  </div>
                                </div>
                                <div class="oe_structure mt-3" id="oe_structure_website_sale_confirmation_2"/>
                            </div>
                        </div>
                        <div class="col-12 col-xl-auto">
                            <t t-set="website_sale_order" t-value="order"/>
                            <t t-call="website_sale.cart_summary">
                                <t t-set="hide_coupon">1</t>
                            </t>
                        </div>
                    </div>
                </div>
                <div class="oe_structure" id="oe_structure_website_sale_confirmation_3"/>
            </div>
        </t>
    </template>

    <template id="total">
        <div id="cart_total" t-att-class="extra_class or ''" t-if="website_sale_order and website_sale_order.website_order_line">
            <table class="table">
                  <tr id="empty">
                      <t t-if='not no_rowspan'><td rowspan="10" class="noborder"/></t>
                      <td class="col-md-2 col-3 noborder"></td>
                      <td class="col-md-2 col-3 noborder" ></td>
                  </tr>
                  <tr id="order_total_untaxed">
                      <td class="text-right noborder">Subtotal:</td>
                      <td class="text-xl-right noborder" >
                          <span t-field="website_sale_order.amount_untaxed" style="white-space: nowrap;" t-options="{'widget': 'monetary','from_currency': website_sale_order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
                      </td>
                  </tr>
                  <tr id="order_total_taxes">
                      <td class="text-right noborder">Taxes:</td>
                      <td class="text-xl-right noborder">
                           <span t-field="website_sale_order.amount_tax" style="white-space: nowrap;" t-options="{'widget': 'monetary', 'from_currency': website_sale_order.pricelist_id.currency_id, 'display_currency': website.currency_id}" />
                      </td>
                  </tr>
                  <tr id="order_total">
                      <td class="text-right"><strong>Total:</strong></td>
                      <td class="text-xl-right">
                          <strong t-field="website_sale_order.amount_total"
                              t-options='{"widget": "monetary", "display_currency": website_sale_order.pricelist_id.currency_id}'/>
                      </td>
                  </tr>
            </table>
        </div>
    </template>

    <template id="reduction_code" inherit_id="website_sale.total" active="True" customize_show="True" name="Promo Code">
        <xpath expr="//div[@id='cart_total']//table/tr[last()]" position="after">
            <tr t-if="not hide_coupon">
                <td colspan="3" class="text-center text-xl-right noborder p-0">
                <span class=''>
                    <t t-set='force_coupon' t-value="website_sale_order.pricelist_id.code or request.params.get('code_not_available')"/>
                    <t t-if="not force_coupon">
                        <a href="#" class="show_coupon">I have a promo code</a>
                    </t>
                    <div t-attf-class="coupon_form #{not force_coupon and 'd-none'}">
                        <t t-call="website_sale.coupon_form"/>
                    </div>
                </span>
                </td>
            </tr>
        </xpath>
    </template>


    <template id="payment_confirmation_status">
        <div class="oe_website_sale_tx_status mt-3" t-att-data-order-id="order.id">
            <t t-set="payment_tx_id" t-value="order.get_portal_last_transaction()"/>
            <div class="card">
                <div t-att-class="'card-header %s' % (
                    (payment_tx_id.state == 'pending' and 'bg-info') or
                    (payment_tx_id.state == 'done' and 'bg-success') or
                    (payment_tx_id.state == 'authorized' and 'bg-success') or
                    'bg-danger')">
                    <a role="button" groups="base.group_system" class="btn btn-sm btn-link text-white float-right" target="_blank" aria-label="Edit" title="Edit"
                            t-att-href="'/web#model=%s&amp;id=%s&amp;action=%s&amp;view_type=form' % ('payment.acquirer', payment_tx_id.acquirer_id.id, 'payment.action_payment_acquirer')">
                        <i class="fa fa-pencil"></i>
                    </a>
                    <t t-if="payment_tx_id.state == 'pending'">
                        <t t-raw="payment_tx_id.acquirer_id.pending_msg"/>
                    </t>
                    <t t-if="payment_tx_id.state == 'done'">
                        <t t-raw="payment_tx_id.acquirer_id.done_msg"/>
                    </t>
                    <t t-if="payment_tx_id.state == 'cancel'">
                        <t t-raw="payment_tx_id.acquirer_id.cancel_msg"/>
                    </t>
                    <t t-if="payment_tx_id.state == 'error'">
                        <span t-if="payment_tx_id.acquirer_id.error_msg" t-raw="payment_tx_id.acquirer_id.error_msg"/>
                        <span t-else="">An error occured while processing your payment. Please try again or contact your administrator.</span>
                    </t>
                    <t t-if="payment_tx_id.state == 'authorized'">
                        <span t-if="payment_tx_id.acquirer_id.auth_msg" t-raw="payment_tx_id.acquirer_id.auth_msg"/>
                        <span t-else="">Your payment has been authorized.</span>
                    </t>
                </div>
                <div t-if="payment_tx_id.acquirer_id.post_msg" t-att-class="'card-body %s' % (
                    (payment_tx_id.state == 'pending' and 'bg-info-light') or
                    (payment_tx_id.state == 'done' and 'bg-success-light') or
                    (payment_tx_id.state == 'authorized' and 'bg-success-light') or
                    'bg-danger-light')">
                    <t t-raw="payment_tx_id.acquirer_id.post_msg" />
                    <div t-if="payment_tx_id.acquirer_id.provider == 'transfer' and order.reference">
                        <b>Communication: </b><span t-esc='order.reference'/>
                    </div>
                </div>
                <div t-if="(payment_tx_id.acquirer_id.qr_code == True) and (payment_tx_id.acquirer_id.provider == 'transfer') and (payment_tx_id.partner_id.country_id.code in ['BE', 'AT', 'DE', 'FI', 'NL']) and (payment_tx_id.currency_id.name == 'EUR')">
                    <div class="card-body" t-if="payment_tx_id.acquirer_id.journal_id.bank_account_id.qr_code_valid">
                        <h3>Or scan me with your banking app.</h3>
                        <img class="border border-dark rounded" t-att-src="payment_tx_id.acquirer_id.journal_id.bank_account_id.build_qr_code_url(order.amount_total,payment_tx_id.reference)"/>
                    </div>
                    <div class="card-body" t-if="payment_tx_id.acquirer_id.journal_id.bank_account_id.qr_code_valid == False">
                        <h3>The SEPA QR Code informations are not set correctly.</h3>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <template id="website_sale.brand_promotion" inherit_id="website.brand_promotion">
        <xpath expr="//div[hasclass('o_brand_promotion')]" position="replace">
            <div class="o_brand_promotion">
                Powered by <a target="_blank" class="badge badge-danger" href="http://www.odoo.com/page/website-builder?utm_source=db&amp;utm_medium=website">Odoo</a>,
                the #1 <a target="_blank" href="http://www.odoo.com/page/e-commerce?utm_source=db&amp;utm_medium=website">Open Source eCommerce</a>.
            </div>
        </xpath>
    </template>

    <!-- User Navbar -->
    <template id="user_navbar_inherit_website_sale" inherit_id="website.user_navbar">
        <xpath expr="//div[@id='o_new_content_menu_choices']//div[@name='module_website_sale']" position="attributes">
            <attribute name="name"/>
            <attribute name="t-att-data-module-id"/>
            <attribute name="t-att-data-module-shortdesc"/>
            <attribute name="groups">sales_team.group_sale_manager</attribute>
        </xpath>
    </template>

    <template id="sale_order_portal_content_inherit_website_sale" name="Orders Followup Products Links" inherit_id="sale.sale_order_portal_content">
        <xpath expr="//section[@id='details']//td[@id='product_name']/*" position="replace">
            <a t-if="line.product_id.website_published" t-att-href="line.product_id.website_url">
                <span t-field="line.name" />
            </a>
            <t t-if="not line.product_id.website_published">
                <span t-field="line.name" />
            </t>
        </xpath>
    </template>

    <template id="terms" name="Terms &amp; Conditions">
        <t t-call="website.layout">
          <div id="wrap">
              <div class="oe_structure" id="oe_structure_website_sale_terms_1">
                <section class="s_title">
                  <div class="container">
                    <div class="row">
                      <div class="col-lg-12">
                        <h1 class="text-center">Terms &amp;amp; Conditions</h1>
                        <div class="card s_well clearfix">
                            <div class="card-body">
                                <ul>
                                    <li>The <b>Intellectual Property</b> disclosure will inform users that the contents, logo and other visual media you created is your property and is protected by copyright laws.</li>
                                    <li>A <b>Termination</b> clause will inform that users’ accounts on your website and mobile app or users’ access to your website and mobile (if users can’t have an account with you) can be terminated in case of abuses or at your sole discretion.</li>
                                    <li>A <b>Governing Law</b> will inform users which laws govern the agreement. This should the country in which your company is headquartered or the country from which you operate your web site and mobile app.</li>
                                    <li>A <b>Links To Other Web Sites</b> clause will inform users that you are not responsible for any third party web sites that you link to. This kind of clause will generally inform users that they are responsible for reading and agreeing (or disagreeing) with the Terms and Conditions or Privacy Policies of these third parties.</li>
                                    <li>If your website or mobile apps allows users to create content and make that content public to other users, a <b>Content</b> section will inform users that they own the rights to the content they have created.<br/>The “Content” clause usually mentions that users must give you (the website or mobile app developer) a license so that you can share this content on your website/mobile app and to make it available to other users.<br/>Because the content created by users is public to other users, a DMCA notice clause (or Copyright Infringement ) section is helpful to inform users and copyright authors that, if any content is found to be a copyright infringement, you will respond to any DMCA take down notices received and you will take down the content.</li>
                                    <li>A <b>Limit What Users Can Do</b> clause can inform users that by agreeing to use your service, they’re also agreeing to not do certain things. This can be part of a very long and thorough list in your Terms and Conditions agreements so as to encompass the most amount of negative uses.</li>
                               </ul>
                               <small class="text-muted float-right">Source: https://termsfeed.com/blog/sample-terms-and-conditions-template</small>
                           </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
                <section class="s_text_block">
                  <div class="container">
                    <div class="row">
                      <div class="col-lg-12 mb16 mt16">
                        <p style='white-space:pre' t-esc="website.company_id.sale_note"/>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
              <div class="oe_structure" id="oe_structure_website_sale_terms_2"/>
          </div>
        </t>
    </template>

</odoo>
