{{ 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">
          <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>
    </div>
  </div>
</header>
<div class="container-fluid">

  {# Filtros #}
  <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=catalog/category&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">{{ text_description }}</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">{{ text_code }}</span>
            <input class="field-entry ui-autocomplete-input mask-number" type="text" name="filter_code" id="filter_code" value="{{ filter_code }}" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
          </label>
          <label class="field field-medium top-margin-large">
            <span class="field-label">{{ text_id_futura }}</span>
            <input class="field-entry ui-autocomplete-input mask-number" type="text" name="filter_id_futura" id="filter_id_futura" value="{{ filter_id_futura }}" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
          </label>
          <span class="visible-block top-margin-large text-small text-dark text-bold">{{ text_status }}</span>
          <label class="radio radio-medium">
            <input class="radio-entry" type="radio" name="filter_status" value="*" checked>
            <span class="radio-text">{{ text_all }}</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>
        </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>

  {# Lista #}
  {% if categories %}
    <div class="row">
      <div class="col-xs-12">
        {% for category in categories %}
          <a href="{{ category.href }}" class="content-box visible-block text-decoration-none background-white shadow-small hover:shadow-large bottom-margin-small">
            <div class="row no-space-xs padding-medium">
              <div class="col-xs-12 col-sm-7">
                <span class="text-small text-dark">{{ category.name }}</span>
              </div>
              <div class="col-xs">
                <span class="text-small text-gray">{{ text_order }} {{ category.sort_order }}</span>
              </div>
              <div class="col-xs">
                {% if category.status %}
                  <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-success text-success">{{ text_enabled }}</span>
                {% else %}
                  <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-error text-error">{{ text_disabled }}</span>
                {% endif %}
              </div>
            </div>
          </a>
        {% endfor %}
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="content-box">
          {{ pagination }}
        </div>
      </div>
    </div>
  {% else %}
    <div class="row">
      <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>
    </div>
  {% endif %}
</div>
{{ footer }}
