<div class="with-selected">
    <vdr-select-toggle
        size="small"
        [selected]="areAllSelected()"
        (selectedChange)="toggleSelectAll()"
    ></vdr-select-toggle>
    <ng-content></ng-content>
</div>
<div class="variants-list">
    <div class="variant-container card" *ngFor="let variant of variants; let i = index">
        <div class="card-block header-row">
            <div class="toggle">
                <vdr-select-toggle
                    size="small"
                    [selected]="isVariantSelected(variant.id)"
                    (selectedChange)="toggleSelectVariant(variant.id)"
                ></vdr-select-toggle>
            </div>
            <div class="details">
                <div class="sku">
                    <clr-input-container>
                        <input
                            clrInput
                            type="text"
                            [formControl]="formArray.get([i, 'sku'])"
                            [placeholder]="'catalog.sku' | translate"
                        />
                    </clr-input-container>
                </div>
                <div class="name">
                    <clr-input-container>
                        <input
                            clrInput
                            type="text"
                            [formControl]="formArray.get([i, 'name'])"
                            [placeholder]="'common.name' | translate"
                        />
                    </clr-input-container>
                </div>
            </div>
            <div *ngIf="variant.options.length">
                <div class="options">
                    {{ 'catalog.options' | translate }}:
                    <vdr-chip *ngFor="let option of variant.options">{{ option.name }}</vdr-chip>
                </div>
            </div>
            <div class="flex-spacer"></div>
        </div>
        <div class="card-block">
            <div class="row">
                <div class="assets">
                    <vdr-product-assets
                        [compact]="true"
                        [assets]="variant.assets"
                        [featuredAsset]="variant.featuredAsset"
                        (change)="onAssetChange(variant.id, $event)"
                    ></vdr-product-assets>
                </div>
                <div class="col">
                    <div class="pricing">
                        <div class="tax-category">
                            <clr-select-container>
                                <label>{{ 'catalog.tax-category' | translate }}</label>
                                <select
                                    clrSelect
                                    name="options"
                                    [formControl]="formArray.get([i, 'taxCategoryId'])"
                                >
                                    <option
                                        *ngFor="let taxCategory of taxCategories"
                                        [value]="taxCategory.id"
                                    >
                                        {{ taxCategory.name }}
                                    </option>
                                </select>
                            </clr-select-container>
                        </div>
                        <div class="price">
                            <clr-input-container>
                                <label>{{ 'catalog.price' | translate }}</label>
                                <vdr-currency-input
                                    clrInput
                                    [currencyCode]="variant.currencyCode"
                                    [formControl]="formArray.get([i, 'price'])"
                                ></vdr-currency-input>
                            </clr-input-container>
                        </div>
                        <vdr-variant-price-detail
                            [price]="formArray.get([i, 'price'])!.value"
                            [currencyCode]="variant.currencyCode"
                            [priceIncludesTax]="variant.priceIncludesTax"
                            [taxCategoryId]="formArray.get([i, 'taxCategoryId'])!.value"
                        ></vdr-variant-price-detail>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-block">
            <div class="facets">
                <vdr-facet-value-chip
                    *ngFor="let facetValue of existingFacetValues(i)"
                    [facetValue]="facetValue"
                    (remove)="removeFacetValue(i, facetValue.id)"
                ></vdr-facet-value-chip>
                <vdr-facet-value-chip
                    *ngFor="let facetValue of pendingFacetValues(i)"
                    [facetValue]="facetValue"
                    (remove)="removeFacetValue(i, facetValue.id)"
                ></vdr-facet-value-chip>
            </div>
        </div>
    </div>
</div>
