{% for product in products %}
  <tr>
    {% if order_product %}<td class="text-center"><a onclick="deleteProduct('{{ product.order_product_id }}', '{{ order_id }}');" class="btn btn-danger" data-toggle="tooltip" title="{{ button_delete }}"><i class="fa fa-trash-o"></i></a></td>{% endif %}
	<td class="text-center"><img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-thumbnail" /></td>
	<td class="text-left">
	  {% if order_product_name %}
	    <a data-toggle="popover-maxy" data-target="#order-product-name-{{ product.order_product_id }}" data-placement="right right-top" class="btn-hover-list">{{ product.name }}</a>
	    <div id="order-product-name-{{ product.order_product_id }}" class="popover popover-md popover-primary animate littleFadeInRight">
		  <div class="arrow"></div><h3 class="popover-title">{{ column_product }}<a id="close-name-{{ product.order_product_id }}" data-dismiss="popover-maxy" class="btn btn-default btn-xs"><i class="fa fa-close"></i></a></h3>
		  <div class="popover-content">
		    <input type="text" name="name" value="{{ product.name }}" placeholder="{{ column_product }}" class="form-control" />
		  </div>
		  <div class="popover-footer">
		    <a onclick="updateOrderProductTitle('{{ product.order_product_id }}', '{{ order_id }}', 'name');" class="btn btn-primary btn-sm"><i class="fa fa-save fa-fw"></i></a><a onclick="orderClear('{{ product.order_product_id }}', 'name');" class="btn btn-danger btn-sm"><i class="fa fa-eraser fa-fw"></i></a>
		  </div>
	    </div>
	    {% else %}
	    {{ product.name }}
	  {% endif %}
	  {% for option in product.option %}
        <br />
        {% if option.type != 'file' %}
          &nbsp;<small> - {{ option.name }}: {{ option.value }}</small>
          {% else %}
          &nbsp;<small> - {{ option.name }}: <a href="{{ option.href }}">{{ option.value }}</a></small>
        {% endif %}
      {% endfor %}
	</td>
    <td class="text-left">
	  {% if order_product_model %}
	    <a data-toggle="popover-maxy" data-target="#order-product-model-{{ product.order_product_id }}" data-placement="right right-top" class="btn-hover-list">{{ product.model_format }}</a>
	    <div id="order-product-model-{{ product.order_product_id }}" class="popover popover-primary animate littleFadeInRight">
		  <div class="arrow"></div><h3 class="popover-title">{{ column_model }}<a id="close-model-{{ product.order_product_id }}" data-dismiss="popover-maxy" class="btn btn-default btn-xs"><i class="fa fa-close"></i></a></h3>
		  <div class="popover-content">
		    <input type="text" name="model" value="{{ product.model }}" placeholder="{{ column_model }}" class="form-control" />
		  </div>
		  <div class="popover-footer">
		    <a onclick="updateOrderProductTitle('{{ product.order_product_id }}', '{{ order_id }}', 'model');" class="btn btn-primary btn-sm"><i class="fa fa-save fa-fw"></i></a><a onclick="orderClear('{{ product.order_product_id }}', 'model');" class="btn btn-danger btn-sm"><i class="fa fa-eraser fa-fw"></i></a>
		  </div>
	    </div>
	    {% else %}
	    {{ product.model_format }}
	  {% endif %}
	</td>
    <td class="text-right">
	  {% if order_product_quantity %}
	    <a data-toggle="popover-maxy" data-target="#order-product-quantity-{{ product.order_product_id }}" data-placement="left left-top" class="btn btn-default btn-sm">{{ product.quantity }}</a>
	    <div id="order-product-quantity-{{ product.order_product_id }}" class="popover popover-primary animate littleFadeInLeft">
		  <div class="arrow"></div><h3 class="popover-title">{{ column_quantity }}<a id="close-quantity-{{ product.order_product_id }}" data-dismiss="popover-maxy" class="btn btn-default btn-xs"><i class="fa fa-close"></i></a></h3>
		  <div class="popover-content">
		    <input type="number" name="quantity" value="{{ product.quantity }}" placeholder="{{ column_quantity }}" class="form-control" />
		  </div>
		  <div class="popover-footer">
		    <a onclick="updateOrderProduct('{{ product.order_product_id }}', '{{ order_id }}', 'quantity');" class="btn btn-primary btn-sm"><i class="fa fa-save fa-fw"></i></a><a onclick="orderClear('{{ product.order_product_id }}', 'quantity');" class="btn btn-danger btn-sm"><i class="fa fa-eraser fa-fw"></i></a>
		  </div>
	    </div>
	    {% else %}
	    {{ product.quantity }}
	  {% endif %}
	</td>
    <td class="text-right">
	  {% if order_product_price %}
	    <a data-toggle="popover-maxy" data-target="#order-product-price-{{ product.order_product_id }}" data-placement="left left-top" class="btn btn-default btn-sm">{{ product.price }}</a>
	    <div id="order-product-price-{{ product.order_product_id }}" class="popover popover-primary animate littleFadeInLeft">
		  <div class="arrow"></div><h3 class="popover-title">{{ column_price }}<a id="close-price-{{ product.order_product_id }}" data-dismiss="popover-maxy" class="btn btn-default btn-xs"><i class="fa fa-close"></i></a></h3>
		  <div class="popover-content">
		    <input type="number" name="price" value="{{ product.price_format }}" placeholder="{{ column_price }}" class="form-control" />
		  </div>
		  <div class="popover-footer">
		    <a onclick="updateOrderProduct('{{ product.order_product_id }}', '{{ order_id }}', 'price');" class="btn btn-primary btn-sm"><i class="fa fa-save fa-fw"></i></a><a onclick="orderClear('{{ product.order_product_id }}', 'price');" class="btn btn-danger btn-sm"><i class="fa fa-eraser fa-fw"></i></a>
		  </div>
	    </div>
	    {% else %}
	    {{ product.price }}
	  {% endif %}
	</td>
    <td class="text-right">
	  {% if order_product_total %}
	    <a data-toggle="popover-maxy" data-target="#order-product-total-{{ product.order_product_id }}" data-placement="left left-top" class="btn btn-default btn-sm">{{ product.total }}</a>
	    <div id="order-product-total-{{ product.order_product_id }}" class="popover popover-primary animate littleFadeInLeft">
		  <div class="arrow"></div><h3 class="popover-title">{{ column_total }}<a id="close-total-{{ product.order_product_id }}" data-dismiss="popover-maxy" class="btn btn-default btn-xs"><i class="fa fa-close"></i></a></h3>
		  <div class="popover-content">
		    <input type="number" name="total" value="{{ product.total_format }}" placeholder="{{ column_total }}" class="form-control" />
		  </div>
		  <div class="popover-footer">
		    <a onclick="updateOrderProduct('{{ product.order_product_id }}', '{{ order_id }}', 'total');" class="btn btn-primary btn-sm"><i class="fa fa-save fa-fw"></i></a><a onclick="orderClear('{{ product.order_product_id }}', 'total');" class="btn btn-danger btn-sm"><i class="fa fa-eraser fa-fw"></i></a>
		  </div>
	    </div>
	    {% else %}
	    {{ product.total }}
	  {% endif %}
	</td>
  </tr>
{% endfor %}
{% for voucher in vouchers %}
  <tr>
    {% if order_product %}<td></td>{% endif %}
	<td class="text-left" colspan="2"><a href="{{ voucher.href }}">{{ voucher.description }}</a></td>
    <td></td>
    <td class="text-right">1</td>
    <td class="text-right">{{ voucher.amount }}</td>
    <td class="text-right">{{ voucher.amount }}</td>
  </tr>
{% endfor %}
{% for total in totals %}
  <tr>
    <td colspan="{% if order_product %}6{% else %}5{% endif %}" class="text-right">{{ total.title }}</td>
    <td class="text-right">{{ total.text }}</td>
  </tr>
{% endfor %}