<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>
<div class="row">
	<div class="col-md-4">
		<div class="form-group">
			<div class="input-group">
				<div class="input-group-addon">Filter</div>
				<input class="form-control" ng-model="ctx.filter" placeholder="Enter the name of product...">
			</div>
		</div>
	</div>
</div>
<table class="table table-bordered">
	 <!-- cart summary at the top -->
	<tr class="well">
		<td class="text-right" colspan="4">
			<i class="glyphicon glyphicon-shopping-cart" />
			<a href="default.htm#/cart" title="go to shopping cart">
				<b>{{getTotalCount()}}</b> items, <b>{{getTotalPrice() | currency}}</b>
			</a>
		</td>
	</tr>
	<tr ng-repeat="product in ctx.products.items | orderBy:'name' ">
		<td class="text-center"><img ng-src="resources/products/{{product.sku}}.jpg" alt="{{product.name}}" /></td>
		<td>
			<a href="#/product" ng-click="ctx.products.moveCurrentTo(product)"><b>{{product.name}}</b></a><br />
			{{product.description}}
		</td>
		<td class="text-right">
			{{product.price | currency}}
		</td>
		<td class="text-center">
			<a href="" ng-click="addCartItem(product, 1)">
				add to cart
			</a>
		</td>
	</tr>
	<tr class="well">
		<td class="text-right" colspan="4">
			<i class="glyphicon glyphicon-shopping-cart" />
			<a href="default.htm#/cart" title="go to shopping cart">
				<b>{{getTotalCount()}}</b> items, <b>{{getTotalPrice() | currency}}</b>
			</a>
		</td>
	</tr>
</table>