<vdr-action-bar>
    <vdr-ab-left [grow]="true">
        <div class="search-form">
            <vdr-product-search-input
                #productSearchInputComponent
                [facetValueResults]="facetValues$ | async"
                (searchTermChange)="setSearchTerm($event)"
                (facetValueChange)="setFacetValueIds($event)"
            ></vdr-product-search-input>
            <vdr-dropdown class="search-settings-menu mr3">
                <button
                    type="button"
                    class="icon-button search-index-button"
                    [title]="
                        (pendingSearchIndexUpdates
                            ? 'catalog.pending-search-index-updates'
                            : 'catalog.search-index-controls'
                        ) | translate
                    "
                    vdrDropdownTrigger
                >
                    <clr-icon shape="cog"></clr-icon>
                    <vdr-status-badge *ngIf="pendingSearchIndexUpdates" type="warning"></vdr-status-badge>
                </button>
                <vdr-dropdown-menu vdrPosition="bottom-right">
                    <h4 class="dropdown-header">{{ 'catalog.search-index-controls' | translate }}</h4>
                    <ng-container *ngIf="pendingSearchIndexUpdates">
                        <button
                            type="button"
                            class="run-updates-button"
                            vdrDropdownItem
                            (click)="runPendingSearchIndexUpdates()"
                            [disabled]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
                        >
                            <vdr-status-badge type="warning"></vdr-status-badge>
                            {{
                            'catalog.run-pending-search-index-updates'
                                | translate: {count: pendingSearchIndexUpdates}
                            }}
                        </button>
                        <div class="dropdown-divider"></div>
                    </ng-container>
                    <button
                        type="button"
                        vdrDropdownItem
                        (click)="rebuildSearchIndex()"
                        [disabled]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
                    >
                        {{ 'catalog.rebuild-search-index' | translate }}
                    </button>
                </vdr-dropdown-menu>
            </vdr-dropdown>
        </div>
        <div class="flex wrap">
            <clr-checkbox-wrapper class="mt2">
                <input type="checkbox" clrCheckbox [(ngModel)]="groupByProduct" (ngModelChange)="refresh()"/>
                <label>{{ 'catalog.group-by-product' | translate }}</label>
            </clr-checkbox-wrapper>
            <vdr-language-selector
                [availableLanguageCodes]="availableLanguages$ | async"
                [currentLanguageCode]="contentLanguage$ | async"
                (languageCodeChange)="setLanguage($event)"
            ></vdr-language-selector>
        </div>
    </vdr-ab-left>
    <vdr-ab-right>
        <vdr-action-bar-items locationId="product-list"></vdr-action-bar-items>
        <a
            class="btn btn-primary"
            [routerLink]="['./create']"
            *vdrIfPermissions="['CreateCatalog', 'CreateProduct']"
        >
            <clr-icon shape="plus"></clr-icon>
            <span class="full-label">{{ 'catalog.create-new-product' | translate }}</span>
        </a>
    </vdr-ab-right>
</vdr-action-bar>

<vdr-data-table
    [items]="items$ | async"
    [itemsPerPage]="itemsPerPage$ | async"
    [totalItems]="totalItems$ | async"
    [currentPage]="currentPage$ | async"
    (pageChange)="setPageNumber($event)"
    (itemsPerPageChange)="setItemsPerPage($event)"
>
    <ng-template let-result="item">
        <td class="left align-middle image-col" [class.disabled]="!result.enabled">
            <div class="image-placeholder">
                <img
                    *ngIf="
                        groupByProduct
                            ? result.productAsset
                            : result.productVariantAsset || result.productAsset 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>
        </td>
        <td class="left align-middle" [class.disabled]="!result.enabled">
            {{ groupByProduct ? result.productName : result.productVariantName }}
        </td>
        <td class="align-middle" [class.disabled]="!result.enabled">
            <vdr-chip *ngIf="!result.enabled">{{ 'common.disabled' | translate }}</vdr-chip>
        </td>
        <td class="right align-middle" [class.disabled]="!result.enabled">
            <vdr-table-row-action
                class="edit-button"
                iconShape="edit"
                [label]="'common.edit' | translate"
                [linkTo]="['./', result.productId]"
            ></vdr-table-row-action>
            <vdr-dropdown>
                <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
                    {{ 'common.actions' | translate }}
                    <clr-icon shape="caret down"></clr-icon>
                </button>
                <vdr-dropdown-menu vdrPosition="bottom-right">
                    <button
                        type="button"
                        class="delete-button"
                        (click)="deleteProduct(result.productId)"
                        [disabled]="!(['DeleteCatalog', 'DeleteProduct'] | hasPermission)"
                        vdrDropdownItem
                    >
                        <clr-icon shape="trash" class="is-danger"></clr-icon>
                        {{ 'common.delete' | translate }}
                    </button>
                </vdr-dropdown-menu>
            </vdr-dropdown>
        </td>
    </ng-template>
</vdr-data-table>
