{{ header }}
<header class="background-white bottom-margin-large">
  <div class="container-fluid">
    <div class="row no-space-xs">
      <div class="col-xs-12">
        <div class="content-box vertical-padding-large flex between-xs middle-xs">
          <div>
            <span class="text-x-large text-dark">{{ heading_title }}</span>
            <div class="adm-breadcrumb">
              {% for breadcrumb in breadcrumbs %}
                <i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
                <a href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">
                  {{ breadcrumb.text }}
                </a>
              {% endfor %}
            </div>
          </div>
          <div class="flex flex-row middle-xs">
            <button type="button" class="btn-default btn-outline btn-medium right-margin-small js-submit-main-form">
              <span>{{ button_delete }}</span>
            </button>
            <a href="{{ insert }}" class="btn-primary btn-default btn-medium">
              <span>{{ button_insert }}</span>
            </a>
          </div>
          {% if error_warning %}
            <div class="text-small text-error background-error padding-medium rounded-x-small full-width">{{ error_warning }}</div>
          {% endif %}
          {% if success %}
            <div class="text-small text-success background-success padding-medium rounded-x-small full-width">{{ success }}</div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</header>
<div class="container-fluid">
  <div class="row no-space-xs">
    <div class="col-xs-12">
      <div class="pull-right bottom-padding-small flex between-xs middle-xs">
        {% if filter_count >= 1 %}
          <a class="text-small text-primary text-decoration-none horizontal-padding-large vertical-padding-small" href="index.php?route=sale/coupon&token={{ token }}">
            <span>Limpar Filtros ({{ filter_count }})</span>
          </a>
        {% endif %}
        <button type="button" class="btn-default btn-medium-square btn-primary js-suspended-side-control" id="suspended-side-filter">
          <i class="fas fa-filter"></i>
          <span>Filtrar</span>
        </button>
      </div>
      <div class="adm-suspended-side background-white shadow-large flex flex-column auto-overflow js-suspended-side js-suspended-side-filter">
        <div class="horizontal-padding-large top-padding-large bottom-padding-small flex between-xs middle-xs js-suspended-side-close">
          <span class="text-x-large text-dark">Filtros</span>
          <i class="fas fa-times text-medium text-gray padding-small cursor-pointer"></i>
        </div>
        <div class="adm-suspended-side-content horizontal-padding-large">
          <label class="field field-medium top-margin-medium">
            <span class="field-label">{{ column_name }}</span>
            <input class="field-entry ui-autocomplete-input" type="text" name="filter_name" id="filter_name" value="{{ filter_name }}" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
          </label>
          <label class="field field-medium top-margin-large">
            <span class="field-label">{{ column_code }}</span>
            <input class="field-entry ui-autocomplete-input" type="text" name="filter_code" id="filter_code" value="{{ filter_code }}" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
          </label>
          <span class="visible-block top-margin-large text-small text-dark text-bold">{{ column_status }}</span>
          <label class="radio radio-medium">
            <input class="radio-entry" type="radio" name="filter_status" value="*" checked>
            <span class="radio-text">Ambos</span>
          </label>
          <label class="radio radio-medium">
            <input class="radio-entry" type="radio" name="filter_status" value="1" {{ filter_status ? 'checked' : '' }}>
            <span class="radio-text">{{ text_enabled }}</span>
          </label>
          <label class="radio radio-medium">
            <input class="radio-entry" type="radio" name="filter_status" value="0" {{filter_status is not null and not filter_status ? 'checked' : '' }}>
            <span class="radio-text">{{ text_disabled }}</span>
          </label>
          <label class="checkbox checkbox-medium top-margin-large">
            <input class="checkbox-entry" type="checkbox" name="filter_valido" value="0" {{ filter_valido ? 'checked' : '' }}>
            <span class="checkbox-text">{{ column_validate }}</span>
          </label>
        </div>
        <div class="padding-large">
          <a id="js-btn-filter" class="btn-default btn-medium btn-full btn-primary">
            <span>{{ button_filter }}</span>
          </a>
        </div>
      </div>
    </div>
  </div>
  <form action="{{ delete }}" method="post" class="js-main-form">
    <div class="row">
      <div class="col-xs-12">
        {% if coupons %}
          {% for coupon in coupons %}
            <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="right-margin-medium bottom-margin-medium">
                <label class="checkbox">
                  <input class="checkbox-entry" type="checkbox" name="selected[]" value="{{ coupon.coupon_id }}" {% if coupon.selected %}
                    checked {% endif %}>
                  <span class="checkbox-text"></span>
                </label>
              </div>
              <a href="{{ coupon.href }}" class="text-decoration-none" style="width:calc(100% - 65px);">
                <div class="row nowrap-md no-space-xs middle-xs">
                  <div class="col-xs-12 col-md-3">
                    <div class="content-box bottom-padding-medium">
                      <span class="text-small text-dark visible-block">{{ coupon.name }}</span>
                      <span class="{{ coupon.status == 'Habilitado' ? 'text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-success text-success' : 'text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-error text-error' }}">{{ coupon.status }}</span>
                    </div>
                  </div>
                  <div class="col-xs-12 col-md-3">
                    <div class="content-box bottom-padding-medium">
                      <span class="text-small text-dark" data-tooltip="Código">{{ coupon.code }}</span>
                    </div>
                  </div>
                  <div class="col-xs-6 col-md-2">
                    <div class="content-box bottom-padding-medium">
                      <span class="text-small text-dark" data-tooltip="Desconto">{{ coupon.discount }}</span>
                    </div>
                  </div>
                  <div class="col-xs-6 col-md-2">
                    <div class="content-box bottom-padding-medium">
                      <span class="text-small text-dark">{{ coupon.date_start }}</span>
                    </div>
                  </div>
                  <div class="col-xs-6 col-md-2">
                    <div class="content-box bottom-padding-medium">
                      <span class="text-small text-dark">{{ coupon.date_end }}</span>
                    </div>
                  </div>
                </div>
              </a>
            </div>
          {% 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>
    </div>
  </form>
  <div class="row top-margin-medium">
    <div class="col-xs-12">
      <div class="content-box">
        {{ pagination }}
      </div>
    </div>
  </div>
</div>
{{ footer }}
