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

    <div class="container">
        <div class="alert alert-warning esh-orders-alert" role="alert" [hidden]="!errorReceived">
            Error requesting order list, please try later on
        </div>
        <article class="esh-orders-titles row">
            <section class="esh-orders-title col-2">Order number</section>
            <section class="esh-orders-title col-4">Date</section>
            <section class="esh-orders-title col-2">Total</section>
            <section class="esh-orders-title col-2">Status</section>
            <section class="esh-orders-title col-2"></section>
        </article>

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