<?xml version="1.0"?>
<t name="Products item" t-name="website_sale.products_item">
        <form class="oe_product_cart h-100 d-flex" t-att-data-publish="product.website_published and 'on' or 'off'">
            <t t-set="product_path" t-value="'%s/%s/%s' % (shop_path, slug(category), slug(product)) if category else '%s/%s' % (shop_path, slug(product))"/>
            <t t-set="product_href" t-value="product_path + (product_query_string and '?' + product_query_string) + selected_attributes_hash"/>
            <t t-set="image_type" t-value="product._get_suitable_image_size(ppr, td_product['x'], td_product['y'])"/>

            <div class="oe_product_image position-relative flex-grow-0 overflow-hidden">
                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" t-nocache="The csrf token must always be up to date."/>
                <a t-att-href="product_href" class="oe_product_image_link d-block position-relative" contenteditable="false">
                    <t t-set="image_holder" t-value="product._get_image_holder()"/>
                    <span t-field="image_holder.image_1920" t-options="{'widget': 'image', 'preview_image': image_type, 'class': 'h-100 w-100 position-absolute'}" class="oe_product_image_img_wrapper d-flex h-100 justify-content-center align-items-center position-absolute"/>

                    <t t-set="bg_color" t-value="td_product['ribbon'].bg_color"/>
                    <t t-set="text_color" t-value="td_product['ribbon'].text_color"/>
                    <t t-set="bg_class" t-value="td_product['ribbon']._get_position_class()"/>
                    <span t-attf-class="o_ribbon o_not_editable #{bg_class}" t-attf-style="#{text_color and ('color: %s;' % text_color)} #{bg_color and 'background-color:' + bg_color}" t-out="td_product['ribbon'].name or ''"/>
                </a>
            </div>
            <div class="o_wsale_product_information position-relative d-flex flex-grow-1 flex-shrink-1">
                <div class="o_wsale_product_information_text">
                    <h6 class="o_wsale_products_item_title mb-2 text-break">
                        <a class="text-decoration-none" t-att-href="product_href" t-att-content="product.name" t-field="product.name"/>
                        <a t-if="not product.website_published" role="button" t-att-href="product_href" class="btn btn-sm btn-danger" title="This product is unpublished.">
                            Unpublished
                        </a>
                    </h6>

                    <t t-call="website_sale.product_variant_preview"/>
                </div>
                <div class="o_wsale_product_sub d-flex align-items-center justify-content-between flex-nowrap gap-3">
                    <t t-set="template_price_vals" t-value="get_product_prices(product)"/>
                    <div class="product_price">
                        <span class="h6 mb-0" t-if="template_price_vals['price_reduce'] or not website.prevent_zero_price_sale" t-out="template_price_vals['price_reduce']" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
                        <t t-if="'base_price' in template_price_vals and (template_price_vals['base_price'] &gt; template_price_vals['price_reduce']) and (template_price_vals['price_reduce'] or not website.prevent_zero_price_sale)" name="product_base_price">
                            <del t-attf-class="text-muted me-1 h6 mb-0" style="white-space: nowrap;">
                                <em class="small" t-esc="template_price_vals['base_price']" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
                            </del>
                        </t>
                    </div>
                    <div t-if="layout_mode == 'list'" class="o_wsale_product_btn o_wsale_product_btn_list d-flex gap-2" t-call="website_sale.shop_product_buttons"/>
                </div>
            </div>
            <div t-if="layout_mode != 'list'" class="o_wsale_product_btn o_wsale_product_btn_catalog d-flex gap-2" t-call="website_sale.shop_product_buttons"/>
        </form>
    </t>

    