<div class="table-responsive">
	<table class="table table-bordered table-hover">
		<thead>
			<tr>
				<td class="text-start">{{ column_name }}</td>
				<td class="text-end">{{ column_total }}</td>
			</tr>
		</thead>
		<tbody>
			{% for product in products %}
				<tr>
					<td class="text-start">{{ product.quantity }}x
						<a href="{{ product.href }}">{{ product.name }}</a>
						{% for option in product.option %}
							<br/>
							<small>
								-
								{{ option.name }}:
								{{ option.value }}</small>
						{% endfor %}
						{% if product.reward %}
							<br/>
							<small>
								-
								{{ text_points }}:
								{{ product.reward }}</small>
						{% endif %}
						{% if product.subscription %}
							<br/>
							<small>
								-
								{{ text_subscription }}
								{{ product.subscription }}</small>
						{% endif %}
					</td>
					<td class="text-end">{{ product.total }}</td>
				</tr>
			{% endfor %}
			{% for voucher in vouchers %}
				<tr>
					<td class="text-start">1x
						{{ voucher.description }}</td>
					<td class="text-end">{{ voucher.amount }}</td>
				</tr>
			{% endfor %}
		</tbody>
		<tfoot>
			{% for total in totals %}
				<tr>
					<td class="text-end">
						<strong>{{ total.title }}</strong>
					</td>
					<td class="text-end">{{ total.text }}</td>
				</tr>
			{% endfor %}
		</tfoot>
	</table>
</div>
<div id="checkout-payment">
	{% if payment %}
		{{ payment }}
	{% else %}
		<div class="text-end">
			<button type="button" class="btn btn-primary-new" disabled>{{ button_confirm }}</button>
		</div>
	{% endif %}
</div>
