<div class="variants-list">
    <div
        class="variant-container card"
        *ngFor="let variant of variants | paginate: pagination; trackBy: trackById; let i = index"
        [class.disabled]="!formGroupMap.get(variant.id)?.get('enabled')?.value"
    >
        <ng-container *ngIf="formGroupMap.get(variant.id) as formGroup" [formGroup]="formGroup">
            <div class="card-block header-row">
                <div class="details">
                    <vdr-title-input class="sku" [readonly]="!('UpdateCatalog' | hasPermission)">
                        <clr-input-container>
                            <input
                                clrInput
                                type="text"
                                formControlName="sku"
                                [readonly]="!('UpdateCatalog' | hasPermission)"
                                [placeholder]="'catalog.sku' | translate"
                            />
                        </clr-input-container>
                    </vdr-title-input>
                    <vdr-title-input class="name" [readonly]="!('UpdateCatalog' | hasPermission)">
                        <clr-input-container>
                            <input
                                clrInput
                                type="text"
                                formControlName="name"
                                [readonly]="!('UpdateCatalog' | hasPermission)"
                                [placeholder]="'common.name' | translate"
                            />
                        </clr-input-container>
                    </vdr-title-input>
                </div>
                <div class="right-controls">
                    <clr-toggle-wrapper *vdrIfPermissions="'UpdateCatalog'">
                        <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="standard-fields">
                            <div class="variant-form-input-row">
                                <div class="tax-category">
                                    <clr-select-container
                                        *vdrIfPermissions="'UpdateCatalog'; else taxCategoryLabel"
                                    >
                                        <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>
                                    <ng-template #taxCategoryLabel>
                                        <label class="clr-control-label">{{
                                            'catalog.tax-category' | translate
                                            }}</label>
                                        <div class="tax-category-label">
                                            {{ getTaxCategoryName(formGroup) }}
                                        </div>
                                    </ng-template>
                                </div>
                                <div class="price">
                                    <clr-input-container>
                                        <label>{{ 'catalog.price' | translate }}</label>
                                        <vdr-currency-input
                                            clrInput
                                            [currencyCode]="variant.currencyCode"
                                            [readonly]="!('UpdateCatalog' | hasPermission)"
                                            formControlName="price"
                                        ></vdr-currency-input>
                                    </clr-input-container>
                                </div>
                                <vdr-variant-price-detail
                                    [price]="formGroup.get('price')!.value"
                                    [currencyCode]="variant.currencyCode"
                                    [priceIncludesTax]="variant.priceIncludesTax"
                                    [taxCategoryId]="formGroup.get('taxCategoryId')!.value"
                                ></vdr-variant-price-detail>
                            </div>
                            <div class="variant-form-input-row">
                                <clr-select-container *vdrIfPermissions="'UpdateCatalog'">
                                    <label
                                    >{{ 'catalog.track-inventory' | translate }}
                                        <vdr-help-tooltip
                                            [content]="'catalog.track-inventory-tooltip' | translate"
                                        ></vdr-help-tooltip>
                                    </label>
                                    <select clrSelect name="options" formControlName="trackInventory">
                                        <option [value]="GlobalFlag.TRUE">
                                            {{ 'catalog.track-inventory-true' | translate }}
                                        </option>
                                        <option [value]="GlobalFlag.FALSE">
                                            {{ 'catalog.track-inventory-false' | translate }}
                                        </option>
                                        <option [value]="GlobalFlag.INHERIT">
                                            {{ 'catalog.track-inventory-inherit' | translate }}
                                        </option>
                                    </select>
                                </clr-select-container>
                                <clr-input-container>
                                    <label>{{ 'catalog.stock-on-hand' | translate }}</label>
                                    <input
                                        [class.inventory-untracked]="inventoryIsNotTracked(formGroup)"
                                        clrInput
                                        type="number"
                                        min="0"
                                        step="1"
                                        formControlName="stockOnHand"
                                        [readonly]="!('UpdateCatalog' | hasPermission)"
                                        [vdrDisabled]="inventoryIsNotTracked(formGroup)"
                                    />
                                </clr-input-container>
                            </div>
                            <div class="variant-form-input-row">
                                <div class="out-of-stock-threshold-wrapper" [class.inventory-untracked]="inventoryIsNotTracked(formGroup)">
                                    <label class="clr-control-label"
                                        >{{ 'catalog.out-of-stock-threshold' | translate
                                        }}<vdr-help-tooltip
                                            [content]="'catalog.out-of-stock-threshold-tooltip' | translate"
                                        ></vdr-help-tooltip
                                    ></label>
                                    <div class="flex">
                                        <clr-input-container>
                                            <input
                                                clrInput
                                                type="number"
                                                [formControl]="formGroup.get('outOfStockThreshold')"
                                                [readonly]="!('UpdateCatalog' | hasPermission)"
                                                [vdrDisabled]="
                                                    formGroup.get('useGlobalOutOfStockThreshold')?.value !==
                                                    false || inventoryIsNotTracked(formGroup)
                                                "
                                            />
                                        </clr-input-container>
                                        <clr-toggle-wrapper>
                                            <input
                                                type="checkbox"
                                                clrToggle
                                                name="useGlobalOutOfStockThreshold"
                                                formControlName="useGlobalOutOfStockThreshold"
                                                [vdrDisabled]="!('UpdateCatalog' | hasPermission) || inventoryIsNotTracked(formGroup)"
                                            />
                                            <label>{{ 'catalog.use-global-value' | translate }} ({{ globalOutOfStockThreshold }})</label>
                                        </clr-toggle-wrapper>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="custom-fields">
                            <div class="variant-form-input-row">
                                <section formGroupName="customFields" *ngIf="customFields.length">
                                    <!--<label>{{ 'common.custom-fields' | translate }}</label>-->
                                    <ng-container *ngFor="let customField of customFields">
                                        <vdr-custom-field-control
                                            *ngIf="formGroup.get(['customFields', customField.name])"
                                            entityName="ProductVariant"
                                            [compact]="true"
                                            [customFieldsFormGroup]="formGroup.get('customFields')"
                                            [readonly]="!('UpdateCatalog' | hasPermission)"
                                            [customField]="customField"
                                        ></vdr-custom-field-control>
                                    </ng-container>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-block">
                <div class="options-facets">
                    <vdr-entity-info [entity]="variant"></vdr-entity-info>
                    <div *ngIf="variant.options.length">
                        <div class="options">
                            <vdr-chip
                                *ngFor="let option of variant.options | sort: 'groupId'"
                                [colorFrom]="optionGroupName(option.groupId)"
                                [invert]="true"
                                (iconClick)="editOption(option)"
                                [icon]="('UpdateCatalog' | hasPermission) && 'pencil'"
                            >
                                <span class="option-group-name">{{ optionGroupName(option.groupId) }}</span>
                                {{ optionName(option) }}
                            </vdr-chip>
                        </div>
                    </div>
                    <div class="flex-spacer"></div>
                    <div class="facets">
                        <vdr-facet-value-chip
                            *ngFor="let facetValue of existingFacetValues(variant)"
                            [facetValue]="facetValue"
                            [removable]="'UpdateCatalog' | hasPermission"
                            (remove)="removeFacetValue(variant, facetValue.id)"
                        ></vdr-facet-value-chip>
                        <vdr-facet-value-chip
                            *ngFor="let facetValue of pendingFacetValues(variant)"
                            [facetValue]="facetValue"
                            [removable]="'UpdateCatalog' | hasPermission"
                            (remove)="removeFacetValue(variant, facetValue.id)"
                        ></vdr-facet-value-chip>
                        <button
                            *vdrIfPermissions="'UpdateCatalog'"
                            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 class="table-footer">
        <vdr-items-per-page-controls [(itemsPerPage)]="pagination.itemsPerPage"></vdr-items-per-page-controls>

        <vdr-pagination-controls
            [currentPage]="pagination.currentPage"
            [itemsPerPage]="pagination.itemsPerPage"
            (pageChange)="pagination.currentPage = $event"
        ></vdr-pagination-controls>
    </div>
</div>
