<div class="fenetre-recherche">
  <div>
    <span><a class="supprimer-filtres chat-card-button">Effacer les filtres</a></span>
    <span><a class="recherche-filtres chat-card-button">Appliquer les filtres</a></span>
    <span><a class="tirage-filtres chat-card-button">Tirage aléatoire</a></span>
    <br>
    <span class="liste-filtres-actifs"></span>
  </div>
  <hr>
  <div class="zone-recherche">
    <div class="filtres">
      <div class="titre-resultats-recherche">
        <h3>Filtres</h3>
      </div>
      <div class="section-filters-text">
        <h4>
          <input class="recherche flex-grow" type="text" value="{{options.recherche.text}}" name="recherche" size="8" data-dtype="String" placeholder=""/>
        </h4>
      </div>
      <div class="section-filters-root">
        <h4>
          <a class="section-filters-toggle">Milieux
          <span class="item-controls">
          <i class="section-filters-show fa-solid fa-chevrons-down"></i>
          <i class="section-filters-hide fa-solid fa-chevrons-up"></i>
          </span>
        </a>
        </h4>
        <div class="flexcol section-filters-content">
          {{#each filterMilieux as |filter|}}
          <div class="flexrow">
            <input type="checkbox" class="activate-filter-milieu" name="milieu-{{filter.code}}" data-code="{{filter.code}}"/>
            <label for="milieu-{{filter.code}}">{{filter.label}}</label>
          </div>
          {{/each}}
        </div>
      </div>

      {{#each filterGroups as |group|}}
      <div class="section-filters-root" data-group="{{group.group}}" >
        <h4><a class="section-filters-toggle" >{{group.label}}
          <span class="item-controls">
          <i class="section-filters-show fa-solid fa-chevrons-down"></i>
          <i class="section-filters-hide fa-solid fa-chevrons-up"></i>
          </span>
        </a>
        </h4>
        <div class="flexcol section-filters-content">
          {{#each group.filters as |filter|}}
          <div class="flexrow">
            <input type="checkbox" class="activate-filter-group" name="{{filter.group}}-{{filter.code}}" 
              data-group="{{filter.group}}" data-code="{{filter.code}}"/>
            <label for="{{filter.group}}-{{filter.code}}">{{filter.label}}</label>
          </div>
          {{/each}}
        </div>
      </div>
      {{/each}}
      <div class="flex-grow"></div>
    </div>
    <div class="vl"></div>
    <div class="resultats">
      <div class="titre-resultats-recherche">
        <h3>Résultat de recherche</h3>
      </div>
      <div class="liste-resultats-recherche">

      </div>
    </div>
  </div>

  {{!--
   --}}
</form>