<vdr-action-bar>
    <vdr-ab-left>
        <div class="search-form">
            <select clrSelect name="state" [formControl]="stateFilter">
                <option value="all">{{ 'order.state-all-orders' | translate }}</option>
                <option *ngFor="let orderState of (orderStates$ | async)" [value]="orderState">
                    {{ orderState | orderStateI18nToken | translate }}
                </option>
            </select>
            <input
                type="text"
                name="searchTerm"
                [formControl]="searchTerm"
                [placeholder]="'order.search-by-order-code' | translate"
                class="clr-input search-input"
            />
        </div>
    </vdr-ab-left>
    <vdr-ab-right>
        <vdr-action-bar-items locationId="order-list"></vdr-action-bar-items>
    </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>{{ 'common.code' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'order.customer' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>
    <vdr-dt-column></vdr-dt-column>
    <ng-template let-order="item">
        <td class="left align-middle">{{ order.code }}</td>
        <td class="left align-middle">
            <vdr-customer-label [customer]="order.customer"></vdr-customer-label>
        </td>
        <td class="left align-middle">
            <vdr-order-state-label [state]="order.state"></vdr-order-state-label>
        </td>
        <td class="left align-middle">{{ order.total / 100 | currency: order.currencyCode }}</td>
        <td class="left align-middle">{{ order.updatedAt | date: 'medium' }}</td>
        <td class="right align-middle">
            <vdr-table-row-action
                iconShape="shopping-cart"
                [label]="'common.open' | translate"
                [linkTo]="['./', order.id]"
            ></vdr-table-row-action>
        </td>
    </ng-template>
</vdr-data-table>
