<div class="blade-content vc-order __xxlarge-wide">
    <div class="blade-inner customer-order-items">
        <div class="inner-block">
            <form name="orderForm" novalidate></form>

            <!-- Summary moved above grid (no overlay; faster scanning) -->
            <div class="order-items-summary" ng-if="blade.currentEntity">
                <div class="order-items-summary__item">
                    <span class="order-items-summary__label">{{ 'orders.blades.customerOrder-items.labels.sub-total' | translate }}</span>
                    <span class="order-items-summary__value">{{blade.currentEntity.subTotal | currency:blade.currentEntity.currency | showPrice:blade.isVisiblePrices}}</span>
                </div>
                <div class="order-items-summary__item">
                    <span class="order-items-summary__label">{{ 'orders.blades.customerOrder-items.labels.discount-total' | translate }}</span>
                    <span class="order-items-summary__value">{{blade.currentEntity.subTotalDiscount | currency:blade.currentEntity.currency | showPrice:blade.isVisiblePrices}}</span>
                </div>
                <div class="order-items-summary__item">
                    <span class="order-items-summary__label">{{ 'orders.blades.customerOrder-items.labels.tax-total' | translate }}</span>
                    <span class="order-items-summary__value">{{ blade.currentEntity.subTotalTaxTotal | currency:blade.currentEntity.currency | showPrice:blade.isVisiblePrices}}</span>
                </div>
                <div class="order-items-summary__item __total">
                    <span class="order-items-summary__label">{{ 'orders.blades.customerOrder-items.labels.total' | translate }}</span>
                    <span class="order-items-summary__value">{{ (blade.currentEntity.subTotalWithTax - blade.currentEntity.subTotalDiscountWithTax) | currency:blade.currentEntity.currency | showPrice:blade.isVisiblePrices}}</span>
                </div>
            </div>

            <div class="table-wrapper">
                <table class="table __line-items">
                    <thead>
                        <tr>
                            <th class="table-col __product-control">
                                <label class="form-control __checkbox">
                                    <input type="checkbox" ng-model="blade.selectedAll" ng-change="checkAll(blade.selectedAll)" />
                                    <span class="check"></span>
                                </label>
                            </th>
                            <th class="table-col __proudct-img">{{ 'orders.blades.customerOrder-items.labels.item' | translate }}</th>
                            <th class="table-col __status">{{ 'orders.blades.customerOrder-items.labels.status' | translate }}</th>
                            <th class="table-col">{{ 'orders.blades.customerOrder-items.labels.quantity' | translate }}</th>
                            <th class="table-col">{{ 'orders.blades.customerOrder-items.labels.price' | translate }}</th>
                            <th class="table-col">{{ 'orders.blades.customerOrder-items.labels.discount' | translate }}</th>
                            <th class="table-col">{{ 'orders.blades.customerOrder-items.labels.tax' | translate }}</th>
                            <th class="table-col">{{ 'orders.blades.customerOrder-items.labels.total' | translate }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="table-item" ng-repeat="data in blade.currentEntity.items track by (data.id || $index)" ng-class="{'__selected': $index === blade.selectedNodeId}" ng-click="openLineItemDetail(data, $index)">
                            <td class="table-col">
                                <label class="form-control __checkbox" ng-click="$event.stopPropagation()">
                                    <input type="checkbox" ng-model="data.selected" ng-change="updateSelectedAll()">
                                    <span class="check"></span>
                                </label>
                            </td>
                            <td class="table-col">
                                <div class="order-items__item">
                                    <div class="product-img">
                                        <img class="product-img__img"
                                             ng-if="data.imageUrl"
                                             ng-src="{{data.imageUrl}}"
                                             alt=""
                                             onerror="this.closest('.product-img').classList.add('__no-img'); this.remove();">
                                        <i class="table-ico fa fa-image product-img__fallback" aria-hidden="true" ng-if="data.imageUrl"></i>
                                        <i class="table-ico fa fa-image" aria-hidden="true" ng-if="!data.imageUrl"></i>
                                    </div>
                                    <div class="order-items__item-info">
                                        <div class="order-items__item-name" ng-attr-title="{{data.name}}">
                                            <span class="order-items__item-name-text">{{data.name}}</span>
                                        </div>
                                        <div class="order-items__item-sku" ng-if="data.sku">{{data.sku}}</div>
                                        <div class="order-items__item-comment" ng-if="data.comment">{{ data.comment }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="table-col __status">
                                <div class="form-input __inline" ng-click="$event.stopPropagation()">
                                    <va-setting-value-select placeholder="'orders.blades.customerOrder-detail.placeholders.status' | translate"
                                                             setting="'OrderLineItem.Statuses'"
                                                             ng-model="data.status"
                                                             allow-clear="true"></va-setting-value-select>
                                </div>
                            </td>
                            <td class="table-col">
                                <div class="form-input __mini __inline">
                                    <div class="form-input __mini __number" ng-click="$event.stopPropagation()">
                                        <input smart-float num-type="integer" required ng-model="data.quantity" ng-model-options="{ updateOn: 'blur' }" ng-change="blade.recalculateFn()" id="quantity{{$index}}" focus-on="quantity{{$index}}">
                                    </div>
                                </div>
                            </td>
                            <td class="table-col">
                                <div class="form-input __mini" ng-click="$event.stopPropagation()">
                                    <input money mask-money="!blade.isVisiblePrices" required ng-model="data.price" ng-model-options="{ updateOn: 'blur' }" ng-change="blade.recalculateFn()" id="price{{$index}}" focus-on="price{{$index}}">
                                </div>
                            </td>
                            <td class="table-col">
                                <div class="form-input __mini __inline" ng-click="$event.stopPropagation()">
                                    <input money mask-money="!blade.isVisiblePrices" required ng-model="data.discountAmount" ng-model-options="{ updateOn: 'blur' }" ng-change="blade.recalculateFn()" id="discountAmount{{$index}}" focus-on="discountAmount{{$index}}">
                                </div>
                            </td>
                            <td class="table-col">
                                <span class="list-price">{{data.taxTotal | currency:'' | showPrice:blade.isVisiblePrices}}</span>
                            </td>
                            <td class="table-col __total">
                                <span class="list-price">{{data.extendedPriceWithTax | currency:'' | showPrice:blade.isVisiblePrices}}</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
