{% load i18n static cascade_tags sass_tags sekizai_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 'shop/js/utils.js' %}" type="text/javascript"></script>{% endaddtoblock %}
{% add_data "ng-requires" "django.shop.utils" %}

{% block shop-order-title %}
<div class="d-flex align-items-center flex-wrap">
	<h4 class="text-nowrap">{% trans "Order" %} {{ data.number }}</h4>
	<div class="text-nowrap ml-3">{% trans "from" context "order-detail" %} <span shop-timestamp="{{ data.created_at }}"></span></div>
	<div class="ml-auto lead badge badge-primary">{{ data.status }}</div>
</div>
{% endblock %}

{% block shop-order-delivery %}
<div class="row mb-3">
	<div class="col-12 col-lg-6 my-2">
		<div class="card">
			<h5 class="card-header">{% trans "Shipping Address" %}</h5>
			<div class="card-body">
				<pre class="card-text">{{ data.shipping_address_text }}</pre>
			</div>
			<div class="card-footer text-primary">{% trans "Shipping Method" %}: {{ data.active_shipping_method.label }}</div>
		</div>
	</div>
	<div class="col-12 col-lg-6 my-2">
		<div class="card">
			<h5 class="card-header">{% trans "Billing Address" %}</h5>
			<div class="card-body">
				<pre class="card-text">{{ data.billing_address_text }}</pre>
			</div>
			<div class="card-footer text-primary">{% trans "Payment Method" %}: {{ data.active_payment_method.label }}</div>
		</div>
	</div>
</div>
{% endblock %}

{% block shop-order-head %}
<h4>{% trans "Ordered Items" %}</h4>
{% endblock shop-order-head %}

{% block shop-order-body %}
	{% for item in data.items %}
<div class="shop-list-item row border-top py-2">
	<div class="col-12 col-md-6">
		<div class="row align-items-center flex-nowrap">
			<div class="col-2 text-right">
				{{ item.quantity }}<span class="px-1">&times;</span>
			</div>
			<div class="col-10">{{ item.summary.media }}</div>
		</div>
	</div>
	<div class="col-12 col-md-6">
		<div class="row text-nowrap flex-nowrap lead">
			<div class="col-6 text-right">{{ item.unit_price }}</div>
			<div class="col-4 col-md-6 text-right">{{ item.line_total }}</div>
		</div>
		{% for _, extra_row in item.extra.rows %}
		<div class="row text-muted text-nowrap flex-nowrap">
			<div class="col-6 text-right">{{ extra_row.label }}</div>
			<div class="col-4 col-md-6 text-right">{{ extra_row.amount }}</div>
		</div>
		{% endfor %}
	</div>
</div>
	{% endfor %}
{% endblock shop-order-body %}

{% block shop-order-foot %}
<div class="row mb-3">
	<div class="col-12 col-md-6 border-top order-md-last">
		<div class="row py-2 lead">
			<div class="col-6 text-right text-nowrap">
				{% trans "Subtotal" %}
			</div>
			<div class="col-4 col-md-6 text-right text-nowrap">
				{{ data.subtotal }}
			</div>
		</div>
	{% for key, extra_row in data.extra.rows %}
		<div class="row py-2">
			<div class="col-6 text-right text-nowrap">{{ extra_row.label }}</div>
			<div class="col-4 col-md-6 text-right text-nowrap">{{ extra_row.amount }}</div>
		</div>
	{% endfor %}
		<div class="row py-2 shop-double-border lead font-weight-bold">
			<div class="col-6 text-right text-nowrap">{% trans "Total" %}</div>
			<div class="col-4 col-md-6 text-right text-nowrap">{{ data.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-order-foot %}
