<div class="esh-orders_detail">
    <esh-header url="/orders">Back to list</esh-header>

    <div class="container">
        <section class="esh-orders_detail-section">
            <article class="esh-orders_detail-titles row">
                <section class="esh-orders_detail-title col-xs-3">Order number</section>
                <section class="esh-orders_detail-title col-xs-3">Date</section>
                <section class="esh-orders_detail-title col-xs-3">Total</section>
                <section class="esh-orders_detail-title col-xs-3">Status</section>
            </article>

            <article class="esh-orders_detail-items row">
                <section class="esh-orders_detail-item col-xs-3">{{order.ordernumber}}</section>
                <section class="esh-orders_detail-item col-xs-3">{{order.date | date:'short'}}</section>
                <section class="esh-orders_detail-item col-xs-3">$ {{order.total}}</section>
                <section class="esh-orders_detail-item col-xs-3">{{order.status}}</section>
            </article>
        </section>

        <section class="esh-orders_detail-section">
            <article class="esh-orders_detail-titles row">
                <section class="esh-orders_detail-title col-xs-12">Shiping address</section>
            </article>

            <article class="esh-orders_detail-items row">
                <section class="esh-orders_detail-item col-xs-12">{{order.street}}</section>
            </article>

            <article class="esh-orders_detail-items row">
                <section class="esh-orders_detail-item col-xs-12">{{order.city}}</section>
            </article>

            <article class="esh-orders_detail-items row">
                <section class="esh-orders_detail-item col-xs-12">{{order.country}}</section>
            </article>
        </section>

        <section class="esh-orders_detail-section">
            <article class="esh-orders_detail-titles row">
                <section class="esh-orders_detail-title col-xs-12">Order details</section>
            </article>

            <article class="esh-orders_detail-items esh-orders_detail-items--border row"
                     *ngFor="let item of order.orderitems">
                <section class="esh-orders_detail-item col-md-4 hidden-md-down">
                    <img class="esh-orders_detail-image" src="{{item.pictureurl}}">
                </section>
                <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-4">{{item.productname}}</section>
                <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-1">$ {{item.unitprice}}</section>
                <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-1">{{item.units}}</section>
                <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-2">$ {{item.units * item.unitprice}}</section>
            </article>
        </section>

        <section class="esh-orders_detail-section esh-orders_detail-section--right">
            <article class="esh-orders_detail-titles esh-basket-titles--clean row">
                <section class="esh-orders_detail-title col-xs-9"></section>
                <section class="esh-orders_detail-title col-xs-2">Total</section>
            </article>

            <article class="esh-orders_detail-items row">
                <section class="esh-orders_detail-item col-xs-9"></section>
                <section class="esh-orders_detail-item esh-orders_detail-item--mark col-xs-2">$ {{order.total}}</section>
            </article>
        </section>
    </div>
</div>
