Untitled

<template>
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
        aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_large">
        <div class="slds-modal__container">
            <!-- Modal/Popup Box LWC header here -->
            <header class="slds-modal__header">
                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close"
                    onclick={closeModal}>
                    <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse"
                        size="small"></lightning-icon>
                    <span class="slds-assistive-text">{closeLabel}</span>
                </button>
                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{mainLabel}</h2>
                <c-option-picker onoptionselected={handleOptionSelected} optionlist={prodList}></c-option-picker>
            </header>

            <!-- Modal/Popup Box LWC body starts here -->
            <div class="slds-modal__content slds-p-around_medium">
                    <div id={currentProd.prodName}>
                    
                        <div class="slds-text-heading_large slds-m-bottom_medium">{currentProd.prodName}</div>
                        
                        <lightning-layout>
                            <lightning-layout-item size="12" padding="around-small">
                                <lightning-input type="search" label={searchLabel} onchange={handleSearch}></lightning-input>
                            </lightning-layout-item>
                        </lightning-layout>
                    
                        <div class="slds-m-left_medium slds-m-right_medium">
                            <template for:each={showedAddonList} for:item="addon">
                                <div key={addon.Id} class="slds-box slds-m-bottom_x-small">
                                    <div class="slds-text-heading_medium slds-m-bottom_small">{addon.ProductName}
                                        <template lwc:if={addon.Selected}>
                                            <lightning-badge label={addonSelectedLabel}
                                                class="slds-badge_inverse slds-m-left_medium"></lightning-badge>
                                        </template>
                                    </div>
                                    <lightning-record-edit-form 
                                        object-api-name="OpportunityLineItem" 
                                        data-id={addon.Id}
                                        onsubmit={handleAdd}
                                        data-mandatory={addon.Mandatory_Item__c}>
                                            <template lwc:if={addon.activeOnly}>
                                                <div class="slds-grid">
                                                    <div class="slds-col slds-size_1-of-2">
                                                        <lightning-input-field 
                                                            value={addon.UnitPrice} 
                                                            field-name="UnitPrice"
                                                            disabled={addon.Disabled}
                                                        ></lightning-input-field>
                                                    </div>
                                                </div>
                                            </template>
                                            <template lwc:if={addon.withQuantity}>
                                                <div class="slds-grid">
                                                    <div class="slds-col slds-size_1-of-2">
                                                        <lightning-input-field 
                                                            value={addon.Configuration_Quantity__c}
                                                            field-name="Configuration_Quantity__c"
                                                            data-id={addon.Id}
                                                            data-field="Configuration_Quantity__c"
                                                            data-mandatory={addon.Mandatory_Item__c}
                                                            required=true
                                                            onchange={handleFieldChanged}
                                                            disabled={addon.Disabled}
                                                        ></lightning-input-field>
                                                    </div>
                                                    <div class="slds-col slds-size_1-of-2">
                                                        <lightning-input-field 
                                                            value={addon.UnitPrice} 
                                                            field-name="UnitPrice"
                                                            disabled={addon.Disabled}
                                                        ></lightning-input-field>
                                                    </div>
                                                </div>
                                            </template>
                                            <template lwc:if={addon.crmConnector}>
                                                <div class="slds-grid">
                                                    <div class="slds-col slds-size_1-of-2">
                                                        <lightning-input-field 
                                                            value={addon.CRM_Id__c} 
                                                            field-name="CRM_Id__c"
                                                            data-id={addon.Id}
                                                            data-field="CRM_Id__c"
                                                            data-mandatory={addon.Mandatory_Item__c}
                                                            required=true
                                                            onchange={handleFieldChanged}
                                                            disabled={addon.Disabled}
                                                        ></lightning-input-field>
                                                        <lightning-input-field 
                                                            value={addon.CRM_Type__c}
                                                            field-name="CRM_Type__c"
                                                            data-id={addon.Id}
                                                            data-field="CRM_Type__c"
                                                            data-mandatory={addon.Mandatory_Item__c}
                                                            required=false
                                                            onchange={handleFieldChanged}
                                                            disabled={addon.Disabled}
                                                        ></lightning-input-field>
                                                    </div>
                                                    <div class="slds-col slds-size_1-of-2">
                                                        <lightning-input-field 
                                                            value={addon.UnitPrice} 
                                                            field-name="UnitPrice"
                                                            disabled={addon.Disabled}
                                                        ></lightning-input-field>
                                                        <lightning-input-field 
                                                            value={addon.Description}
                                                            field-name="Description"
                                                            disabled={addon.Disabled}
                                                        ></lightning-input-field>
                                                    </div>
                                                </div>
                                            </template>
                                            
                                            <template if:false={addon.Mandatory_Item__c}>
                                                <div class="slds-m-top_small slds-m-bottom_medium">
                                                    <template lwc:if={addon.Selected}>
                                                        <div class="slds-m-top_small slds-m-bottom_medium">
                                                            <lightning-button 
                                                                data-id={addon.Id} 
                                                                variant="destructive"
                                                                label={removeAddonLabel}
                                                                title="Remove Addon from configuration" 
                                                                onclick={handleRemoveAddon}
                                                                class="slds-m-left_x-small"
                                                            ></lightning-button>
                                                        </div>
                                                    </template>
                                                    <template lwc:else>
                                                        <div class="slds-m-top_small slds-m-bottom_medium">
                                                            <lightning-button 
                                                                type="submit" 
                                                                variant="brand"
                                                                label={addAddonLabel} 
                                                                title="Add to Configuration"
                                                                class="slds-m-left_x-small"
                                                            ></lightning-button>
                                                        </div>
                                                    </template>
                                                </div>
                                            </template>

                                    </lightning-record-edit-form>
                                </div>
                            </template>
                        </div>
                    </div>
            </div>
            
            <!-- Modal/Popup Box LWC footer starts here -->
            <footer class="slds-modal__footer">
                <button class="slds-button slds-button_neutral" onclick={closeModal} title="Close">{closeLabel}</button>
                <button class="slds-button slds-button_brand" onclick={commitAddons} title="Close">{addremoveLabel}</button>
            </footer>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>

</template>