<vdr-page-header>
    <vdr-page-title>
        <vdr-action-bar-items locationId="order-list"></vdr-action-bar-items>
        <ng-container *ngIf="canCreateDraftOrder">
            <a class="btn" *vdrIfPermissions="['CreateOrder']" [routerLink]="['./draft/create']">
                <clr-icon shape="plus"></clr-icon>
                {{ 'catalog.create-draft-order' | translate }}
            </a>
        </ng-container>
    </vdr-page-title>
    <vdr-page-header-description>Description of the current page (if applicable)</vdr-page-header-description>
    <vdr-page-header-tabs
        [tabs]="[
            { id: 'tab1', label: 'Tab 1' },
            { id: 'tab2', label: 'Tab 2' },
            { id: 'tab3', label: 'Tab 3' }
        ]"
    ></vdr-page-header-tabs>
</vdr-page-header>
<vdr-page-body>
    <vdr-data-table-2
        class="mt-2"
        id="order-list"
        [items]="items$ | async"
        [itemsPerPage]="itemsPerPage$ | async"
        [totalItems]="totalItems$ | async"
        [currentPage]="currentPage$ | async"
        [filters]="filters"
        (pageChange)="setPageNumber($event)"
        (itemsPerPageChange)="setItemsPerPage($event)"
    >
        <vdr-dt2-search
            [searchTermControl]="searchControl"
            [searchTermPlaceholder]="'order.search-by-order-filters' | translate"
        ></vdr-dt2-search>
        <vdr-dt2-column [heading]="'common.code' | translate" [optional]="false">
            <ng-template let-order="item">
                <a class="button-ghost" [routerLink]="['./', order.id]"
                    ><span>{{ order.code }}</span>
                    <clr-icon shape="arrow right"></clr-icon>
                </a>
            </ng-template>
        </vdr-dt2-column>
        <vdr-dt2-column [heading]="'order.customer' | translate" [sort]="sorts.get('customerLastName')">
            <ng-template let-order="item">
                <vdr-customer-label
                    [customer]="order.customer"
                    (click)="$event.stopPropagation()"
                ></vdr-customer-label>
            </ng-template>
        </vdr-dt2-column>
        <vdr-dt2-column [heading]="'order.order-type' | translate" [hiddenByDefault]="true">
            <ng-template let-order="item">
                <vdr-chip>{{ order.type }}</vdr-chip>
            </ng-template>
        </vdr-dt2-column>
        <vdr-dt2-column [heading]="'order.state' | translate" [sort]="sorts.get('state')">
            <ng-template let-order="item">
                <vdr-order-state-label [state]="order.state"></vdr-order-state-label>
            </ng-template>
        </vdr-dt2-column>
        <vdr-dt2-column [heading]="'order.total' | translate" [sort]="sorts.get('totalWithTax')">
            <ng-template let-order="item">
                {{ order.totalWithTax | localeCurrency : order.currencyCode }}
            </ng-template>
        </vdr-dt2-column>
        <vdr-dt2-column [heading]="'common.updated-at' | translate">
            <ng-template let-order="item">
                {{ order.updatedAt | timeAgo }}
            </ng-template>
        </vdr-dt2-column>
        <vdr-dt2-column [heading]="'order.placed-at' | translate" [sort]="sorts.get('orderPlacedAt')">
            <ng-template let-order="item">
                {{ order.orderPlacedAt | localeDate : 'short' }}
            </ng-template>
        </vdr-dt2-column>
        <vdr-dt2-column [heading]="'order.shipping' | translate">
            <ng-template let-order="item">
                {{ getShippingNames(order) }}
            </ng-template>
        </vdr-dt2-column>
    </vdr-data-table-2>
</vdr-page-body>
