{% load static i18n cms_tags sekizai_tags %}

{% addtoblock "js" %}<script src="{% static 'node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.min.js' %}"></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="panel panel-default"{% if inline_styles %} style="{{ inline_styles }}"{% endif %}>
	<div class="panel-heading">
		<h3 class="panel-title">{% trans "Order Product" %}</h3>
	</div>
	{% block add-product-to-cart-table %}
	<table shop-add-to-cart="{{ product.get_absolute_url }}/add-to-cart" class="table">
		<thead>
			<tr>
				<th>{% trans "Quantity" %}</th>
				<th>{% trans "Unit Price" %}</th>
				<th>{% trans "Subtotal" %}</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<div class="form-group">
						<input class="form-control" type="number" min="1" ng-model="context.quantity" ng-model-options="{{ ADD2CART_NG_MODEL_OPTIONS }}" ng-change="updateContext()" />
					</div>
				</td>
				<td ng-bind="context.unit_price"></td>
				<td ng-bind="context.subtotal"></td>
			</tr>
		{% if request.session.is_empty %}{% spaceless %}
			<tr>
				<td colspan="3">
			{% block cookie-disclaimer %}{% blocktrans %}
				By adding a product to the cart you are giving consent to cookies being used.<br>
				For technical reasons cookies can not be disabled here.
			{% endblocktrans %}{% endblock %}
				</td>
			</tr>
			{% endspaceless %}{% endif %}
			<tr>
				<td></td>
				<td class="vertical-align-middle">
				{% if shop_watch_list_url %}
					<button class="btn btn-info btn-block btn-xs" ng-click="addToCart('{% url 'shop:watch-list' %}', {watch: true})">{% trans "Watch product" %}</button>
				{% endif %}
				</td>
				<td>
					<button class="btn btn-primary btn-block" ng-click="addToCart('{% url 'shop:cart-list' %}')">{% trans "Add to cart" %}</button>
				</td>
			</tr>
		</tbody>
	</table>
	{% endblock add-product-to-cart-table %}
</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-if="!context.watch">{% trans "The product has been successfully placed in the shopping cart:" %}</h4>
		<h4 class="modal-title" ng-if="context.watch">{% trans "Watching this product" %}</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 %}
