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

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

        <article class="esh-orders-items row"
                 *ngFor="let order of orders">
            <section class="esh-orders-item col-xs-2">{{order.ordernumber}}</section>
            <section class="esh-orders-item col-xs-4">{{order.date | date:'short'}}</section>
            <section class="esh-orders-item col-xs-2">$ {{order.total}}</section>
            <section class="esh-orders-item col-xs-2">{{order.status}}</section>
            <section class="esh-orders-item col-xs-2">
                <a class="esh-orders-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
            </section>
        </article>
    </div>
</div>
