<div id="cart">
  <button type="button" data-toggle="modal" data-target="#cartmodal"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-shopping-bag"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg><span id="cart-total">{{ text_items }}</span></button>
  <div class="modal fade" tabindex="-1" id="cartmodal" role="dialog" >
  <div class="modal-dialog modal-block" role="document">
  <button type="button" data-dismiss="modal" aria-label="close" class="modal-close"><span aria-hidden="true">&times;</span></button>
    <div class="menu-modal">
  <ul class="cart-block">
    {% if products or vouchers %}
    <li>
      <table class="table cart-table">
        {% for product in products %}
        <tr class="flex-center">
          <td class="text-center">{% if product.thumb %} <a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" /></a> {% endif %}</td>
          <td class="text-left"><a href="{{ product.href }}">{{ product.name }}</a> {% if product.option %}
            {% for option in product.option %} <br />
            - <small>{{ option.name }} {{ option.value }}</small> {% endfor %}
            {% endif %}
            {% if product.recurring %} <br />
            - <small>{{ text_recurring }} {{ product.recurring }}</small> {% endif %}</td>
      
          <td class="text-right">{{ product.total }}</td>
          <td class="text-center"><button type="button" onclick="cart.remove('{{ product.cart_id }}');" title="{{ button_remove }}" class="cart-close"><span aria-hidden="true">&times;</span></button></td>
        </tr>
        {% endfor %}
        {% for voucher in vouchers %}
        <tr>
          <td class="text-center"></td>
          <td class="text-left">{{ voucher.description }}</td>
   
          <td class="text-right">{{ voucher.amount }}</td>
          <td class="text-center text-danger"><button type="button" onclick="voucher.remove('{{ voucher.key }}');" title="{{ button_remove }}" class="cart-close"><span aria-hidden="true">&times;</span></button></td>
        </tr>
        {% endfor %}
      </table>
    </li>
    <li>
      <div>
        <table class="table cart-total">
          {% for total in totals %}
          <tr>
            <td class="text-right"><strong>{{ total.title }}</strong></td>
            <td class="text-right">{{ total.text }}</td>
          </tr>
          {% endfor %}
        </table>
        <p class="text-center">
		<a href="{{ cart }}" class="btn btn-primary">{{ text_cart }}</a></br></br>
		<a href="{{ checkout }}" class="btn btn-default">{{ text_checkout }}</a></p>
      </div>
    </li>
    {% else %}
    <li>
      <p class="text-center cart-text">{{ text_empty }}</p>
    </li>
    {% endif %}
  </ul>
    </div>
  </div>
</div>
</div>
