{% load i18n static sekizai_tags %}

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

<table class="table table-condensed">

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

{% block shop-cart-tbody %}
	<tbody>
	{% for cart_item in cart.items %}
		<tr>
			<td class="text-center">{{ cart_item.quantity }}</td>
			<td class="text-left">{{ cart_item.summary.media }}</td>
			<td class="text-right">
				<p>{{ cart_item.unit_price }}</p>
				{% for extra_row in cart_item.extra_rows %}
				<div>{{ extra_row.label }}</div>
				{% endfor %}
			</td>
			<td class="text-right">
				<p>{{ cart_item.line_total }}</p>
				{% for extra_row in cart_item.extra_rows %}
				<div>{{ extra_row.amount }}</div>
				{% endfor %}
			</td>
		</tr>
	{% endfor %}
	</tbody>
{% endblock shop-cart-tbody %}

{% block shop-cart-tfoot %}
	<tfoot>
		<tr>
			<td colspan="3" class="text-right"><strong>{% trans "Subtotal" %}</strong></td>
			<td class="text-right">
				<strong djng-bind-if="cart.subtotal">{{ cart.subtotal }}</strong>
			</td>
		</tr>
	{% for extra_row in cart.extra_rows %}
		<tr ng-if="!cart">
		{% include 'shop/cart/extra-row.html' with ng=0 %}
		</tr>
	{% endfor %}
		<tr ng-cloak ng-if="cart" ng-repeat="extra_row in cart.extra_rows">
		{% include 'shop/cart/extra-row.html' with ng=1 %}
		</tr>
		<tr class="double-border">
			<td colspan="2" class="no-border"></td>
			<td class="text-right">
				<h4><strong>{% trans "Total" %}</strong></h4>
			</td>
			<td class="text-right">
				<h4><strong djng-bind-if="cart.total">{{ cart.total }}</strong></h4>
			</td>
		</tr>
	</tfoot>
{% endblock shop-cart-tfoot %}

</table>
