<p class="text-info">
    <img ng-src="img/products/{{product.sku}}.jpg" alt="{{product.name}}"/>
    {{product.name}}: {{product.description}}<br />
</p>

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

            <!-- product info -->
            <table class="table table-bordered">

                <!-- cart summary at the top -->
                <tr class="well">
                    <td class="tdRight" colspan="2" >
                        <a href="#cart" title="go to shopping cart" ng-disabled="cart.getTotalCount() < 1">
                            <i class="icon-shopping-cart" />
                            <b>{{cart.getTotalCount()}}</b> items, <b>{{cart.getTotalPrice() | currency}}</b>
                            <span ng-show="cart.getTotalCount(product.sku) > 0"><br />this item is in the cart</span>
                        </a>
                    </td>
                </tr>

                <!-- product calories -->
                <tr>
                    <td class="tdRight"><b>Calories</b></td>
                    <td class="tdLeft"><h2>{{product.cal}}</h2></td>
                </tr>

                <!-- product nutrients -->
                <tr ng-repeat="(nutrientName, nutrientValue) in product.nutrients">
                    <td class="tdRight">
                        <b>{{nutrientName}}</b>
                    </td>
                    <td>
                        <b>{{store.dvaCaption[nutrientValue]}}</b>:
                        {{store.dvaRange[nutrientValue]}} of the recommended daily value.
                        <br />
                        <store-nutrient-gauge value="{{nutrientValue}}" width="250" height="40" />
                    </td>
                </tr>

                <!-- cart summary at the bottom -->
                <tr class="well">
                    <td class="tdRight" colspan="2" >
                        <a href="#cart" title="go to shopping cart" ng-disabled="cart.getTotalCount() < 1">
                            <i class="icon-shopping-cart" />
                            <b>{{cart.getTotalCount()}}</b> items, <b>{{cart.getTotalPrice() | currency}}</b>
                            <span ng-show="cart.getTotalCount(product.sku) > 0"><br />this item is in the cart</span>
                        </a>
                    </td>
                </tr>

            </table>
        </div>

        <!-- buttons -->
        <div class="span4">
            <button 
                class="btn btn-block btn-primary" 
                ng-click="cart.addItem(product.sku, product.name, product.price, 1)">
                <i class="icon-shopping-cart icon-white" /> add to cart
            </button>
            <button 
                class="btn btn-block btn-danger" 
                ng-click="cart.addItem(product.sku, product.name, product.price, -10000)"
                ng-disabled="cart.getTotalCount(product.sku) < 1">
                <i class="icon-trash icon-white" /> remove from cart
            </button>
            <button 
                class="btn btn-block" 
                onclick="window.location.href=''">
                <i class="icon-chevron-left" /> back to store
            </button>
        </div>
    </div>
</div>

