<div class="variants-list">
    <div
        class="variant-container card"
        *ngFor="let variant of variants; let i = index"
        [class.disabled]="!formArray.get([i, 'enabled']).value"
    >
        <ng-container [formGroup]="formArray.at(i)">
            <div class="card-block header-row">
                <div class="details">
                    <vdr-title-input class="sku">
                        <clr-input-container>
                            <input
                                clrInput
                                type="text"
                                formControlName="sku"
                                [placeholder]="'catalog.sku' | translate"
                            />
                        </clr-input-container>
                    </vdr-title-input>
                    <vdr-title-input class="name">
                        <clr-input-container>
                            <input
                                clrInput
                                type="text"
                                formControlName="name"
                                [placeholder]="'common.name' | translate"
                            />
                        </clr-input-container>
                    </vdr-title-input>
                </div>
                <div>
                    <clr-toggle-wrapper>
                        <input type="checkbox" clrToggle name="enabled" formControlName="enabled" />
                        <label>{{ 'common.enabled' | translate }}</label>
                    </clr-toggle-wrapper>
                </div>
            </div>
            <div class="card-block">
                <div class="variant-body">
                    <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="variant-form-inputs">
                        <div class="variant-form-input-row">
                            <div class="tax-category">
                                <clr-select-container>
                                    <label>{{ 'catalog.tax-category' | translate }}</label>
                                    <select clrSelect name="options" formControlName="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"
                                        formControlName="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 class="variant-form-input-row">
                            <clr-input-container>
                                <label>{{ 'catalog.stock-on-hand' | translate }}</label>
                                <input
                                    clrInput
                                    type="number"
                                    min="0"
                                    step="1"
                                    formControlName="stockOnHand"
                                />
                            </clr-input-container>
                            <clr-checkbox-wrapper class="track-inventory-toggle">
                                <input
                                    type="checkbox"
                                    clrCheckbox
                                    name="trackInventory"
                                    formControlName="trackInventory"
                                />
                                <label>{{ 'catalog.track-inventory' | translate }}</label>
                            </clr-checkbox-wrapper>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-block">
                <div class="options-facets">
                    <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 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>
                        <button
                            class="btn btn-sm btn-secondary"
                            (click)="selectFacetValueClick.emit([variant.id])"
                        >
                            <clr-icon shape="plus"></clr-icon>
                            {{ 'catalog.add-facets' | translate }}
                        </button>
                    </div>
                </div>
            </div>
        </ng-container>
    </div>
</div>
