{% if histories %}
    <div class="content-box flex middle-xs background-white top-padding-medium horizontal-padding-medium shadow-small hover:shadow-large bottom-margin-small">
      <div class="" style="width:100%;">
        <div class="row">
          <div class="col-xs-4 col-md-2">
            <div class="content-box bottom-padding-medium">
              <span class="text-small text-dark text-bold">{{ column_sale_coupon_history_order_id }}</span>
            </div>
          </div>

          <div class="col-xs-8 col-md-4">
            <div class="content-box bottom-padding-medium">
              <span class="text-small text-dark text-bold">{{ column_sale_coupon_history_customer }}</span>
            </div>
          </div>

          <div class="col-xs-6 col-md-3">
            <div class="content-box bottom-padding-medium">
              <span class="text-small text-dark text-bold">{{ column_sale_coupon_history_discount }}</span>
            </div>
          </div>

          <div class="col-xs-6 col-md-3">
            <div class="content-box bottom-padding-medium">
              <span class="text-small text-dark text-bold">{{ column_sale_coupon_history_date_add }}</span>
            </div>
          </div>

        </div>
      </div>
    </div>

  {% for history in histories %}
    <a href="{{ history.href }}"  class="text-decoration-none">
      <div class="content-box flex middle-xs background-white shadow-small hover:shadow-large bottom-margin-small">
        <div class="col-xs-4 col-md-2">
          <span class="text-small text-dark text-bold">#{{ history.order_id }}</span>
        </div>
        <div class="col-xs-8 col-md-4">
          <span class="text-small text-dark">{{ history.customer }}</span>
        </div>
        <div class="col-xs-6 col-md-3">
          <span class="text-small text-dark">
            R$ {{ history.amount|number_format(2, ',', '.') }}
          </span>
        </div>
        <div class="col-xs-6 col-md-3">
          <span class="text-small text-dark">{{ history.date_added }}</span>
        </div>
      </div>
    </a>
  {% endfor %}
{% else %}
  <div class="col-xs-12">
    <div class="content-box background-white shadow-small vertical-padding-x-large horizontal-padding-large text-center">
      <span class="text-medium text-gray">{{ text_no_results }}</span>
    </div>
  </div>
{% endif %}
<div class="row top-margin-medium">
  <div class="col-xs-12">
    <div class="content-box">
      {{ pagination }}
    </div>
  </div>
</div>