<div class="esh-basket">
    <esh-header url="/catalog">Back to catalog</esh-header>
    
    <div class="container">
        <div *ngFor="let errorMessage of errorMessages">
            <div class="esh-basket-items-margin-left1 row">
                <div class="alert alert-warning" role="alert">&nbsp;{{errorMessage}}</div>
            </div>
        </div>
 
        <article class="esh-basket-titles row">
            <section class="esh-basket-title col-3">Product</section>
            <section class="esh-basket-title col-3 hidden-lg-down"></section>
            <section class="esh-basket-title col-2">Price</section>
            <section class="esh-basket-title col-2">Quantity</section>
            <section class="esh-basket-title col-2">Cost</section>
        </article>

        <div *ngFor="let item of basket?.items" class="esh-basket-items--border">
            <article class="esh-basket-items row">

                <section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
                    <img class="esh-basket-image" src="{{item.pictureUrl}}"/>
                </section>
                <section class="esh-basket-item esh-basket-item--middle col-3">{{item.productName}}</section>
                <section class="esh-basket-item esh-basket-item--middle col-2">$ {{item.unitPrice | number:'.2-2'}}</section>
                <section class="esh-basket-item esh-basket-item--middle col-2">
                    <input id="quantity"
                           class="esh-basket-input"
                           type="number"
                           min="1"
                           [(ngModel)]="item.quantity"
                           (change)="itemQuantityChanged(item)"/>
                </section>
                <section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-2">$ {{(item.unitPrice * item.quantity) | number:'.2-2'}}</section>
            </article>
            <br/>
            <div class="esh-basket-items-margin-left1 row">
                <div class="alert alert-warning" role="alert" *ngIf="item.oldUnitPrice > 0">&nbsp;Note that the price of this article changed in our Catalog. The old price when you originally added it to the basket was $ {{item.oldUnitPrice}} </div>
            </div>
        </div>
    </div>

    <div class="container">
        <article class="esh-basket-titles esh-basket-titles--clean row">
            <section class="esh-basket-title col-9"></section>
            <section class="esh-basket-title col-2">Total</section>
        </article>

        <article class="esh-basket-items row">
            <section class="esh-basket-item col-9"></section>
            <section class="esh-basket-item esh-basket-item--mark col-2">$ {{totalPrice | number:'.2-2'}}</section>
        </article>

        <article class="esh-basket-items row">
            <section class="esh-basket-item col-7"></section>
            <section class="esh-basket-item col-2">
                <button class="btn esh-basket-checkout" (click)="update($event)">[ Update ]</button>
            </section>
            <section class="esh-basket-item col-3">
                <div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
            </section>
        </article>
    </div>
</div>
