{% load i18n static sass_tags sekizai_tags %}

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

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


<div class="shop-cart" shop-cart="{% url 'shop:watch-list' %}">
{% block shop-watch-head %}
	<div class="row lead text-muted" ng-if="cart.items.length==0">
		<div class="col">
			{% trans "You are perfectly happy!" %}
		</div>
	</div>
{% endblock shop-watch-head %}

{% block shop-watch-body %}
	<div class="shop-list-item row border-top py-2" shop-cart-item ng-repeat="cart_item in cart.items" ng-init="cart_item.quantity=1">
		<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">
				<div class="col-6 lead text-nowrap text-right" ng-bind="cart_item.summary.price"></div>
	{% block shop-watch-item-controls %}
				<div class="col-4 col-md-6">
					<button type="button" class="ml-auto btn btn-sm btn-secondary btn-block shop-item-control" ng-click="deleteWatchItem(cart_item)">
						<span class="fa fa-trash-o mr-2"></span>{% trans "Remove" %}
					</button>
					<button type="button" class="ml-auto btn btn-sm btn-info btn-block shop-item-control" ng-click="addWatchItem(cart_item)">
						<span class="fa fa-cart-arrow-down mr-2"></span>{% trans "Add to cart" %}
					</button>
				</div>
	{% endblock %}
			</div>
		</div>
	</div>
{% endblock shop-watch-body %}
</div>
