{% load i18n static sekizai_tags %}

{% addtoblock "js" %}<script src="{% static 'shop/js/cart.js' %}" type="text/javascript"></script>{% endaddtoblock %}
{% add_data "ng-requires" "django.shop.cart" %}

{% block shop-watch-table %}
<table shop-cart watch="watch" class="table table-hover">
	<!-- content is rendered via ng-template "shop/cart.html" -->
</table>
{% endblock shop-watch-table %}

<script id="shop/cart.html" type="text/ng-template">
{% block shop-watch-thead %}
	<thead>
		<tr>
			<th class="col-xs-10 text-center">{% trans "Product" %}</th>
			<th class="col-xs-1 text-right">{% trans "Unit Price" %}</th>
			<th class="col-xs-1"></th>
		</tr>
	</thead>
{% endblock shop-watch-thead %}

{% block shop-watch-tbody %}
	<tbody>
		<tr shop-cart-item ng-repeat="cart_item in cart.items" ng-init="cart_item.quantity=1">
			<!-- content is rendered via ng-template "shop/cart-item.html" -->
		</tr>
	</tbody>
{% endblock shop-watch-tbody %}

{% block shop-watch-tfoot %}
	<tfoot><tr><td colspan="3"></td></tr></tfoot>
{% endblock %}
</script>

<script id="shop/cart-item.html" type="text/ng-template">
{% block shop-watch-item %}
	<td>
		<div class="media" ng-bind-html="cart_item.summary.media"><!-- rendered by products/cart-`product`-media.html --></div>
	</td>
	<td class="text-center text-nowrap">
		<strong ng-bind="cart_item.summary.price"></strong>
	</td>
	<td>
		<button type="button" class="btn btn-xs btn-info btn-block" ng-click="addCartItem(cart_item)">
			<span class="glyphicon glyphicon-ok-circle"></span>&nbsp;{% trans "Add to cart" %}
		</button>
		<button type="button" class="btn btn-xs btn-danger btn-block" ng-click="deleteCartItem(cart_item)">
			<span class="glyphicon glyphicon-remove-circle"></span>&nbsp;{% trans "Remove" %}
		</button>
	</td>
{% endblock shop-watch-item %}
</script>
