<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>

<div class="fulfillment-wrapper">
    <div class="order-lines">
        <table class="table">
            <thead>
                <tr>
                    <th></th>
                    <th>{{ 'order.product-name' | translate }}</th>
                    <th>{{ 'order.product-sku' | translate }}</th>
                    <th>{{ 'order.quantity' | translate }}</th>
                    <th>{{ 'order.unit-price' | translate }}</th>
                    <th>{{ 'order.cancel' | translate }}</th>
                </tr>
            </thead>
            <tr
                *ngFor="let line of order.lines"
                class="order-line"
                [class.is-disabled]="cancelAll"
                [class.is-cancelled]="line.quantity === 0"
            >
                <td class="align-middle thumb">
                    <img [src]="line.featuredAsset | assetPreview: 'tiny'" />
                </td>
                <td class="align-middle name">{{ line.productVariant.name }}</td>
                <td class="align-middle sku">{{ line.productVariant.sku }}</td>
                <td class="align-middle quantity">{{ line.quantity }}</td>
                <td class="align-middle quantity">
                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}
                </td>
                <td class="align-middle fulfil">
                    <input
                        *ngIf="line.quantity > 0 && !order.active; else nonEditable"
                        [(ngModel)]="lineQuantities[line.id]"
                        (input)="checkIfAllSelected()"
                        [disabled]="cancelAll"
                        type="number"
                        [max]="line.quantity"
                        min="0"
                    />
                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>
                </td>
            </tr>
        </table>
    </div>
    <div class="cancellation-details">
        <ng-container *ngIf="order.active !== true">
            <clr-radio-wrapper>
                <input
                    type="radio"
                    clrRadio
                    [value]="true"
                    [(ngModel)]="cancelAll"
                    name="options"
                    (ngModelChange)="radioChanged()"
                />
                <label>{{ 'order.cancel-entire-order' | translate }}</label>
            </clr-radio-wrapper>
            <clr-radio-wrapper>
                <input
                    type="radio"
                    clrRadio
                    [value]="false"
                    [(ngModel)]="cancelAll"
                    name="options"
                    (ngModelChange)="radioChanged()"
                />
                <label>{{ 'order.cancel-specified-items' | translate }}</label>
            </clr-radio-wrapper>
        </ng-container>
        <label class="clr-control-label">{{ 'order.cancellation-reason' | translate }}</label>
        <ng-select
            [items]="reasons"
            bindLabel="name"
            autofocus
            bindValue="id"
            [addTag]="true"
            [(ngModel)]="reason"
        ></ng-select>
    </div>
</div>

<ng-template vdrDialogButtons>
    <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
    <button
        type="submit"
        (click)="select()"
        [disabled]="!reason || (!order.active && selectionCount === 0)"
        class="btn btn-primary"
    >
        <ng-container *ngIf="!order.active">
            {{ 'order.cancel-selected-items' | translate }}
        </ng-container>
        <ng-container *ngIf="order.active">
            {{ 'order.cancel-order' | translate }}
        </ng-container>
    </button>
</ng-template>
