{% load i18n static cms_tags sekizai_tags %}{% spaceless %}

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

{% if LINK_TO_EMPTY_CART or cart.num_items %}
	{% page_url "shop-cart" as shop_cart_url %}
	{% page_attribute "menu_title" "shop-cart" as tooltip %}
{% endif %}
{% url "shop:cart-fetch-dropdown" as endpoint %}

<li class="nav-item{% if has_dropdown %} dropdown{% endif %} {{ item_class }}" {% if has_dropdown %}uib-dropdown is-open="dropdownOpen"{% else %}uib-tooltip="{{ tooltip }}" tooltip-placement="left"{% endif %} shop-dropdown-cart="{{ endpoint }}">
	<a class="nav-link"{% if shop_cart_url %} href="{{ shop_cart_url }}"{% endif %} title="{{ tooltip }}">
	{% block carticon %}
		<i class="fa fa-shopping-cart fa-fw mr-1"></i>
		<ng-pluralize count="cart.num_items" when="{'1': '{% trans "1 Item" context "cart icon" %}', 'other': '{% trans "{} Items" context "cart icon" %}'}"></ng-pluralize>
	{% endblock %}
	</a>
	{% if has_dropdown %}
	<div uib-dropdown-menu class="dropdown-menu dropdown-menu-right" role="menu">
		{% block dropdown-menu %}
		<div ng-repeat="cartItem in cart.items">
			{% verbatim %}
			<div class="dropdown-item border-bottom d-flex flex-column mb-1" ng-if="$index<3">
				<div ng-bind-html="cartItem.summary.media"></div>
				<div class="d-flex flex-row">
					<div class="w-50 text-muted">{{ cartItem.quantity }} &times; {{ cartItem.unit_price }}</div>
					<div class="w-50 text-right font-weight-bold">{{ cartItem.line_total }}</div>
				</div>
			</div>
			{% endverbatim %}
			<div class="dropdown-item text-muted" ng-if="$index==3">
				{% blocktrans with remaining='{{ cart.num_items-3 }}' %}and {{ remaining }} <a href="{{ shop_cart_url }}">more items</a>.{% endblocktrans %}
			</div>
		</div>
		{% endblock dropdown-menu %}
		<div class="dropdown-item d-flex lead">
			<div class="w-50 text-muted">{% trans "Subtotal" %}:</div>&nbsp;
			<div class="w-50 text-right font-weight-bold" ng-bind="cart.subtotal"></div>
		</div>
	</div>
	{% endif %}
</li>

<script id="{{ endpoint }}" type="application/json">{{ cart_as_json }}</script>

{% endspaceless %}
