{% extends "shop/cart/editable.html" %}
{% load i18n static sekizai_tags %}

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

{% block shop-cart-table %}
<table shop-cart watch="watch" class="table table-hover">
	{% block shop-cart-thead %}
	<thead>
		<tr>
			<th class="col-xs-7 text-center">{% trans "Product" %}</th>
			<th class="col-xs-2 col-md-1 text-center">{% trans "Quantity" %}</th>
			<th class="col-xs-2 col-md-2 text-center">{% trans "Unit Price" %}</th>
			<th class="col-xs-1"></th>
		</tr>
	</thead>
	{% endblock shop-cart-thead %}

	{% block shop-cart-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-cart-tbody %}

	{% block shop-cart-tfoot %}{% endblock %}
</table>
{% endblock shop-cart-table %}

{% block shop-cart-item %}
	<td>
		<div class="media">
			<div class="media-left" ng-bind-html="cart_item.summary.media"></div>
			<div class="media-body" ng-bind-html="cart_item.summary.body"></div>
		</div>
	</td>
	<td class="text-center">
		<input type="number" class="form-control" min="1" ng-model="cart_item.quantity" />
	</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-cart-item %}
