<div class="variants-list">
    <div
        class="variant-container card"
        *ngFor="
            let variant of variants | paginate: paginationConfig || { itemsPerPage: 10, currentPage: 1 };
            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]="!(updatePermission | hasPermission)">
                        <clr-input-container>
                            <input
                                clrInput
                                type="text"
                                formControlName="sku"
                                [readonly]="!(updatePermission | hasPermission)"
                                [placeholder]="'catalog.sku' | translate"
                            />
                        </clr-input-container>
                    </vdr-title-input>
                    <vdr-title-input class="name" [readonly]="!(updatePermission | hasPermission)">
                        <clr-input-container>
                            <input
                                clrInput
                                type="text"
                                formControlName="name"
                                [readonly]="!(updatePermission | hasPermission)"
                                [placeholder]="'common.name' | translate"
                            />
                        </clr-input-container>
                    </vdr-title-input>
                </div>
                <div class="right-controls">
                    <clr-toggle-wrapper *vdrIfPermissions="updatePermission">
                        <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-assets
                            [compact]="true"
                            [assets]="pendingAssetChanges[variant.id]?.assets || variant.assets"
                            [featuredAsset]="
                                pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset
                            "
                            [updatePermissions]="updatePermission"
                            (change)="onAssetChange(variant.id, $event)"
                        ></vdr-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="updatePermission; 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
                                            *ngIf="!channelPriceIncludesTax"
                                            clrInput
                                            [currencyCode]="variant.currencyCode"
                                            [readonly]="!(updatePermission | hasPermission)"
                                            formControlName="price"
                                        ></vdr-currency-input>
                                        <vdr-currency-input
                                            *ngIf="channelPriceIncludesTax"
                                            clrInput
                                            [currencyCode]="variant.currencyCode"
                                            [readonly]="!(updatePermission | hasPermission)"
                                            formControlName="priceWithTax"
                                        ></vdr-currency-input>
                                    </clr-input-container>
                                </div>
                                <vdr-variant-price-detail
                                    [price]="formGroup.get('price')!.value"
                                    [currencyCode]="variant.currencyCode"
                                    [priceIncludesTax]="channelPriceIncludesTax"
                                    [taxCategoryId]="formGroup.get('taxCategoryId')!.value"
                                ></vdr-variant-price-detail>
                            </div>
                            <div class="variant-form-input-row">
                                <clr-select-container *vdrIfPermissions="updatePermission">
                                    <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 }}
                                        <vdr-help-tooltip
                                            [content]="'catalog.stock-on-hand-tooltip' | translate"
                                        ></vdr-help-tooltip
                                    ></label>
                                    <input
                                        [class.inventory-untracked]="inventoryIsNotTracked(formGroup)"
                                        clrInput
                                        type="number"
                                        [min]="getStockOnHandMinValue(formGroup)"
                                        step="1"
                                        formControlName="stockOnHand"
                                        [readonly]="!(updatePermission | hasPermission)"
                                        [vdrDisabled]="inventoryIsNotTracked(formGroup)"
                                    />
                                </clr-input-container>
                                <div [class.inventory-untracked]="inventoryIsNotTracked(formGroup)">
                                    <label class="clr-control-label"
                                        >{{ 'catalog.stock-allocated' | translate }}
                                        <vdr-help-tooltip
                                            [content]="'catalog.stock-allocated-tooltip' | translate"
                                        ></vdr-help-tooltip
                                    ></label>
                                    <div class="value">
                                        {{ variant.stockAllocated }}
                                    </div>
                                </div>
                                <div [class.inventory-untracked]="inventoryIsNotTracked(formGroup)">
                                    <label class="clr-control-label"
                                        >{{ 'catalog.stock-saleable' | translate }}
                                        <vdr-help-tooltip
                                            [content]="'catalog.stock-saleable-tooltip' | translate"
                                        ></vdr-help-tooltip
                                    ></label>
                                    <div class="value">
                                        {{ getSaleableStockLevel(variant) }}
                                    </div>
                                </div>
                            </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]="!(updatePermission | hasPermission)"
                                                [vdrDisabled]="
                                                    formGroup.get('useGlobalOutOfStockThreshold')?.value !==
                                                        false || inventoryIsNotTracked(formGroup)
                                                "
                                            />
                                        </clr-input-container>
                                        <clr-toggle-wrapper>
                                            <input
                                                type="checkbox"
                                                clrToggle
                                                name="useGlobalOutOfStockThreshold"
                                                formControlName="useGlobalOutOfStockThreshold"
                                                [vdrDisabled]="
                                                    !(updatePermission | 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">
                                    <vdr-tabbed-custom-fields
                                        entityName="ProductVariant"
                                        [customFields]="customFields"
                                        [compact]="true"
                                        [customFieldsFormGroup]="formGroup.get('customFields')"
                                        [readonly]="!(updatePermission | hasPermission)"
                                    ></vdr-tabbed-custom-fields>
                                </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]="(updatePermission | hasPermission) && 'pencil'"
                            >
                                <span class="option-group-name">{{ optionGroupName(option.groupId) }}</span>
                                {{ optionName(option) }}
                            </vdr-chip>
                            <a [routerLink]="['./', 'options']" class="btn btn-link btn-sm"
                                >{{ 'catalog.edit-options' | translate }}...</a
                            >
                        </div>
                    </div>
                    <div class="flex-spacer"></div>
                    <div class="facets">
                        <vdr-facet-value-chip
                            *ngFor="let facetValue of existingFacetValues(variant)"
                            [facetValue]="facetValue"
                            [removable]="updatePermission | hasPermission"
                            (remove)="removeFacetValue(variant, facetValue.id)"
                        ></vdr-facet-value-chip>
                        <vdr-facet-value-chip
                            *ngFor="let facetValue of pendingFacetValues(variant)"
                            [facetValue]="facetValue"
                            [removable]="updatePermission | hasPermission"
                            (remove)="removeFacetValue(variant, facetValue.id)"
                        ></vdr-facet-value-chip>
                        <button
                            *vdrIfPermissions="updatePermission"
                            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 *vdrIfMultichannel>
                <div class="card-block" *vdrIfDefaultChannelActive>
                    <div class="flex channel-assignment">
                        <ng-container *ngFor="let channel of variant.channels">
                            <vdr-chip
                                *ngIf="!isDefaultChannel(channel.code)"
                                icon="times-circle"
                                [title]="'catalog.remove-from-channel' | translate"
                                (iconClick)="
                                    removeFromChannel.emit({ channelId: channel.id, variant: variant })
                                "
                            >
                                <vdr-channel-badge [channelCode]="channel.code"></vdr-channel-badge>
                                {{ channel.code | channelCodeToLabel }}
                            </vdr-chip>
                        </ng-container>
                        <button class="btn btn-sm" (click)="assignToChannel.emit(variant)">
                            <clr-icon shape="layers"></clr-icon>
                            {{ 'catalog.assign-to-channel' | translate }}
                        </button>
                    </div>
                </div>
            </ng-container>
        </ng-container>
    </div>
</div>
