<?xml version="1.0"?>
<t t-name="website_sale.variants">
        <t t-set="attribute_exclusions" t-value="product._get_attribute_exclusions(parent_combination)"/>
        <ul t-attf-class="o_wsale_product_page_variants d-flex flex-column gap-4 list-unstyled js_add_cart_variants mt-4 pt-3 #{ul_class} #{'d-none' if not product.valid_product_template_attribute_line_ids else '' }" t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)">
            <t t-foreach="product.valid_product_template_attribute_line_ids" t-as="ptal">
                <t t-set="attribute" t-value="ptal.attribute_id"/>
                <t t-set="ptavs" t-value="ptal.product_template_value_ids._only_active()"/>
                <t t-set="single" t-value="len(ptavs) == 1"/>

                <!-- Attributes selection is hidden if there is only one value available and it's not a custom value -->
                <li t-att-data-attribute_id="attribute.id" t-att-data-attribute_name="attribute.name" t-att-data-attribute_display_type="attribute.display_type" t-attf-class="variant_attribute #{                         'd-none' if single                         and not ptavs[0].is_custom                         and not attribute.display_type == 'multi' else ''                     }">

                    <!-- Used to customize layout if the only available attribute value is custom -->
                    <t t-set="single_and_custom" t-value="single and ptavs[0].is_custom"/>
                    <h6 class="attribute_name mb-2">
                        <span t-field="ptal.attribute_id.name"/>
                        <span t-if="attribute.display_type == 'color'" class="text-muted">
                            -
                            <t t-set="active_ptavs" t-value="[ptav for ptav in ptavs if ptav in combination]"/>
                            <t t-foreach="active_ptavs" t-as="ptav">
                                <span class="attribute_value" t-field="ptav.name"/>
                            </t>
                        </span>
                    </h6>

                    <t t-if="attribute.display_type == 'select'">
                        <select t-att-data-attribute_id="attribute.id" t-attf-class="form-select css_attribute_select o_wsale_product_attribute js_variant_change #{attribute.create_variant} #{'d-none' if single_and_custom else ''}" t-att-name="'ptal-%s' % ptal.id">
                            <t t-foreach="ptavs" t-as="ptav">
                                <option t-att-value="ptav.id" t-att-data-attribute-value-id="ptav.product_attribute_value_id.id" t-att-data-value_id="ptav.id" t-att-data-value_name="ptav.name" t-att-data-attribute_name="attribute.name" t-att-data-is_custom="ptav.is_custom" t-att-selected="ptav in combination" t-att-data-is_single="single" t-att-data-is_single_and_custom="single_and_custom">
                                    <span t-field="ptav.name"/>
                                    <t t-call="website_sale.badge_extra_price"/>
                                </option>
                            </t>
                        </select>
                    </t>

                    <t t-elif="attribute.display_type in ('radio', 'multi')">
                        <ul t-att-data-attribute_id="attribute.id" t-attf-class="o_wsale_product_attribute d-flex flex-wrap gap-3 list-unstyled #{'d-none' if single_and_custom else ''}">
                            <t t-foreach="ptavs" t-as="ptav">
                                <li class="js_attribute_value">
                                    <label class="col-form-label p-0">
                                        <div class="form-check cursor-pointer">
                                            <input t-att-type="'radio' if attribute.display_type == 'radio' else 'checkbox'" t-attf-class="form-check-input js_variant_change #{attribute.create_variant}" t-att-checked="ptav in combination" t-att-title="ptav.name" t-att-name="'ptal-%s' % ptal.id" t-att-value="ptav.id" t-att-data-attribute-value-id="ptav.product_attribute_value_id.id" t-att-data-value_id="ptav.id" t-att-data-value_name="ptav.name" t-att-data-attribute_name="attribute.name" t-att-data-is_custom="ptav.is_custom" t-att-data-is_single="single if ptal.attribute_id.display_type != 'multi' else False" t-att-data-is_single_and_custom="single_and_custom"/>
                                            <div class="radio_input_value form-check-label">
                                                <span t-field="ptav.name"/>
                                                <t t-call="website_sale.badge_extra_price"/>
                                            </div>
                                        </div>
                                    </label>
                                </li>
                            </t>
                        </ul>
                    </t>

                    <t t-elif="attribute.display_type == 'pills'">
                        <ul t-att-data-attribute_id="attribute.id" t-attf-class="o_wsale_product_attribute d-flex flex-wrap list-unstyled gap-2 #{'d-none' if single_and_custom else ''}" data-bs-toggle="buttons">
                            <t t-foreach="ptavs" t-as="ptav">
                                <li t-attf-class="o_variant_pills js_attribute_value border btn m-0 cursor-pointer #{'active border-primary text-primary-emphasis bg-primary-subtle' if ptav in combination else ''}">
                                    <input type="radio" t-attf-class="js_variant_change position-absolute #{attribute.create_variant} opacity-0 cursor-pointer" t-att-checked="ptav in combination" t-att-name="'ptal-%s' % ptal.id" t-att-value="ptav.id" t-att-data-value_id="ptav.id" t-att-id="ptav.id" t-att-data-attribute-value-id="ptav.product_attribute_value_id.id" t-att-data-value_name="ptav.name" t-att-data-attribute_name="attribute.name" t-att-data-is_custom="ptav.is_custom" t-att-data-is_single_and_custom="single_and_custom" t-att-autocomplete="off"/>
                                    <label class="radio_input_value o_variant_pills_input_value cursor-pointer" t-att-for="ptav.id">
                                        <span t-field="ptav.name"/>
                                        <t t-call="website_sale.badge_extra_price"/>
                                    </label>
                                </li>
                            </t>
                        </ul>
                    </t>

                    <t t-elif="attribute.display_type == 'color'">
                        <ul t-att-data-attribute_id="attribute.id" t-attf-class="o_wsale_product_attribute d-flex flex-wrap gap-2 list-unstyled #{'d-none' if single_and_custom else ''}">
                            <li t-foreach="ptavs" t-as="ptav">
                                <t t-set="img_style" t-value="'background: url(/web/image/product.template.attribute.value/%s/image); background-size: cover; ' % ptav.id if ptav.image else ''"/>
                                <t t-set="color_style" t-value="'background:' + str(ptav.html_color or ptav.name if not ptav.is_custom else '')"/>
                                <label t-attf-style="#{img_style or color_style}" t-attf-class="css_attribute_color cursor-pointer #{'active' if ptav in combination else ''} #{'custom_value' if ptav.is_custom else ''} #{'transparent' if (not ptav.is_custom and not ptav.html_color) else ''}">
                                      <input type="radio" t-attf-class="js_variant_change cursor-pointer #{attribute.create_variant}" t-att-checked="ptav in combination" t-att-name="'ptal-%s' % ptal.id" t-att-value="ptav.id" t-att-title="ptav.name" t-att-data-attribute-value-id="ptav.product_attribute_value_id.id" t-att-data-value_id="ptav.id" t-att-data-value_name="ptav.name" t-att-data-attribute_name="attribute.name" t-att-data-is_custom="ptav.is_custom" t-att-data-is_single="single" t-att-data-is_single_and_custom="single_and_custom"/>
                                </label>
                            </li>
                        </ul>
                    </t>
                </li>
            </t>
        </ul>
        <ul t-if="product._has_multiple_uoms()" t-attf-class="o_wsale_product_page_variants d-flex flex-column gap-4 list-unstyled js_add_cart_variants mt-4 pt-3 #{ul_class}" t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)">
            <!-- NOTE: the t-att-data-attribute_exclusions is only there to match existing events selectors -->
            <li>
                <!-- Separate template to reduce views duplication -->
                <t t-call="website_sale.packaging_title"/>
                <ul class="btn-group-toggle list-inline list-unstyled" data-bs-toggle="buttons">
                    <t t-set="product_uoms" t-value="product._get_available_uoms()"/>
                    <t t-foreach="product_uoms" t-as="uom">
                        <t t-set="is_main_uom" t-value="uom.id == product.uom_id.id"/>
                        <li t-attf-class="o_variant_pills border btn m-0 cursor-pointer #{'active border-primary text-primary-emphasis bg-primary-subtle' if is_main_uom else ''}">
                            <input class="position-absolute opacity-0 cursor-pointer" type="radio" t-att-checked="is_main_uom" name="uom_id" t-att-value="uom.id" t-attf-id="uom-{{uom.id}}" t-att-autocomplete="off"/>
                            <label class="radio_input_value cursor-pointer" t-attf-for="uom-{{uom.id}}">
                                <span t-field="uom.name"/>
                            </label>
                        </li>
                    </t>
                </ul>
            </li>
        </ul>
    </t>
    