<div class="checkout-content checkout-cart">
	<h2 class="secondary-title">{{ text_shopping_cart }} {% if (weight) %} {{ '(' ~ weight ~ ')' }}{% endif %}</h2>
	<div class="box-inner">
		<div class="table-responsive checkout-product">
			<table class="table-bordered">
				<thead class="hidden-xs">
				<tr>
					<td>{{ column_image }}</td>
					<td width="37%">{{ column_name }}</td>
					<th>{{ column_quantity }}</th>
					<th class="text-right">{{ column_price }}</th>
					<th class="text-right">{{ column_total }}</th>
				</tr>
				</thead>
				<tbody>
				{% for product in products %}
					<tr class="visible-xs">
						<td colspan="4">
                            <span class="visible-xs">
                                    <a href="{{ product['href'] }}">{{ product['name'] }}</a>
                                {% for option in product['option'] %}
									<br/>
                                &nbsp;
                                    <small> - {{ option['name'] }}: {{ option['value'] }}</small>
								{% endfor %}
								{% if (product['recurring']) %}
									<br/>
									<span class="label label-info">{{ text_recurring_item }}</span>
									<small>{{ product['recurring'] }}</small>
								{% endif %}
                            </span>
						</td>
					</tr>
					<tr>
						{% if (product['thumb']) %}
							<td style="width: 100px">
								<a href="{{ product['href'] }}">
									<img src="{{ product['thumb'] }}" alt="{{ product['name'] }}" title="{{ product['name'] }}" class="img-thumbnail"/>
								</a>
							</td>
						{% endif %}
						<td valign="top" class="hidden-xs">
							<a href="{{ product['href'] }}">{{ product['name'] }}</a>
							{% for option in product['option'] %}
								<br/><small>- {{ option['name'] }}: {{ option['value'] }}</small>
							{% endfor %}
							{% if (product['recurring']) %}
								<br/>
								<span class="label label-info">{{ text_recurring_item }}</span>
								<small>{{ product['recurring'] }}</small>
							{% endif %}
						</td>
						<td class="text-right">
							<div class="input-group btn-block text-left">
								<input type="text" style="width: 40px; height: 40px" name="quantity[{{ product.cart_id }}]" value="{{ product.quantity }}" size="1" class="form-control"/>
								<span class="input-group-btn">
                                    <button type="submit" data-toggle="tooltip" title="{{ button_update }}" data-product-key="{{ product.cart_id }}" class="btn btn-primary btn-update"><i class="fa fa-refresh"></i></button>
                                    <button type="button" data-toggle="tooltip" title="{{ button_remove }}" data-product-key="{{ product.cart_id }}" class="btn btn-danger btn-delete"><i class="fa fa-times-circle"></i></button>
                                </span>
							</div>
							<span class="visible-xs">
                                {{ product['total'] }}
                            </span>
						</td>
						<td class="text-right hidden-xs">{{ product['price'] }}</td>
						<td class="text-right hidden-xs">{{ product['total'] }}</td>
					</tr>
				{% endfor %}
				{% for voucher in vouchers %}
					<tr>
						<td class="text-left">{{ voucher['description'] }}</td>
						<td class="text-left"></td>
						<td class="text-right">1</td>
						<td class="text-right">{{ voucher['amount'] }}</td>
						<td class="text-right">{{ voucher['amount'] }}</td>
					</tr>
				{% endfor %}
				</tbody>
				<tfoot>
				{% for total in totals %}
					<tr>
						<td colspan="4" class="text-right hidden-xs">{{ total['title'] }}:</td>
						<td colspan="2" class="text-right visible-xs" valign="bottom">{{ total['title'] }}: &nbsp;&nbsp;{{ total['text'] }}</td>
						<td class="text-right hidden-xs" valign="bottom">
							{{ total['text'] }}
						</td>
					</tr>
				{% endfor %}
				</tfoot>
			</table>
		</div>
		<div id="payment-confirm-button" class="payment-{{ payment_method.code }}">
			<h2 class="secondary-title">{{ text_payment_detail }}</h2>
			{{ payment }}
		</div>
	</div>
</div>