<?xml version="1.0"?>
<t t-name="sale_product_configurator.configure_optional_products">
        <table class="table table-striped table-sm">
        <thead>
            <tr>
                <th class="td-img"><span class="label">Product</span></th>
                <th><span class="label"/></th>
                <th class="text-center td-qty"><span class="label">Quantity</span></th>
                <th class="text-center td-price"><span class="label">Price</span></th>
            </tr>
        </thead>
        <tbody>
            <tr class="js_product in_cart main_product">

                <t t-set="combination_info" t-value="product.product_tmpl_id._get_combination_info(combination, product.id, add_qty or 1, pricelist)"/>
                <t t-set="product_variant" t-value="product.env['product.product'].browse(combination_info['product_id'])"/>

                <input type="hidden" class="product_template_id" t-att-value="product.product_tmpl_id.id"/>
                <input type="hidden" class="product_id" t-att-value="product_variant.id"/>
                <td class="td-img">
                    <img class="product_detail_img" t-if="product_variant" t-att-src="'/web/image/product.product/%s/image_128' % product_variant.id" alt="Product Image"/>
                    <img class="product_detail_img" t-else="" t-att-src="'/web/image/product.template/%s/image_128' % product.id" alt="Product Image"/>
                </td>
                <td class="td-product_name">
                    <strong class="product-name product_display_name" t-out="combination_info['display_name']"/>
                    <div class="text-muted small">
                        <div t-field="product.description_sale"/>
                        <div class="js_attributes"/>
                        <div t-if="product_custom_attribute_values">
                            <t t-foreach="product_custom_attribute_values" t-as="custom_value">
                                <span t-esc="custom_value.get('attribute_value_name', None)"/>: <span t-esc="custom_value['custom_value']"/>
                                <input type="hidden" class="variant_custom_value" t-att-data-custom_product_template_attribute_value_id="custom_value['custom_product_template_attribute_value_id']" t-att-data-attribute_value_name="custom_value.get('attribute_value_name', None)" t-att-value="custom_value['custom_value']"/>
                            </t>
                        </div>
                    </div>
                    <div>
                        <t t-if="product.product_tmpl_id and not combination">
                            <t t-set="combination" t-value="product.product_tmpl_id._get_first_possible_combination()"/>
                        </t>
                        <t t-if="combination and not already_configured" t-call="sale.variants">
                            <t t-set="ul_class" t-valuef="flex-column"/>
                            <t t-set="product" t-value="product.product_tmpl_id"/>
                        </t>
                        <t t-else="">
                            <ul class="d-none js_add_cart_variants mb-0" t-att-data-attribute_exclusions="{'exclusions: []'}"/>
                            <div class="d-none oe_unchanged_value_ids" t-att-data-unchanged_value_ids="variant_values"/>
                            <!-- Keep the information to use it later (when leaving the modal window) -->
                            <div class="d-none no-attribute-info" t-att-data-attribute-value="json.dumps(no_attribute)"/>
                            <div class="d-none custom-attribute-info" t-att-data-attribute-value="json.dumps(custom_attribute)"/>
                        </t>
                    </div>
                </td>
                <td class="text-center td-qty">
                    <t t-call="sale_product_configurator.product_quantity_config"/>
                </td>
                <td class="text-center td-price" name="price">
                    <div t-attf-class="text-danger oe_default_price oe_striked_price {{'' if combination_info['has_discounted_price'] else 'd-none'}}" t-out="combination_info['list_price']" t-options="{                             &quot;widget&quot;: &quot;monetary&quot;,                             &quot;display_currency&quot;: (pricelist or product).currency_id                         }"/>
                    <span class="oe_price product_id" style="white-space: nowrap;" t-att-data-product-id="product.id" t-out="combination_info['price']" t-options="{                             &quot;widget&quot;: &quot;monetary&quot;,                             &quot;display_currency&quot;: (pricelist or product).currency_id                         }"/>
                    <span class="js_raw_price d-none" t-esc="combination_info['price']"/>
                    <p class="css_not_available_msg alert alert-warning">Option not available</p>
                </td>
            </tr>
            <tr class="o_total_row">
                <td colspan="4" class="text-end">
                    <strong>Total:</strong>
                    <span class="js_price_total fw-bold" style="white-space: nowrap;" t-att-data-product-id="product.id" t-out="combination_info['price'] * (add_qty or 1)" t-options="{                             &quot;widget&quot;: &quot;monetary&quot;,                             &quot;display_currency&quot;: (pricelist or product).currency_id                         }"/>
                </td>
            </tr>
            <t t-if="product.optional_product_ids and mode != 'edit'">
                <tr class="o_select_options"><td colspan="4"><h4>Available Options:</h4></td></tr>
                <t t-call="sale_product_configurator.optional_product_items">
                    <t t-set="parent_combination" t-value="combination"/>
                </t>
            </t>
        </tbody>
        </table>
    </t>

    