{"en_US": "<t t-name=\"website_sale.variants\">\n        <t t-set=\"attribute_exclusions\" t-value=\"product._get_attribute_exclusions(parent_combination)\"/>\n        <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)\">\n            <t t-foreach=\"product.valid_product_template_attribute_line_ids\" t-as=\"ptal\">\n                <t t-set=\"attribute\" t-value=\"ptal.attribute_id\"/>\n                <t t-set=\"ptavs\" t-value=\"ptal.product_template_value_ids._only_active()\"/>\n                <t t-set=\"single\" t-value=\"len(ptavs) == 1\"/>\n\n                <!-- Attributes selection is hidden if there is only one value available and it's not a custom value -->\n                <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 ''                     }\">\n\n                    <!-- Used to customize layout if the only available attribute value is custom -->\n                    <t t-set=\"single_and_custom\" t-value=\"single and ptavs[0].is_custom\"/>\n                    <h6 class=\"attribute_name mb-2\">\n                        <span t-field=\"ptal.attribute_id.name\"/>\n                        <span t-if=\"attribute.display_type == 'color'\" class=\"text-muted\">\n                            -\n                            <t t-set=\"active_ptavs\" t-value=\"[ptav for ptav in ptavs if ptav in combination]\"/>\n                            <t t-foreach=\"active_ptavs\" t-as=\"ptav\">\n                                <span class=\"attribute_value\" t-field=\"ptav.name\"/>\n                            </t>\n                        </span>\n                    </h6>\n\n                    <t t-if=\"attribute.display_type == 'select'\">\n                        <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\">\n                            <t t-foreach=\"ptavs\" t-as=\"ptav\">\n                                <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\">\n                                    <span t-field=\"ptav.name\"/>\n                                    <t t-call=\"website_sale.badge_extra_price\"/>\n                                </option>\n                            </t>\n                        </select>\n                    </t>\n\n                    <t t-elif=\"attribute.display_type in ('radio', 'multi')\">\n                        <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 ''}\">\n                            <t t-foreach=\"ptavs\" t-as=\"ptav\">\n                                <li class=\"js_attribute_value\">\n                                    <label class=\"col-form-label p-0\">\n                                        <div class=\"form-check cursor-pointer\">\n                                            <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\"/>\n                                            <div class=\"radio_input_value form-check-label\">\n                                                <span t-field=\"ptav.name\"/>\n                                                <t t-call=\"website_sale.badge_extra_price\"/>\n                                            </div>\n                                        </div>\n                                    </label>\n                                </li>\n                            </t>\n                        </ul>\n                    </t>\n\n                    <t t-elif=\"attribute.display_type == 'pills'\">\n                        <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\">\n                            <t t-foreach=\"ptavs\" t-as=\"ptav\">\n                                <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 ''}\">\n                                    <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\"/>\n                                    <label class=\"radio_input_value o_variant_pills_input_value cursor-pointer\" t-att-for=\"ptav.id\">\n                                        <span t-field=\"ptav.name\"/>\n                                        <t t-call=\"website_sale.badge_extra_price\"/>\n                                    </label>\n                                </li>\n                            </t>\n                        </ul>\n                    </t>\n\n                    <t t-elif=\"attribute.display_type == 'color'\">\n                        <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 ''}\">\n                            <li t-foreach=\"ptavs\" t-as=\"ptav\">\n                                <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 ''\"/>\n                                <t t-set=\"color_style\" t-value=\"'background:' + str(ptav.html_color or ptav.name if not ptav.is_custom else '')\"/>\n                                <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 ''}\">\n                                      <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\"/>\n                                </label>\n                            </li>\n                        </ul>\n                    </t>\n                </li>\n            </t>\n        </ul>\n        <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)\">\n            <!-- NOTE: the t-att-data-attribute_exclusions is only there to match existing events selectors -->\n            <li>\n                <!-- Separate template to reduce views duplication -->\n                <t t-call=\"website_sale.packaging_title\"/>\n                <ul class=\"btn-group-toggle list-inline list-unstyled\" data-bs-toggle=\"buttons\">\n                    <t t-set=\"product_uoms\" t-value=\"product._get_available_uoms()\"/>\n                    <t t-foreach=\"product_uoms\" t-as=\"uom\">\n                        <t t-set=\"is_main_uom\" t-value=\"uom.id == product.uom_id.id\"/>\n                        <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 ''}\">\n                            <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\"/>\n                            <label class=\"radio_input_value cursor-pointer\" t-attf-for=\"uom-{{uom.id}}\">\n                                <span t-field=\"uom.name\"/>\n                            </label>\n                        </li>\n                    </t>\n                </ul>\n            </li>\n        </ul>\n    </t>"}