<div class="checkout-section" id="cart-section">
  <h2>{{ text_checkout_cart }}</h2>
  {% if redirect %}
    <script type="text/javascript"><!--
    location = '{{ redirect }}';
    //--></script>
  {% else %}
    <div class="table-responsive product-wrapper">
      <div class="product-list">
        <table class="table table-hover">
          <thead>
            <tr>
              <td class="text-center hidden-xs">{{ column_image }}</td>
              <td class="text-left">{{ column_name }}</td>
              <td class="text-left">{{ column_model }}</td>
              <td class="text-right">{{ column_quantity }}</td>
              <td class="text-right hidden-xs">{{ column_price }}</td>
              <td class="text-right">{{ column_total }}</td>
            </tr>
          </thead>
          <tbody>
            {% for product in products %}
            <tr>
              <td style="width:60px" class="hidden-xs"><img src="{{ product.image }}" class="img-responsive"></td>
              <td class="text-left">{{ product.name }}
                {% for option in product.option %}
                <br />
                &nbsp;<small> - {{ option.name }}: {{ option.value }}</small>
                {% endfor %}
              </td>
              <td class="text-left">{{ product.model }}</td>
              <td class="text-right">{{ product.quantity }}</td>
              <td class="text-right hidden-xs">{{ product.price }}</td>
              <td class="text-right">{{ product.total }}</td>
            </tr>
            {% endfor %}
            {% for voucher in vouchers %}
            <tr>
              <td></td>
              <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 %}
            {% for recharge in recharges %}
            <tr>
              <td></td>
              <td class="text-left">{{ recharge.description }}</td>
              <td class="text-left"></td>
              <td class="text-right">1</td>
              <td class="text-right">{{ recharge.amount }}</td>
              <td class="text-right">{{ recharge.amount }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <table class="table table-total checkout-total-wrapper">
        <tbody>
          {% for total in totals %}
          <tr>
            <td width="88%" class="text-right"><strong>{{ total.title }}:</strong></td>
            <td class="text-right">{{ total.text }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}
</div>
