<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">{{ heading_title }}</h4>
    </div>
    <div class="modal-body">
      <div class="table-responsive">
        <table class="table table-bordered">
          <thead>
            <tr>
              <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">{{ column_price }}</td>
              <td class="text-right">{{ column_total }}</td>
            </tr>
          </thead>
          <tbody>
            {% for product in products %}
              <tr>
                <td class="text-left"><a href="{{ product.href }}">{{ product.name }}</a> {% if not product.stock %} <span class="text-danger">***</span> {% endif %}
                  {% if product.option %}
                    {% for option in product.option %}
                      <br/>
                      <small>{{ option.name }}: {{ option.value }}</small> {% endfor %}
                  {% endif %}
                  {% if product.reward %}
                    <br/>
                    <small>{{ product.reward }}</small> {% endif %}
                  {% if product.recurring %}
                    <br/>
                    <span class="label label-info">{{ text_recurring_item }}</span>
                    <small>{{ product.recurring }}</small> {% endif %}</td>
                <td class="text-left">{{ product.model }}</td>
                <td class="text-right">{{ product.quantity }}</td>
                <td class="text-right">{{ 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-left">
                  <div class="input-group btn-block" style="max-width: 200px;">
                    <input type="text" name="" value="1" size="1" disabled="disabled" class="form-control"/>
                    <div class="input-group-btn">
                      <button type="button" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger" onclick="voucher.remove('{{ voucher.key }}');"><i class="fa fa-times-circle"></i></button>
                    </div>
                  </div>
                </td>
                <td class="text-right">{{ voucher.amount }}</td>
                <td class="text-right">{{ voucher.amount }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="row">
        <div class="col-sm-4 col-sm-offset-8">
          <table class="table table-bordered">
            {% for total in totals %}
              <tr>
                <td class="text-right"><strong>{{ total.title }}</strong></td>
                <td class="text-right">{{ total.text }}</td>
              </tr>
            {% endfor %}
          </table>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <div class="row">
        <div class="col-sm-6 text-right"><a href="{{ continue }}" class="btn btn-default">{{ button_shopping }}</a></div>
        <div class="col-sm-6 text-right"><a href="{{ checkout }}" class="btn btn-primary">{{ button_checkout }}</a></div>
      </div>
    </div>
  </div>
</div>