<div class="filters-col col-sm-{{ params.filtercolsize }}">
  {% if params.search %}
    {{ include("@bazar/entries/index-dynamic/_search_input.twig") }}
  {% endif %}


  <div class="filters no-dblclick {{ params.filterposition }}">
    <div class="results-info text-info">
      {# Filter Result Count #}
      <template v-if="filters.length > 0 && params.filtersresultnb">
        <span class="nb-results">{{"{{ filteredEntriesCount }}"}}</span>
        <span class="result-label">
          <template v-if="entriesToDisplay.length > 1">{{ _t('BAZ_FICHES_CORRESPONDANTES_FILTRES') }}</template>
          <template v-else>{{ _t('BAZ_FICHE_CORRESPONDANT_FILTRES') }}</template>
        </span>
      </template>

      {# Reset filters #}
      <template v-if="filters.length > 0 && params.resetfiltersbutton">
        <span class="btn btn-xs btn-info reset-filters pull-right" @click="resetFilters()"
              :class="{'btn-block': params.filtercolsize < 4}">
          {{ _t('BAZ_RESET_FILTERS') }}
        </span>
        <div class="clearfix"></div>
      </template>
    </div>

    {# Sort button #}
    <div class="input-group dropdown sort-by" v-if="sortOptions.length > 0">
      <span class="input-group-addon addon-icon">
        {{ _t('BAZ_SORTED_BY') }}
      </span>
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" 
              aria-haspopup="true" aria-expanded="false" >
        <span v-html="currentSort.label"></span>
        <template v-if="currentSort.label">
          <i v-if="currentSort.asc" class="fas fa-arrow-down"></i>
          <i v-else class="fas fa-arrow-up"></i>
        </template>
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li v-for="sort in sortOptions">
          <a href="#" @click.prevent="currentSort = sort">
            {{ _t('BAZ_SORT_BY') }}
            <span v-html="sort.label"></span> 
            <i v-if="sort.asc" class="fas fa-arrow-down"></i>
            <i v-else class="fas fa-arrow-up"></i>
          </a>
        </li>
      </ul>
    </div>

    {# Filters = Facettes #}
    <div class="results-container">
      <Panel class="filter-box" v-for="filter, key in filters" :collapsed.sync="filter.collapsed" :key="key">
        <template #header>
          <i v-html="filter.icon" v-show="filter.icon"></i>
          {{"{{ filter.title }}"}}
        </template>
        <template #body>
          <div class="filter-nodes">
            <Filter-Node v-for="filterNode, id in filter.nodes" :key="id" :node="filterNode" />
          </div>
        </template>
      </Panel>
    </div>
  </div>
</div>