<?xml version="1.0"?>
<t t-name="sale_product_configurator.optional_product_items">
        <t t-foreach="product.optional_product_ids" t-as="product">
            <t t-set="combination" t-value="product._get_first_possible_combination(parent_combination)"/>
            <t t-if="product._is_add_to_cart_possible(parent_combination)">

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

                <tr class="js_product">
                    <td class="td-img">
                        <input type="hidden" class="product_template_id" t-att-value="product.id"/>
                        <input type="hidden" class="product_id" t-attf-name="optional-product-#{product.id}" t-att-value="product_variant.id"/>
                        <img t-if="product_variant" t-att-src="'/web/image/product.product/%s/image_128' % product_variant.id" class="variant_image" alt="Product Image"/>
                        <img t-else="" t-att-src="'/web/image/product.template/%s/image_128' % product.id" class="variant_image" alt="Product Image"/>
                    </td>
                    <td class="td-product_name" colspan="2">
                        <div class="mb-3">
                            <strong class="product-name product_display_name" t-out="combination_info['display_name']"/>
                            <div class="text-muted small" t-field="product.description_sale"/>
                        </div>
                        <t t-call="sale.variants">
                            <t t-set="combination" t-value="product._get_first_possible_combination(parent_combination)"/>
                        </t>
                    </td>
                    <td class="text-center td-qty d-none">
                        <t t-call="sale_product_configurator.product_quantity_config"/>
                    </td>
                    <td class="text-center td-price">
                        <div t-attf-class="text-danger oe_default_price oe_optional 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                             }"/>
                        <div class="oe_price" style="white-space: nowrap;" 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-out="combination_info['price']"/>
                        <p class="css_not_available_msg alert alert-warning">Option not available</p>

                        <a role="button" href="#" class="js_add btn btn-primary">
                            <i class="fa fa-shopping-cart add-optionnal-item"/>
                        </a>
                        <span class="js_remove d-none">
                            <a role="button" href="#" class="js_remove"><i class="fa fa-trash-o remove-optionnal-item"/></a>
                        </span>
                    </td>
                </tr>
            </t>
        </t>
    </t>
