<vdr-page-block *ngIf="!hideLanguageSelect">
    <vdr-language-selector
        [availableLanguageCodes]="availableLanguages$ | async"
        [currentLanguageCode]="contentLanguage$ | async"
        (languageCodeChange)="setLanguage($event)"
    ></vdr-language-selector>
</vdr-page-block>
<vdr-data-table-2
    class="mt-2"
    [id]="dataTableId || 'product-variant-list'"
    [items]="items$ | async"
    [itemsPerPage]="itemsPerPage$ | async"
    [totalItems]="totalItems$ | async"
    [currentPage]="currentPage$ | async"
    [filters]="filters"
    (pageChange)="setPageNumber($event)"
    (itemsPerPageChange)="setItemsPerPage($event)"
>
    <vdr-bulk-action-menu
        locationId="product-variant-list"
        [hostComponent]="this"
        [selectionManager]="selectionManager"
    />
    <vdr-dt2-search
        [searchTermControl]="searchTermControl"
        [searchTermPlaceholder]="'settings.search-by-product-name-or-sku' | translate"
    />
    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true" [sort]="sorts.get('id')">
        <ng-template let-variant="item">
            {{ variant.id }}
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column
        [heading]="'common.created-at' | translate" id="created-at"
        [hiddenByDefault]="true"
        [sort]="sorts.get('createdAt')"
    >
        <ng-template let-variant="item">
            {{ variant.createdAt | localeDate : 'short' }}
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column
        [heading]="'common.updated-at' | translate" id="updated-at"
        [hiddenByDefault]="true"
        [sort]="sorts.get('updatedAt')"
    >
        <ng-template let-variant="item">
            {{ variant.updatedAt | localeDate : 'short' }}
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column [heading]="'common.image' | translate" id="image">
        <ng-template let-variant="item">
            <div class="image-placeholder">
                <img
                    *ngIf="variant.featuredAsset as asset; else imagePlaceholder"
                    [src]="asset | assetPreview : 'tiny'"
                />
                <ng-template #imagePlaceholder>
                    <div class="placeholder">
                        <clr-icon shape="image" size="48"></clr-icon>
                    </div>
                </ng-template>
            </div>
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column [heading]="'catalog.name' | translate" id="name" [optional]="false" [sort]="sorts.get('name')">
        <ng-template let-variant="item">
            <a
                class="button-ghost"
                [routerLink]="['/catalog/products', variant.productId, 'variants', variant.id]"
                ><span>{{ variant.name }}</span
                ><clr-icon shape="arrow right"
            /></a>
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column [heading]="'catalog.sku' | translate" id="sku" [sort]="sorts.get('sku')">
        <ng-template let-variant="item">
            {{ variant.sku }}
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column [heading]="'common.enabled' | translate" id="enabled">
        <ng-template let-variant="item">
            <vdr-chip *ngIf="variant.enabled" colorType="success">{{
                'common.enabled' | translate
            }}</vdr-chip>
            <vdr-chip *ngIf="!variant.enabled" colorType="warning">{{
                'common.disabled' | translate
            }}</vdr-chip>
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column
        [heading]="'common.price' | translate" id="price"
        [hiddenByDefault]="true"
        [sort]="sorts.get('price')"
    >
        <ng-template let-variant="item">
            {{ variant.price | localeCurrency : variant.currencyCode }}
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column [heading]="'common.price-with-tax' | translate" id="price-with-tax" [sort]="sorts.get('priceWithTax')">
        <ng-template let-variant="item">
            {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}
        </ng-template>
    </vdr-dt2-column>

    <vdr-dt2-column [heading]="'catalog.stock-on-hand' | translate" id="stock-on-hand" [hiddenByDefault]="false">
        <ng-template let-variant="item">
            <vdr-chip *ngFor="let stockLevel of variant.stockLevels" [title]="stockLevel.stockLocation?.name">
                <div class="flex center">
                    <div>
                        {{ stockLevel.stockOnHand
                        }}<span class="ml-1" *ngIf="stockLevel.stockAllocated"
                            >({{ stockLevel.stockAllocated }} allocated)</span
                        >
                    </div>
                </div>
            </vdr-chip>
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-custom-field-column *ngFor="let field of customFields" [customField]="field" [sorts]="sorts" />
</vdr-data-table-2>
