<p class="text-info">
    Thanks for shopping at the Angular Store.<br />
    This is your shopping cart. Here you can edit the items, 
    go back to the store, clear the cart, or check out.
</p>

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8">

            <!-- items -->
            <table class="table table-bordered">

                <!-- header -->
                <tr class="well">
                    <td><b>Item</b></td>
                    <td class="tdCenter"><b>Quantity</b></td>
                    <td class="tdRight"><b>Price</b></td>
                    <td />
                </tr>

                <!-- empty cart message -->
                <tr ng-hide="cart.getTotalCount() > 0" >
                    <td class="tdCenter" colspan="4">
                        Your cart is empty.
                    </td>
                </tr>

                <!-- cart items -->
                <tr ng-repeat="item in cart.items | orderBy:'name'">
                    <td>{{item.name}}</td>
                    <td class="tdCenter">
                        <store-product-quantity value="item.quantity" width="80" />
                    </td>
                    <td class="tdRight">{{item.price * item.quantity | currency}}</td>
                    <td class="tdCenter" title="remove from cart">
                        <a href="" ng-click="cart.addItem(item.sku, item.name, item.price, -10000000)" >
                            <i class="icon-remove" />
                        </a>
                    </td>
                </tr>

                <!-- footer -->
                <tr class="well">
                    <td><b>Total</b></td>
                    <td class="tdCenter"><b>{{cart.getTotalCount()}}</b></td>
                    <td class="tdRight"><b>{{cart.getTotalPrice() | currency}}</b></td>
                    <td />
                </tr>
            </table>
        </div>

        <!-- buttons -->
        <div class="span4">
            <p class="text-info">
                <button 
                    class="btn btn-block" 
                    onclick="window.location.href='default.htm'">
                    <i class="icon-chevron-left" /> back to store
                </button>
                <button 
                    class="btn btn-block btn-danger" 
                    ng-click="cart.clearItems()" 
                    ng-disabled="cart.getTotalCount() < 1" >
                    <i class="icon-trash icon-white" /> clear cart
                </button>
            </p>

            <br /><br />

            <p class="text-info">
                <button
                    class="btn btn-block btn-primary"
                    ng-click="cart.checkout('PayPal')"
                    ng-disabled="cart.getTotalCount() < 1">
                    <i class="icon-ok icon-white" /> check out using PayPal
                </button>
                <button 
                    class="btn btn-block btn-primary" 
                    ng-click="cart.checkout('Google')" 
                    ng-disabled="cart.getTotalCount() < 1">
                    <i class="icon-ok icon-white" /> check out using Google
                </button>
            </p>

            <br /><br />

            <p class="text-info">
                <button 
                    class="btn btn-block btn-link"
                    ng-click="cart.checkout('PayPal')"
                    ng-disabled="cart.getTotalCount() < 1" >
                    <img src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" alt="checkout PayPal"/>
                </button>    
                <button 
                    class="btn btn-block btn-link" 
                    ng-click="cart.checkout('Google')" 
                    ng-disabled="cart.getTotalCount() < 1" >
                    <img src="https://checkout.google.com/buttons/checkout.gif?w=168&h=44&style=white&variant=text" alt="checkoutGoogle"/>
                </button>    
            </p>
        </div>
    </div>
</div>
