<div class="row filter-wrapper">
  <div class="col-md-2 col-sm-6 hidden-xs">
    <div class="btn-group btn-group-sm">
      <a href="{{ style_list }}" class="btn btn-default {{ style == 'list' ? 'active' : '' }}" data-toggle="tooltip" title="{{ button_list }}"><i class="fa fa-th-list"></i></a>
      <a href="{{ style_grid }}" class="btn btn-default {{ style == 'grid' ? 'active' : '' }}" data-toggle="tooltip" title="{{ button_grid }}"><i class="fa fa-th"></i></a>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="form-group"><a href="{{ compare }}" id="compare-total" class="btn btn-link">{{ text_compare }}</a></div>
  </div>
  <div class="col-md-4 col-xs-6">
    <div class="form-group input-group input-group-sm">
      <label class="input-group-addon" for="input-sort">{{ text_sort }}</label>
      <select id="input-sort" class="form-control" onchange="location = this.value;">
        {% for sorts in sorts %}
        {% if sorts.value == '%s-%s'|format(sort, order) %}
        <option value="{{ sorts.href }}" selected="selected">{{ sorts.text }}</option>
        {% else %}
        <option value="{{ sorts.href }}">{{ sorts.text }}</option>
        {% endif %}
        {% endfor %}
      </select>
    </div>
  </div>
  <div class="col-md-3 col-xs-6">
    <div class="form-group input-group input-group-sm">
      <label class="input-group-addon" for="input-limit">{{ text_limit }}</label>
      <select id="input-limit" class="form-control" onchange="location = this.value;">
        {% for limits in limits %}
        {% if limits.value == limit %}
        <option value="{{ limits.href }}" selected="selected">{{ limits.text }}</option>
        {% else %}
        <option value="{{ limits.href }}">{{ limits.text }}</option>
        {% endif %}
        {% endfor %}
      </select>
    </div>
  </div>
</div>
