{{ header }}
<section class="container-fluid" id="data-selected-url" data-aviseme="{{status_aviseme}}" data-selected-url="{{ url }}" data-pagination='{{ (paginationajax) ? pagination : "" }}'>
	{{ breadcrumbs }}
	{{ column_refinar }}
	<div class="row middle-xs x-small-space-xs medium-space-sm bottom-margin-medium">
    {% if productSpecialList %}
      {% if content_top %}
        <div class="col-xs-12">
          <div class="content-box">
            {{ content_top }}
          </div>
        </div>
      {% endif %}
      <div class="col-xs-12 col-sm">
        <div class="content-box">
          <h1 class="heading-1">{{ heading_title }}</h1>
        </div>
      </div>
      <div class="col-xs-12 col-sm-width-auto">
        <div class="content-box flex flex-row nowrap-xs">
          <select class="field-entry field-entry-medium right-margin-small" onchange="location = this.value;" style="width:180px;">
            {% for sorts in sorts %}
              <option value="{{ sorts.href }}" {% if sorts.value == sort ~ '-' ~ order %} selected {% endif %}>{{ sorts.text }}</option>
            {% endfor %}
          </select>
          <button id="change-view" class="btn-default btn-outline btn-medium-square" title="Visualizar em lista">
            <i class="fas fa-list-ul"></i>
          </button>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="products-view {{ gridOrList }}">
          {{ productSpecialList }}
        </div>
      </div>
      <div class="col-xs-12">
        <div class="content-box">
          {% if paginationajax == false %}
            <div class="top-border-gray top-padding-medium top-margin-medium">
              {{ pagination }}
            </div>
          {% else %}
            <div class="flex flex-row center-xs">
              <button type="button" class="btn-default btn-medium btn-outline js-more-products" disabled>
                <span>Visualizar mais</span>
              </button>
            </div>
          {% endif %}
        </div>
      </div>
    {% else %}
      <div class="col-xs-12">
        <div class="content-box border-gray text-center padding-x-large">
          <i class="far fa-meh bigger-text-medium vertical-middle bottom-margin-x-small" aria-hidden="true"></i>
          <span class="text-x-large vertical-middle left-margin-small">{{ text_empty }}</span>
        </div>
      </div>
    {% endif %}
	</div>
</section>
{{ footer }}
