<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" disabled>{{ button_confirm }}</button></div>
  {% endif %}
</div>
