{# include this template to list all items of the given order #}
{% load i18n %}

<table cellspacing="0" cellpadding="12" border="1" style="width: 100%; border: 1px solid #ddd;">
{% block email-order-thead %}
	<caption style="font-weight: bold; font-size: 130%; padding: 20px 0 10px; text-align: center; border: 2px solid #ddd;">
		{% block email-order-caption %}{% trans "Summary of Your Order" %} {{ data.number }}{% endblock %}
	</caption>
	<thead>
		<tr>
			<th scope="col" style="text-align: left; border: 1px solid #ddd; border-bottom-width: 3px; padding: 12px;">{% trans "Product" %}</th>
			<th scope="col" style="text-align: left; border: 1px solid #ddd; border-bottom-width: 3px; padding: 12px;">{% trans "Quantity" %}</th>
			<th scope="col" style="text-align: left; border: 1px solid #ddd; border-bottom-width: 3px; padding: 12px;">{% trans "Price" %}</th>
		</tr>
	</thead>
{% endblock email-order-thead %}

{% block email-order-tbody %}
	<tbody>
	{% for item in data.items %}
		<tr>
			<td rowspan="2" style="text-align: left; vertical-align: middle; border: 1px solid #ddd; border-bottom-width: 3px; padding: 10px 15px;">{{ item.summary.media|safe }}</td>
			<td style="text-align: left; vertical-align: middle; border: 1px solid #ddd; padding: 10px 15px;">{{ item.quantity }}</td>
			<td style="text-align: left; vertical-align: middle; border: 1px solid #ddd; padding: 10px 15px;">{{ item.line_total }}</td>
		</tr>
		<tr>
			<td colspan="3" style="border: 1px solid #ddd; border-bottom-width: 3px;" border="1">
				{{ item.summary.body|safe }}
				{% for modifier, extra_row in item.extra.rows %}
				<p>{{ extra_row.label }}: {{ extra_row.amount }}</p>
				{% endfor %}
			</td>
		</tr>
	{% endfor %}
	</tbody>
{% endblock email-order-tbody %}

{% block email-order-tfoot %}
	<tfoot>
		<tr>
			<th scope="row" colspan="2" style="text-align: left; border: 1px solid #ddd; padding: 12px;">{% trans "Subtotal" %}:</th>
			<td style="text-align: left; border: 1px solid #ddd; padding: 12px;"><span>{{ data.subtotal }}</span></td>
		</tr>
		{% for key, extra_row in data.extra.rows %}
		<tr>
			<th scope="row" colspan="2" style="text-align: left; border: 1px solid #ddd; padding: 12px;">{{ extra_row.label }}:</th>
			<td style="text-align: left; border: 1px solid #ddd; padding: 12px;">{{ extra_row.amount }}</td>
		</tr>
		{% endfor %}
		<tr>
			<th scope="row" colspan="2" style="text-align: left; border: 1px solid #ddd; border-bottom-width: 3px; padding: 12px;">{% trans "Total" %}:</th>
			<td style="text-align: left; border: 1px solid #ddd; border-bottom-width: 3px; padding: 12px;"><strong>{{ data.total }}</strong></td>
		</tr>
	</tfoot>
{% endblock email-order-tfoot %}
</table>