<p class="text-info">
    Welcome to the Angular Store.<br />
    Please select the products you want and add them to your shopping cart.<br />
    When you are done, click the shopping cart icon to review your order and check out.
</p>

<p>
    Search: <input ng-model="search">
</p>

<table class="table table-bordered">
    <tr class="well">
        <td class="tdRight" colspan="4" >
            <a href="default.htm#/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>
            </a>
        </td>
    </tr>
    <tr ng-repeat="product in store.products | orderBy:'name' | filter:search" >
        <td class="tdCenter"><img ng-src="img/products/{{product.sku}}.jpg" alt="{{product.name}}" /></td>
        <td>
            <a href="#/products/{{product.sku}}"><b>{{product.name}}</b></a><br />
            {{product.description}}
        </td>
        <td class="tdRight">
            {{product.price | currency}}
        </td>
        <td class="tdCenter">
            <a href="" ng-click="cart.addItem(product.sku, product.name, product.price, 1)">
                add to cart
            </a>
        </td>
    </tr>
    <tr class="well">
        <td class="tdRight" colspan="4">
            <a href="default.htm#/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>
            </a>
        </td>
    </tr>
</table>
