{% if error %}
  <div class="warning">{{ error }}</div>
{% endif %}
{% if success %}
  <div class="success">{{ success }}</div>
{% endif %}
<div class="content-box background-white shadow-small hover:shadow-large bottom-margin-small">
  <div class="row no-space-xs middle-xs">
    <div class="col-xs-12">
      <div class="content-box flex between-xs">
        {% if histories %}
          {% for history in histories %}
            <div class="col-xs-12 col-md-2">
              <div class="content-box">
                <span class="text-small text-dark text-bold">{{ history.date_added }}</span>
              </div>
            </div>
            <div class="col-xs-12 col-md">
              <div class="content-box">
                <span class="text-small text-dark">{{ history.comment }}</span>
              </div>
            </div>
            <div class="col-xs-12 col-md-4">
              <div class="content-box">
                <span class="text-small text-dark">{{ history.status }}</span>
              </div>
            </div>
            <div class="col-xs-12 col-md-4">
              <div class="content-box">
                <span class="text-small text-dark" data-tooltip="Cliente notificado">{{ history.notify }}</span>
              </div>
            </div>
          {% endfor %}
        {% else %}
          <div class="col-xs-12">
            <div class="content-box vertical-padding-x-large horizontal-padding-large text-center">
              <span class="text-medium text-gray">{{ text_no_results }}</span>
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
<div class="row top-margin-medium">
  <div class="col-xs-12">
    <div class="content-box">
      {{ pagination }}
    </div>
  </div>
</div>