<vdr-action-bar>
    <vdr-ab-left>
        <form class="clr-form search-form" [formGroup]="searchForm">
            <input
                type="text"
                name="searchTerm"
                formControlName="searchTerm"
                [placeholder]="'catalog.search-product-name-or-code' | translate"
                class="clr-input search-input"
            />
            <clr-checkbox-wrapper>
                <input
                    type="checkbox"
                    clrCheckbox
                    formControlName="groupByProduct"
                    (ngModelChange)="groupByProduct = $event"
                />
                <label>{{ 'catalog.group-by-product' | translate }}</label>
            </clr-checkbox-wrapper>
        </form>
    </vdr-ab-left>
    <vdr-ab-right>
        <a class="btn btn-primary" [routerLink]="['./create']">
            <clr-icon shape="plus"></clr-icon>
            <span class="full-label">{{ 'catalog.create-new-product' | translate }}</span>
            <span class="compact-label">{{ 'common.create' | 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)"
>
    <vdr-dt-column></vdr-dt-column>
    <vdr-dt-column [expand]="true">{{ 'common.name' | translate }}</vdr-dt-column>
    <vdr-dt-column></vdr-dt-column>
    <vdr-dt-column></vdr-dt-column>
    <ng-template let-result="item">
        <td class="left align-middle">
            <div class="image-placeholder">
                <img
                    *ngIf="
                        groupByProduct
                            ? result.productPreview
                            : result.productVariantPreview || result.productPreview as image;
                        else: imagePlaceholder
                    "
                    [src]="image + '?preset=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">
            {{ groupByProduct ? result.productName : result.productVariantName }}
        </td>
        <td class="right align-middle">
            <vdr-table-row-action
                iconShape="edit"
                [label]="'common.edit' | translate"
                [linkTo]="['./', result.productId]"
            ></vdr-table-row-action>
        </td>
        <td class="right align-middle">
            <clr-dropdown>
                <button type="button" class="btn btn-link btn-sm" clrDropdownTrigger>
                    {{ 'common.actions' | translate }}
                    <clr-icon shape="caret down"></clr-icon>
                </button>
                <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
                    <button
                        type="button"
                        class="delete-button"
                        (click)="deleteProduct(result.productId)"
                        clrDropdownItem
                    >
                        {{ 'common.delete' | translate }}
                    </button>
                </clr-dropdown-menu>
            </clr-dropdown>
        </td>
    </ng-template>
</vdr-data-table>
