<div class="main">
    <h1>Configure your <br>{{product?.name}}</h1>
    <img [src]="product?.img" alt="burger picture" srcset="">

    <div class="options">
        
        <sdx-input-group type="checkbox" inline>
            <sdx-input-item value="bacon" #baconCheckbox>Want to add extra bacon?</sdx-input-item>
        </sdx-input-group>
        
        <sdx-select
                label="How much Salad do you want?"
                placeholder="Choose your option…"
                #saladSelect> <sdx-select-option value="less">Less (-0.50 CHF)</sdx-select-option>
            <sdx-select-option value="normal">Normal</sdx-select-option>
            <sdx-select-option value="much">Much (+0.50 CHF)</sdx-select-option>
        </sdx-select>
    </div>
    
    <div class="price-summary s-heading-s">
        Total Price: {{ totalPrice }} </div>
    
    <sdx-button 
        label="Order" 
        (click)="addToCart(baconCheckbox.checked, saladSelect.value[0])"> 
    </sdx-button>
</div>