<div class="container">
    <div class="row">
        <div class="col-xs-8">
            <h2 class="section-headline"><span>Order Summary</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="alert alert-success">
                <h3><i class="fa fa-check" aria-hidden="true" style="color: limegreen"></i> Thank you, your order has
                    been placed.</h3>
                <h4>
                    The estimated delivery date is <span>{{estimatedDeliveryDate}}</span></h4>
            </div>
            <h3>List of Items</h3>

            <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>
                </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 text-center ">
                    <h5 style="font-size: large ">{{cartItem.qty}}</h5>
                </div>
            </div>
        </div>
    </div>
</div>
