{% extends "shop/print/base.html" %}
{% load i18n shop_tags %}

{% block title %}{% trans "Invoice" %} {{ order.get_number }}{% endblock %}

{% block content %}
	<address>{{ order.billing_address_text }}</address>
	<h5>{% trans "Invoice" %}: {{ order.number }}</h5>
	{% block print-order-body %}
		{% for item in order.items %}
	<div class="shop-list-item row border-top py-2 dontsplit">
		<div class="col-1 align-items-center d-flex">
			<div>{{ item.quantity }}<span class="px-1">&times;</span></div>
		</div>
		<div class="col-5">
			{{ item.summary.media }}
		</div>
		<div class="col-6">
			<div class="row text-nowrap flex-nowrap lead text-right">
				<div class="col-6">{{ item.unit_price }}</div>
				<div class="col-6">{{ item.line_total }}</div>
			</div>
			{% for _, extra_row in item.extra.rows %}
			<div class="row text-muted text-nowrap flex-nowrap text-right">
				<div class="col-6">{{ extra_row.label }}</div>
				<div class="col-6">{{ extra_row.amount }}</div>
			</div>
			{% endfor %}
		</div>
	</div>
		{% endfor %}
	{% endblock print-order-body %}

	{% block print-order-foot %}
	<div class="row dontsplit">
		<div class="col-6 border-top offset-6">
			<div class="row py-2 lead">
				<div class="col-6 text-right text-nowrap">
					{% trans "Subtotal" %}
				</div>
				<div class="col-6 text-right text-nowrap">
					{{ order.subtotal }}
				</div>
			</div>
		{% for key, extra_row in order.extra.rows %}
			<div class="row py-2">
				<div class="col-6 text-right text-nowrap">{{ extra_row.label }}</div>
				<div class="col-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-6 text-right text-nowrap">{{ order.total }}</div>
			</div>
		</div>
	</div>
	<div class="row dontsplit">
		<div class="col-12 pt-3 border-top">
			<p>{% trans "Payment Method" %}: <strong>{{ order.active_payment_method.label }}</strong></p>
			<p>{% trans "Ordered on" %}: <strong>{{ order.created_at|date }}</strong></p>
		</div>
	</div>
	{% endblock print-order-foot %}

{% endblock content %}
