{% load i18n static cascade_tags sass_tags sekizai_tags %}
{% load page_url from cms_tags %}
{% load render_plugin from cascade_tags %}

{% addtoblock "css" %}<link href="{% sass_src 'shop/css/list-items.scss' %}" rel="stylesheet" type="text/css" />{% endaddtoblock %}

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

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

{% page_url "shop-watch-list" as shop_watch_list_url %}{% if not shop_watch_list_url %}{% url "shop-watch-list" as shop_watch_list_url %}{% endif %}

<div class="shop-cart" shop-cart="{% url 'shop:cart-list' %}">
{% block shop-cart-head %}
	<div class="row lead text-muted" ng-if="cart.num_items==0">
		<div class="col">
			{% trans "There are no items in the cart." %}
		</div>
	</div>
{% endblock shop-cart-head %}

{% block shop-cart-body %}
	<div class="shop-list-item row border-top py-2" shop-cart-item ng-repeat="cart_item in cart.items">
		<div class="col-12 col-md-6" ng-bind-html="cart_item.summary.media">
			{# rendered by ProductSerializer using template "(myshop|shop)/products/cart-{product_model}-media.html" #}
		</div>
		<div class="col-12 col-md-6">
			<div class="row align-items-center">
	{% block shop-cart-item-input %}
				<div class="col">
					<div class="form-inline text-nowrap flex-nowrap justify-content-end mb-1 lead">
						<div ng-bind="cart_item.unit_price"></div>
						<div class="px-1">&times;</div>
						<input type="number" class="form-control" ng-model="cart_item.quantity" ng-model-options="{{ EDITCART_NG_MODEL_OPTIONS }}" ng-change="updateCartItem(cart_item)" />
						<div ng-bind="cart_item.line_total"></div>
					</div>
					<div class="row text-muted text-nowrap mb-1" ng-repeat="extra_row in cart_item.extra_rows">
						<div class="col text-right" ng-bind="extra_row.label"></div>
						<div class="col text-right" ng-bind="extra_row.amount"></div>
					</div>
				</div>
	{% endblock %}
	{% block shop-cart-item-controls %}
				<div class="col">
					<div class="row">
						<div class="col mb-2">
							<button type="button" class="ml-auto btn btn-sm btn-secondary btn-block shop-item-control" ng-click="deleteCartItem(cart_item)">
								<span class="fa fa-trash-o mr-2"></span>{% trans "Remove" %}
							</button>
						</div>
		{% if shop_watch_list_url %}
						<div class="col mb-2">
							<button type="button" class="ml-auto btn btn-sm btn-info btn-block shop-item-control" ng-click="watchCartItem(cart_item)">
								<span class="fa fa-heart-o mr-2"></span>{% trans "Watch Item" %}
							</button>
						</div>
		{% endif %}
					</div>
				</div>
	{% endblock %}
			</div>
		</div>
	</div>
{% endblock shop-cart-body %}

{% block shop-cart-foot %}
	<div class="row">
		<div class="col-12 col-md-6 order-md-last border-top">
			<div class="row py-2 lead">
				<div class="col text-right text-nowrap">
					{% trans "Subtotal" %}
				</div>
				<div class="col text-right text-nowrap" ng-bind="cart.subtotal">
					<!-- Subtotal -->
				</div>
			</div>
			<div class="row py-2" ng-repeat="extra_row in cart.extra_rows">
				<div class="col text-right text-nowrap" ng-bind="extra_row.label"></div>
				<div class="col text-right text-nowrap" ng-bind="extra_row.amount"></div>
			</div>
			<div class="row py-2 shop-double-border lead font-weight-bold">
				<div class="col text-right text-nowrap">{% trans "Total" %}</div>
				<div class="col text-right text-nowrap" ng-bind="cart.total">
					<!-- Total -->
				</div>
			</div>
		{% if instance.right_extension %}
			{% render_plugin instance.right_extension %}
		{% endif %}
		</div>
		<div class="col-12 col-md-6">
		{% if instance.left_extension %}
			{% render_plugin instance.left_extension %}
		{% endif %}
		</div>
	</div>
{% endblock shop-cart-foot %}
</div>
