<vdr-action-bar>
    <vdr-ab-left></vdr-ab-left>

    <vdr-ab-right></vdr-ab-right>
</vdr-action-bar>

<div *ngIf="(entity$ | async) as order">
    <div class="clr-row">
        <div class="clr-col-md-4">
            <table class="table table-vertical">
                <tbody>
                    <tr>
                        <th>{{ 'order.order-code' | translate }}</th>
                        <td>{{ order.code }}</td>
                    </tr>
                    <tr>
                        <th>{{ 'order.state' | translate }}</th>
                        <td>{{ order.state }}</td>
                    </tr>
                    <tr>
                        <th>{{ 'common.created' | translate }}</th>
                        <td>{{ order.createdAt | date: 'medium' }}</td>
                    </tr>
                    <tr>
                        <th>{{ 'common.updated' | translate }}</th>
                        <td>{{ order.updatedAt | date: 'medium' }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="clr-col-md-4">
            <table class="table table-vertical">
                <tbody>
                    <tr>
                        <th>{{ 'order.customer' | translate }}</th>
                        <td><vdr-customer-label [customer]="order.customer"></vdr-customer-label></td>
                    </tr>
                    <tr>
                        <th>{{ 'order.shipping-address' | translate }}</th>
                        <td>
                            <div
                                class="address-line"
                                *ngFor="let line of getShippingAddressLines(order.shippingAddress)"
                            >
                                {{ line }}
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="clr-col-md-4" *ngIf="order.payments && order.payments.length">
            <table class="table table-vertical">
                <tbody>
                    <ng-container *ngFor="let payment of order.payments">
                        <tr>
                            <th>{{ 'order.payment-method' | translate }}</th>
                            <td>{{ payment.method }}</td>
                        </tr>
                        <tr>
                            <th>{{ 'order.amount' | translate }}</th>
                            <td>{{ payment.amount / 100 | currency: order.currencyCode }}</td>
                        </tr>
                        <tr>
                            <th>{{ 'order.transaction-id' | translate }}</th>
                            <td>{{ payment.transactionId }}</td>
                        </tr>
                        <tr>
                            <th>{{ 'order.payment-metadata' | translate }}</th>
                            <td>
                                <ul class="payment-metadata">
                                    <li *ngFor="let entry of getPaymentMetadata(payment)">
                                        <strong>{{ entry[0] }}</strong>
                                        : {{ entry[1] }}
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    </ng-container>
                </tbody>
            </table>
        </div>
    </div>

    <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>
                <th>{{ 'order.total' | translate }}</th>
            </tr>
        </thead>
        <tr *ngFor="let line of order.lines" class="order-line">
            <td class="thumb"><img [src]="line.featuredAsset.preview + '?preset=tiny'" /></td>
            <td class="name">{{ line.productVariant.name }}</td>
            <td class="sku">{{ line.productVariant.sku }}</td>
            <td class="unit-price">{{ line.unitPriceWithTax / 100 | currency: order.currencyCode }}</td>
            <td class="quantity">{{ line.quantity }}</td>
            <td class="total">{{ line.totalPrice / 100 | currency: order.currencyCode }}</td>
        </tr>
        <tr class="sub-total">
            <td class="left">{{ 'order.sub-total' | translate }}</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>{{ order.subTotal / 100 | currency: order.currencyCode }}</td>
        </tr>
        <tr class="order-ajustment" *ngFor="let adjustment of order.adjustments">
            <td colspan="5" class="left">{{ adjustment.description }}</td>
            <td>{{ adjustment.amount / 100 | currency: order.currencyCode }}</td>
        </tr>
        <tr class="shipping">
            <td class="left">{{ 'order.shipping' | translate }}</td>
            <td>{{ order.shippingMethod?.description }}</td>
            <td colspan="3"></td>
            <td>{{ order.shipping / 100 | currency: order.currencyCode }}</td>
        </tr>
        <tr class="total">
            <td class="left">{{ 'order.total' | translate }}</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>{{ order.total / 100 | currency: order.currencyCode }}</td>
        </tr>
    </table>
</div>
