<vdr-action-bar *ngIf="entity$ | async as order">
    <vdr-ab-left>
        <div class="flex clr-align-items-center">
            <vdr-entity-info [entity]="entity$ | async"></vdr-entity-info>
            <vdr-order-state-label [state]="order.state">
                <button
                    class="icon-button"
                    (click)="openStateDiagram()"
                    [title]="'order.order-state-diagram' | translate"
                >
                    <clr-icon shape="list"></clr-icon>
                </button>
            </vdr-order-state-label>
        </div>
    </vdr-ab-left>

    <vdr-ab-right>
        <vdr-action-bar-items locationId="order-detail"></vdr-action-bar-items>
        <button
            class="btn btn-primary"
            (click)="fulfillOrder()"
            [disabled]="!canAddFulfillment(order)"
        >
            {{ 'order.fulfill-order' | translate }}
        </button>
        <vdr-dropdown>
            <button class="icon-button" vdrDropdownTrigger>
                <clr-icon shape="ellipsis-vertical"></clr-icon>
            </button>
            <vdr-dropdown-menu vdrPosition="bottom-right">
                <button
                    type="button"
                    class="btn"
                    vdrDropdownItem
                    *ngIf="order.nextStates.includes('Cancelled')"
                    (click)="cancelOrRefund(order)"
                >
                    <clr-icon shape="error-standard" class="is-error"></clr-icon>
                    <ng-container
                        *ngIf="orderHasSettledPayments(order); else cancelOnly"
                    >
                        {{ 'order.refund-and-cancel-order' | translate }}
                    </ng-container>
                    <ng-template #cancelOnly>
                        {{ 'order.cancel-order' | translate }}
                    </ng-template>
                </button>
                <ng-container *ngFor="let nextState of nextStates$ | async">
                    <div class="dropdown-divider"></div>
                    <button type="button" class="btn" vdrDropdownItem (click)="transitionToState(nextState)">
                        <clr-icon shape="step-forward-2"></clr-icon>
                        {{ 'order.transition-to-state' | translate: { state: nextState } }}
                    </button>
                </ng-container>
            </vdr-dropdown-menu>
        </vdr-dropdown>
    </vdr-ab-right>
</vdr-action-bar>

<div *ngIf="entity$ | async as order">
    <div class="clr-row">
        <div class="clr-col-lg-8">
            <table class="order-lines table">
                <thead>
                    <tr>
                        <th></th>
                        <th>{{ 'order.product-name' | translate }}</th>
                        <th>{{ 'order.product-sku' | translate }}</th>
                        <th>{{ 'order.unit-price' | translate }}</th>
                        <th>{{ 'order.quantity' | translate }}</th>
                        <ng-container *ngFor="let customField of visibleOrderLineCustomFields">
                            <th class="order-line-custom-field">
                                <button
                                    class="custom-field-header-button"
                                    (click)="toggleOrderLineCustomFields()"
                                    [title]="'common.hide-custom-fields' | translate"
                                >
                                    {{ customField | customFieldLabel }}
                                </button>
                            </th>
                        </ng-container>
                        <ng-container *ngIf="showElided">
                            <th>
                                <button
                                    class="custom-field-header-button"
                                    (click)="toggleOrderLineCustomFields()"
                                    [title]="'common.display-custom-fields' | translate"
                                >
                                    <clr-icon
                                        shape="ellipsis-horizontal"
                                        class="custom-field-ellipsis"
                                    ></clr-icon>
                                </button>
                            </th>
                        </ng-container>
                        <th>{{ 'order.total' | translate }}</th>
                    </tr>
                </thead>
                <tr
                    *ngFor="let line of order.lines"
                    class="order-line"
                    [class.is-cancelled]="line.quantity === 0"
                >
                    <td class="align-middle thumb">
                        <img *ngIf="line.featuredAsset" [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 unit-price">
                        {{ line.unitPriceWithTax / 100 | currency: order.currencyCode }}
                        <div class="net-price" [title]="'order.net-price' | translate">
                            {{ line.unitPrice / 100 | currency: order.currencyCode }}
                        </div>
                    </td>
                    <td class="align-middle quantity">
                        {{ line.quantity }}
                        <vdr-line-refunds [line]="line"></vdr-line-refunds>
                        <vdr-line-fulfillment [line]="line" [orderState]="order.state"></vdr-line-fulfillment>
                    </td>
                    <ng-container *ngFor="let customField of visibleOrderLineCustomFields">
                        <td class="order-line-custom-field align-middle">
                            <ng-container [ngSwitch]="customField.type">
                                <ng-template [ngSwitchCase]="'datetime'">
                                    <span [title]="line.customFields[customField.name]">{{
                                        line.customFields[customField.name] | date: 'short'
                                    }}</span>
                                </ng-template>
                                <ng-template [ngSwitchCase]="'boolean'">
                                    <ng-template [ngIf]="line.customFields[customField.name] === true">
                                        <clr-icon shape="check"></clr-icon>
                                    </ng-template>
                                    <ng-template [ngIf]="line.customFields[customField.name] === false">
                                        <clr-icon shape="times"></clr-icon>
                                    </ng-template>
                                </ng-template>
                                <ng-template ngSwitchDefault>
                                    {{ line.customFields[customField.name] }}
                                </ng-template>
                            </ng-container>
                        </td>
                    </ng-container>
                    <ng-container *ngIf="showElided"
                        ><td class="order-line-custom-field align-middle">
                            <clr-icon
                                shape="ellipsis-horizontal"
                                class="custom-field-ellipsis"
                            ></clr-icon></td
                    ></ng-container>
                    <td class="align-middle total">
                        {{ line.totalPrice / 100 | currency: order.currencyCode }}
                        <div class="net-price" [title]="'order.net-price' | translate">
                            {{ (line.unitPrice * line.quantity) / 100 | currency: order.currencyCode }}
                        </div>

                        <ng-container *ngIf="getLinePromotions(line) as promotions">
                            <vdr-dropdown *ngIf="promotions.length">
                                <div class="promotions-label" vdrDropdownTrigger>
                                    {{ 'order.promotions-applied' | translate }}
                                </div>
                                <vdr-dropdown-menu>
                                    <div
                                        class="line-promotion"
                                        *ngFor="let promotion of getLinePromotions(line)"
                                    >
                                        <a
                                            class="promotion-name"
                                            [routerLink]="getPromotionLink(promotion)"
                                            >{{ promotion.description }}</a
                                        >
                                        <div class="promotion-amount">
                                            {{ promotion.amount / 100 | currency: order.currencyCode }}
                                        </div>
                                    </div>
                                </vdr-dropdown-menu>
                            </vdr-dropdown>
                        </ng-container>
                    </td>
                </tr>
                <tr class="sub-total">
                    <td class="left clr-align-middle">{{ 'order.sub-total' | translate }}</td>
                    <td></td>
                    <td [attr.colspan]="3 + visibleOrderLineCustomFields.length"></td>
                    <ng-container *ngIf="showElided"><td></td></ng-container>
                    <td class="clr-align-middle">
                        {{ order.subTotal / 100 | currency: order.currencyCode }}
                        <div class="net-price" [title]="'order.net-price' | translate">
                            {{ order.subTotalBeforeTax / 100 | currency: order.currencyCode }}
                        </div>
                    </td>
                </tr>
                <tr class="order-ajustment" *ngFor="let adjustment of order.adjustments">
                    <td
                        [attr.colspan]="5 + visibleOrderLineCustomFields.length"
                        class="left clr-align-middle"
                    >
                        <a [routerLink]="getPromotionLink(adjustment)">{{ adjustment.description }}</a>
                        <vdr-chip *ngIf="getCouponCodeForAdjustment(order, adjustment) as couponCode">{{
                            couponCode
                        }}</vdr-chip>
                    </td>
                    <ng-container *ngIf="showElided"><td></td></ng-container>
                    <td class="clr-align-middle">
                        {{ adjustment.amount / 100 | currency: order.currencyCode }}
                    </td>
                </tr>
                <tr class="shipping">
                    <td class="left clr-align-middle">{{ 'order.shipping' | translate }}</td>
                    <td class="clr-align-middle">{{ order.shippingMethod?.description }}</td>
                    <td [attr.colspan]="3 + visibleOrderLineCustomFields.length"></td>
                    <ng-container *ngIf="showElided"><td></td></ng-container>
                    <td class="clr-align-middle">
                        {{ order.shippingWithTax / 100 | currency: order.currencyCode }}
                        <div class="net-price" [title]="'order.net-price' | translate">
                            {{ order.shipping / 100 | currency: order.currencyCode }}
                        </div>
                    </td>
                </tr>
                <tr class="total">
                    <td class="left clr-align-middle">{{ 'order.total' | translate }}</td>
                    <td></td>
                    <td [attr.colspan]="3 + visibleOrderLineCustomFields.length"></td>
                    <ng-container *ngIf="showElided"><td></td></ng-container>
                    <td class="clr-align-middle">
                        {{ order.total / 100 | currency: order.currencyCode }}
                        <div class="net-price" [title]="'order.net-price' | translate">
                            {{ order.totalBeforeTax / 100 | currency: order.currencyCode }}
                        </div>
                    </td>
                </tr>
            </table>

            <vdr-order-history
                [order]="order"
                [history]="history$ | async"
                (addNote)="addNote($event)"
                (updateNote)="updateNote($event)"
                (deleteNote)="deleteNote($event)"
            ></vdr-order-history>
        </div>
        <div class="clr-col-lg-4 order-cards">
            <vdr-order-custom-fields-card
                [customFieldsConfig]="customFields"
                [customFieldValues]="order.customFields"
                (updateClick)="updateCustomFields($event)"
            ></vdr-order-custom-fields-card>
            <div class="card">
                <div class="card-header">
                    {{ 'order.customer' | translate }}
                </div>
                <div class="card-block">
                    <div class="card-text">
                        <vdr-customer-label [customer]="order.customer"></vdr-customer-label>
                        <h6 *ngIf="getOrderAddressLines(order.shippingAddress).length">
                            {{ 'order.shipping-address' | translate }}
                        </h6>
                        <vdr-formatted-address [address]="order.shippingAddress"></vdr-formatted-address>
                        <h6 *ngIf="getOrderAddressLines(order.billingAddress).length">
                            {{ 'order.billing-address' | translate }}
                        </h6>
                        <vdr-formatted-address [address]="order.billingAddress"></vdr-formatted-address>
                    </div>
                </div>
            </div>
            <ng-container *ngIf="order.payments && order.payments.length">
                <vdr-order-payment-card
                    *ngFor="let payment of order.payments"
                    [currencyCode]="order.currencyCode"
                    [payment]="payment"
                    (settlePayment)="settlePayment($event)"
                    (settleRefund)="settleRefund($event)"
                ></vdr-order-payment-card>
            </ng-container>
            <ng-container *ngFor="let fulfillment of order.fulfillments">
                <vdr-fulfillment-card
                    [fulfillment]="fulfillment"
                    [order]="order"
                    (transitionState)="transitionFulfillment(fulfillment.id, $event)"
                ></vdr-fulfillment-card>
            </ng-container>
        </div>
    </div>
</div>
