<div class="container" style="margin-top: 20px;">
    <div class="row">
        <div class="col-xs-8">
            <h2 class="section-headline"><span>Shopping Cart</span></h2>
        </div>
        <div class="col-xs-4">
            <a href="#"><img src="{{serverPath}}/image/logo.png" class="img-responsive" /></a>
        </div>
    </div>
    <hr style="position: absolute; width:100%; height:6px; background-color: #333; z-index: -1; margin-top: -80px;" />
    <img class="img-responsive" src="{{serverPath}}/image/wood.png" style="margin-top: -75px;" />
    <div class="row" style="margin-top: 120px;">
        <div class="col-xs-12">
            <div class="row">
                <div class="col-xs-6 text-left">
                    <a md-raised-button class="mat-warn" routerLink="/bookList">Continue Shopping</a>
                    <!-- <a md-raised-button *ngIf="displayUpdateCart" class="mat-accent" (click)="onUpdateCart()">Update Cart</a> -->
                </div>
                <div class="col-xs-6 text-right">
                    <a md-raised-button class="mat-primary" (click)="onCheckout()">Check Out</a>
                </div>
            </div>
            <br/>
            <div *ngIf="cartItemUpdated" class="alert alert-success">
                Cart Item Updated Successfully!
            </div>
            <div *ngIf="notEnoughStock" class="alert alert-warning">
                Oops, some of the products don't have enough stock. Please update product quantity.
            </div>
            <div *ngIf="emptyCart" class="alert alert-warning">
                Oops, your cart is empty. See if you can find what you like in the bookshelf and add them to cart.
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <h4>Products</h4></div>
                <div class="col-xs-2">
                    <h4>Price</h4></div>
                <div class="col-xs-2">
                    <h4>Qty</h4></div>
            </div>
            <!--*******  display products in cart  ********-->
            <div class="row" *ngFor="let cartItem of cartItemList">
                <hr/>
                <div class="col-xs-2">
                    <a md-button (click)="onSelect(cartItem.book)"><img class="img-responsive shelf-book" src="{{serverPath}}/image/book/{{cartItem.book.id}}.png" style="width:70px;" /></a>
                </div>
                <div class="col-xs-6">
                    <a class="pointer" (click)="onSelect(cartItem.book)"><h4>
                            {{cartItem.book.title}}</h4></a>
                    <p *ngIf="cartItem.book.inStockNumber > 10" style="color: green;">In Stock</p>
                    <p *ngIf="cartItem.book.inStockNumber < 10 && cartItem.book.inStockNumber > 0" style="color: green;"> Only <span>{{cartItem.book.inStockNumber}}</span> In Stock
                    </p>
                    <p style="color: darkred;" *ngIf="cartItem.book.inStockNumber==0">Product Unavailable</p>
                    <a class="pointer" (click)="onRemoveCartItem(cartItem)">delete</a>
                </div>
                <div class="col-xs-2">
                    <h5 style="color: #db3208; font-size: large;">$<span [ngClass]="{'text-strike': cartItem.book.inStockNumber == 0 }"
                                                                             >{{cartItem.book.ourPrice}}</span>
                        </h5>
                </div>
                <div class="col-xs-2">
                    <input hidden="hidden" name="id" [(ngModel)]="cartItem.id" />
                    <input id="cartItem.id" name="qty" [disabled]="cartItem.book.inStockNumber==0" class="form-control cartItemQty" [(ngModel)]="cartItem.qty" (ngModelChange)="cartItem.toUpdate=true" />
                    <a md-button *ngIf="cartItem.toUpdate" class="pointer mat-warn" (click)="onUpdateCartItem(cartItem)">Update</a>
                </div>
            </div>
            <div class="row">
                <hr/>
                <h4 class="col-xs-12 text-right"><Strong style="font-size: large">Total Price (<span
                        >{{cartItemNumber}}</span> items): </Strong><span
                        style="color: #db3208; font-size: large;">$<span
                        ></span>{{shoppingCart.grandTotal}}</span></h4>
            </div>
        </div>
    </div>
</div>
