<vdr-action-bar>
    <vdr-ab-left>
        <div class="search-form">
            <div class="btn-group btn-outline-primary" *ngIf="activePreset$ | async as activePreset">
                <button
                    class="btn"
                    *ngFor="let preset of filterPresets"
                    [class.btn-primary]="activePreset === preset.name"
                    (click)="selectFilterPreset(preset.name)"
                >
                    {{ preset.label | translate }}
                </button>
                <button
                    class="btn"
                    [class.btn-primary]="activePreset === 'custom'"
                    (click)="selectFilterPreset('custom')"
                >
                    {{ 'order.filter-custom' | translate }}
                    <clr-icon shape="angle down"></clr-icon>
                </button>
            </div>

            <input
                type="text"
                name="searchTerm"
                [formControl]="searchOrderCodeControl"
                [placeholder]="'order.search-by-order-code' | translate"
                class="search-input"
            />
            <input
                type="text"
                name="searchTerm"
                [formControl]="searchLastNameControl"
                [placeholder]="'order.search-by-customer-last-name' | translate"
                class="search-input"
            />
        </div>
        <div class="custom-filters" [class.expanded]="(activePreset$ | async) === 'custom'">
            <form [formGroup]="customFilterForm">
                <div class="flex align-center">
                    <ng-select
                        [items]="orderStates"
                        appendTo="body"
                        [addTag]="false"
                        [multiple]="true"
                        formControlName="states"
                        [placeholder]="'state.all-orders' | translate"
                        [clearable]="true"
                        [searchable]="false"
                    >
                        <ng-template ng-option-tmp let-item="item">{{ item | stateI18nToken | translate }}</ng-template>
                        <ng-template ng-label-tmp let-item="item" let-clear="clear">
                            <span class="ng-value-label"> {{ item | stateI18nToken | translate }}</span>
                            <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
                        </ng-template>
                    </ng-select>
                    <button
                        class="btn btn-secondary"
                        [disabled]="customFilterForm.pristine"
                        (click)="applyCustomFilters()"
                    >
                        {{ 'order.apply-filters' | translate }}
                        <clr-icon shape="filter"></clr-icon>
                    </button>
                </div>
                <div class="flex">
                    <div>
                        <label>{{ 'order.placed-at-start' | translate }}</label>
                        <vdr-datetime-picker formControlName="placedAtStart"></vdr-datetime-picker>
                    </div>
                    <div>
                        <label>{{ 'order.placed-at-end' | translate }}</label>
                        <vdr-datetime-picker formControlName="placedAtEnd"></vdr-datetime-picker>
                    </div>
                </div>
            </form>
        </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>{{ 'order.placed-at' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'order.shipping' | 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.totalWithTax | localeCurrency: order.currencyCode }}</td>
        <td class="left align-middle">{{ order.updatedAt | timeAgo }}</td>
        <td class="left align-middle">{{ order.orderPlacedAt | localeDate: 'medium' }}</td>
        <td class="left align-middle">{{ getShippingNames(order) }}</td>
        <td class="right align-middle">
            <vdr-table-row-action
                iconShape="shopping-cart"
                [label]="'common.open' | translate"
                [linkTo]="order.state === 'Modifying' ? ['./', order.id, 'modify'] : ['./', order.id]"
            ></vdr-table-row-action>
        </td>
    </ng-template>
</vdr-data-table>
