<table class="order-table 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>
    <tbody>
        <ng-container *ngFor="let line of order.lines">
            <tr 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 | localeCurrency: order.currencyCode }}
                    <div class="net-price" [title]="'order.net-price' | translate">
                        {{ line.unitPrice | localeCurrency: order.currencyCode }}
                    </div>
                </td>
                <td class="align-middle quantity">
                    {{ line.quantity }}
                    <vdr-line-refunds [line]="line" [payments]="order.payments"></vdr-line-refunds>
                    <vdr-line-fulfillment [line]="line" [orderState]="order.state"></vdr-line-fulfillment>
                </td>
                <td class="align-middle total">
                    {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}
                    <div class="net-price" [title]="'order.net-price' | translate">
                        {{ line.linePrice | localeCurrency: order.currencyCode }}
                    </div>

                    <ng-container *ngIf="getLineDiscounts(line) as discounts">
                        <vdr-dropdown *ngIf="discounts.length">
                            <div class="promotions-label" vdrDropdownTrigger>
                                {{ 'order.promotions-applied' | translate }}
                            </div>
                            <vdr-dropdown-menu>
                                <div class="line-promotion" *ngFor="let discount of discounts">
                                    <a class="promotion-name" [routerLink]="getPromotionLink(discount)">{{
                                        discount.description
                                    }}</a>
                                    <div class="promotion-amount">
                                        {{ discount.amountWithTax | localeCurrency: order.currencyCode }}
                                        <div class="net-price" [title]="'order.net-price' | translate">
                                            {{ discount.amount | localeCurrency: order.currencyCode }}
                                        </div>
                                    </div>
                                </div>
                            </vdr-dropdown-menu>
                        </vdr-dropdown>
                    </ng-container>
                </td>
            </tr>
            <ng-container *ngIf="customFieldsForLine[line.id] as customFields">
                <tr *ngIf="customFields.length">
                    <td colspan="6" class="custom-fields-row">
                        <div class="order-line-custom-fields">
                            <div class="custom-field" *ngFor="let field of customFields">
                                <vdr-custom-field-control
                                    [compact]="true"
                                    [readonly]="true"
                                    [customField]="field.config"
                                    [customFieldsFormGroup]="field.formGroup"
                                ></vdr-custom-field-control>
                            </div>
                        </div>
                    </td>
                </tr>
            </ng-container>
        </ng-container>
        <tr class="surcharge" *ngFor="let surcharge of order.surcharges">
            <td class="align-middle name left" colspan="2">{{ surcharge.description }}</td>
            <td class="align-middle sku">{{ surcharge.sku }}</td>
            <td class="align-middle" colspan="2"></td>
            <td class="align-middle total">
                {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}
                <div class="net-price" [title]="'order.net-price' | translate">
                    {{ surcharge.price | localeCurrency: order.currencyCode }}
                </div>
            </td>
        </tr>
        <ng-container *ngFor="let discount of order.discounts">
            <tr class="order-adjustment" *ngIf="discount.type !== 'OTHER'">
            <td colspan="5" class="left clr-align-middle">
                <a [routerLink]="getPromotionLink(discount)">{{ discount.description }}</a>
                <vdr-chip *ngIf="getCouponCodeForAdjustment(order, discount) as couponCode">{{
                    couponCode
                }}</vdr-chip>
            </td>
            <td class="clr-align-middle">
                {{ discount.amountWithTax | localeCurrency: order.currencyCode }}
                <div class="net-price" [title]="'order.net-price' | translate">
                    {{ discount.amount | localeCurrency: order.currencyCode }}
                </div>
            </td>
            </tr>
        </ng-container>
        <tr class="sub-total">
            <td class="left clr-align-middle">{{ 'order.sub-total' | translate }}</td>
            <td colspan="4"></td>
            <td class="clr-align-middle">
                {{ order.subTotalWithTax | localeCurrency: order.currencyCode }}
                <div class="net-price" [title]="'order.net-price' | translate">
                    {{ order.subTotal | localeCurrency: order.currencyCode }}
                </div>
            </td>
        </tr>
        <tr class="shipping">
            <td class="left clr-align-middle">{{ 'order.shipping' | translate }}</td>
            <td class="clr-align-middle">{{ getShippingNames(order) }}</td>
            <td colspan="3"></td>
            <td class="clr-align-middle">
                {{ order.shippingWithTax | localeCurrency: order.currencyCode }}
                <div class="net-price" [title]="'order.net-price' | translate">
                    {{ order.shipping | localeCurrency: order.currencyCode }}
                </div>
            </td>
        </tr>
        <tr class="total">
            <td class="left clr-align-middle">{{ 'order.total' | translate }}</td>
            <td colspan="4"></td>
            <td class="clr-align-middle">
                {{ order.totalWithTax | localeCurrency: order.currencyCode }}
                <div class="net-price" [title]="'order.net-price' | translate">
                    {{ order.total | localeCurrency: order.currencyCode }}
                </div>
            </td>
        </tr>
    </tbody>
</table>
