<ng-template vdrDialogTitle>{{ 'order.set-customer-for-order' | translate }}</ng-template>

<clr-tabs>
    <clr-tab>
        <button clrTabLink>{{ 'order.existing-customer' | translate }}</button>

        <ng-template [(clrIfActive)]="useExisting">
            <clr-tab-content>
                <ng-select
                    [items]="customers$ | async"
                    appendTo="body"
                    bindLabel="name"
                    [addTag]="false"
                    [multiple]="true"
                    [hideSelected]="true"
                    [trackByFn]="trackByFn"
                    [minTermLength]="2"
                    [loading]="isLoading"
                    [typeahead]="input$"
                    [(ngModel)]="selectedCustomer"
                    class="mt-4"
                >
                    <ng-template ng-label-tmp let-item="item" let-clear="clear">
                        <clr-icon shape="user" class="is-solid"></clr-icon
                        ><span class="ml2 mr2">{{ item.firstName }} {{ item.lastName }}</span>
                        <vdr-chip>{{ item.emailAddress }}</vdr-chip>
                    </ng-template>
                    <ng-template ng-option-tmp let-item="item">
                        <clr-icon shape="user" class="is-solid"></clr-icon
                        ><span class="ml2 mr2">{{ item.firstName }} {{ item.lastName }}</span>
                        <vdr-chip>{{ item.emailAddress }}</vdr-chip>
                    </ng-template>
                </ng-select>
            </clr-tab-content>
        </ng-template>
    </clr-tab>
    <clr-tab>
        <button clrTabLink>{{ 'customer.create-new-customer' | translate }}</button>

        <ng-template [(clrIfActive)]="createNew">
            <clr-tab-content>
                <form [formGroup]="customerForm">
                <vdr-form-field [label]="'customer.title' | translate" for="title">
                    <input id="title" type="text" formControlName="title" />
                </vdr-form-field>
                <vdr-form-field [label]="'customer.first-name' | translate" for="firstName">
                    <input id="firstName" type="text" formControlName="firstName" />
                </vdr-form-field>
                <vdr-form-field [label]="'customer.last-name' | translate" for="lastName">
                    <input id="lastName" type="text" formControlName="lastName" />
                </vdr-form-field>
                <vdr-form-field [label]="'customer.email-address' | translate" for="emailAddress">
                    <input id="emailAddress" type="text" formControlName="emailAddress" />
                </vdr-form-field>
                <vdr-form-field [label]="'customer.phone-number' | translate" for="phoneNumber">
                    <input id="phoneNumber" type="text" formControlName="phoneNumber" />
                </vdr-form-field>
                </form>
            </clr-tab-content>
        </ng-template>
    </clr-tab>
</clr-tabs>

<ng-template vdrDialogButtons>
    <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
    <button
        type="submit"
        (click)="select()"
        [disabled]="(useExisting && selectedCustomer.length === 0) || (createNew && customerForm.invalid)"
        class="btn btn-primary"
    >
        {{ 'common.okay' | translate }}
    </button>
</ng-template>
