<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
    <t t-name="sale.ProductList">
        <div t-att-class="this.props.areProductsOptional ? 'o_sale_optional_products m-n3 p-3 border-top' : ''">
            <span
                name="sale_product_configurator_list_title"
                class="d-inline-block mb-3 h4"
                t-if="this.props.areProductsOptional"
                t-out="optionalProductsTitle"
            />
            <table
                class="o_sale_product_configurator_table table table-sm table-borderless position-relative mb-0"
                t-att-class="{'o_sale_product_configurator_table_optional': this.props.areProductsOptional}"
            >
                <thead t-if="!this.props.areProductsOptional">
                    <tr>
                        <th class="px-0 border-bottom-0" colspan="2">Product</th>
                    </tr>
                </thead>
                <tbody class="border-top-0">
                    <tr t-foreach="this.props.products" t-as="product" t-key="product.product_tmpl_id">
                        <Product t-props="product" optional="this.props.areProductsOptional"/>
                    </tr>
                </tbody>
            </table>
        </div>
    </t>
</templates>
