{% load static i18n cms_tags sass_tags sekizai_tags %}

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

{% addtoblock "js" %}<script src="{% static 'node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js' %}" type="text/javascript"></script>{% endaddtoblock %}
{% add_data "ng-requires" "ui.bootstrap" %}

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

{% 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 %}

{% block add-product-to-cart-panel %}{% with inline_styles=instance.inline_styles %}
<div class="card {{ card_css_classes }} {{ instance.css_classes }}"{% if inline_styles %} style="{{ inline_styles }}"{% endif %} shop-add-to-cart="{% block add-to-cart-url %}{{ product.get_absolute_url }}/add-to-cart{% endblock %}">

	<div class="card-header">
	{% blocktrans with product_name=product.product_name %}Add {{ product_name }} to cart{% endblocktrans %}
	</div>

	{% block add-product-to-cart-body %}
	<div class="card-body pb-0">
		<div class="d-flex justify-content-between">
			<div class="d-flex flex-column w-25">
				<label for="quantity">{% trans "Quantity" %}</label>
				<div class="form-group">
					<input class="form-control" name="quantity" type="number" min="1" ng-model="context.quantity" ng-model-options="{{ ADD2CART_NG_MODEL_OPTIONS }}" ng-change="updateContext()" />
				</div>
			</div>
			<div class="d-flex flex-column">
				<span class="label">{% trans "Unit Price" %}</span>
				<div class="lead mt-1">
				{% verbatim %}{{ context.unit_price }}{% endverbatim %}
				</div>
			</div>
			<div class="d-flex flex-column">
				<span class="label">{% trans "Subtotal" %}</span>
				<div class="lead mt-1 font-weight-bold">
				{% verbatim %}{{ context.subtotal }}<sup>*</sup>{% endverbatim %}
				</div>
			</div>
		</div>
		<div class="text-muted text-right mb-3">
			<small><sup>*</sup>&nbsp;incl. VAT, plus shipping costs</small>
		</div>
	</div>
	{% endblock add-product-to-cart-body %}

	{% block add-product-to-cart-footer %}
	<div class="card-footer bg-white">
		<div class="d-flex flex-column flex-lg-row justify-content-between">
			<button class="btn btn-secondary m-1" ng-disabled="context.is_in_cart" ng-click="do(addToCart('{% url "shop:watch-list" %}'))">
				{% trans "Watch product" %}
				<i class="fa" ng-class="context.is_in_cart ? 'fa-heart' : 'fa-heart-o'"></i>
			</button>
		{% url "shop:cart-list" as cart_endpoint %}{% trans "The product has been successfully placed in the shopping cart:" as modal_title %}
			<button class="btn btn-primary m-1" ng-click="{% if use_modal_dialog %}do(openModal('{{ modal_title }}')).then(addToCart('{{ cart_endpoint }}')).then(redirectTo()){% else %}do(addToCart('{{ cart_endpoint }}')).then(emit('shop.cart.change')){% endif %}">
				{% trans "Add to cart" %}
				<i class="fa fa-cart-arrow-down"></i>
			</button>
		</div>
		{% if request.session.is_empty %}
		<small class="text-muted m-1">{% block cookie-disclaimer %}
			{% blocktrans %}By adding a product to the cart you are giving consent to cookies being used.{% endblocktrans %}
		{% endblock %}</small>
		{% endif %}
	</div>
	{% endblock add-product-to-cart-footer %}

</div>
{% endwith %}{% endblock add-product-to-cart-panel %}

{% block add-to-cart-modal-dialog %}
<script id="AddToCartModalDialog.html" type="text/ng-template">
	{% block add-to-cart-modal-header %}
	<div class="modal-header">
		<h4 class="modal-title" ng-bind="context.modalTitle"></h4>
	</div>
	{% endblock add-to-cart-modal-header %}

	{% block add-to-cart-modal-body %}
	<div class="modal-body">
		{% verbatim %}{{ context.quantity|number }} &times; {% endverbatim %}{{ product.product_name }}
		{% trans "for {{ context.unit_price }} per piece: {{ context.subtotal }}" %}
	</div>
	{% endblock add-to-cart-modal-body %}

	{% block add-to-cart-modal-footer %}
		{% page_url "shop-cart" as shop_cart_url %}{% if not shop_cart_url %}{% url "shop-cart" as shop_cart_url %}{% endif %}
	<div class="modal-footer">
		{% if shop_cart_url %}
		<button class="btn btn-primary" ng-click="proceed('{{ shop_cart_url }}')">{% trans "Show Cart" %}</button>
		{% endif %}
		<button class="btn btn-primary" ng-click="proceed('{{ request.current_page.get_absolute_url }}')">{% trans "Continue Shopping" %}</button>
		<button class="btn btn-warning" ng-click="cancel()">{% trans "Cancel" %}</button>
	</div>
	{% endblock add-to-cart-modal-footer %}
</script>
{% endblock add-to-cart-modal-dialog %}
