{% extends '@App/partials/base.html.twig' %}

{% block content %}



  <div class="body-wrapper">
    <div class="container-fluid">

      <div class="card card-body py-3">
        <div class="row align-items-center">
          <div class="col-12">
            <div class="d-sm-flex align-items-center justify-space-between">
              <h4 class="fs-7 fw-bolder mb-4 mb-sm-0 card-title">Annuaire des partenaires</h4>
            </div>
          </div>
        </div>
      </div>

      <section class="pt-md-14 pb-4 pb-md-5">
        <div
          class="container-fluid"
          data-controller="annuaire-filters"
          data-annuaire-filters-frame-id-value="annuaire-results"
          data-annuaire-filters-url-value="{{ path('portail_ajax_filter_by_secteurs') }}"
        >
          <button class="btn bg-danger-subtle text-danger" type="button" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvas" aria-controls="filterOffcanvas">
            Filtres
          </button>
          {% include '@Portail/app/annuaire/filtres_offcanvas.html.twig' %}
          <div class="offcanvas offcanvas-end offcanvas-40" tabindex="-1" id="annuaireOffcanvas" data-controller="turbo-offcanvas">
            <turbo-frame id="offcanvas-frame" data-action="turbo:frame-load->turbo-offcanvas#frameLoaded">
            </turbo-frame>
          </div>
          <turbo-frame id="annuaire-results" src="{{ path('portail_ajax_annuaire') }}">
            Chargement des partenaires...
          </turbo-frame>
        </div>
      </section>

    </div>
  </div>

<style>
/* Étendre les colonnes à la même hauteur */
.el-element-overlay > .col-lg-3,
.el-element-overlay > .col-md-6 {
  display: flex;
  flex-direction: column;
}

/* S'assurer que la carte prend toute la hauteur */
.card.overflow-hidden {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Étendre la hauteur de .el-card-item */
.el-card-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Étendre la div contenant l'image */
.el-card-avatar {
  display: flex;
  justify-content: center;   /* centre horizontalement */
  align-items: center;       /* centre verticalement */
  height: 120px;              /* nécessaire pour que l’alignement vertical fonctionne */
}

/* Uniformiser la hauteur des images + overlay */
.el-overlay {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* ou center selon le design souhaité */
}

.secteur-card {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: border-color 0.2s;
}

.secteur-card.active-secteur {
  border-color: var(--bs-primary);; /* bleu bootstrap */
}
</style>

{% endblock %}