{% 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">Marketplace</h4>
            </div>
          </div>
        </div>
      </div>

    <section class="pt-5 pt-md-14 pb-4 pb-md-5">
      <div
        class="container-fluid"
        data-controller="marketplace-filters"
        data-marketplace-filters-frame-id-value="marketplace-frame"
        data-marketplace-filters-url-value="{{ path('portail_ajax_marketplace_filter') }}"
      >
        <button class="btn bg-danger-subtle text-danger mb-4" type="button" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvas" aria-controls="filterOffcanvas">
          Filtres
        </button>
        {% include '@Projet/marketplace/filtres_offcanvas.html.twig' %}
        <turbo-frame id="marketplace-frame" src="{{ path('portail_ajax_marketplace') }}">
          Chargement du marketplace...
        </turbo-frame>
      </div>
    </section>

  </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é */
}

.marketplace-filter-card {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border-color 0.2s, background-color 0.2s;
}

.marketplace-filter-card.active-filter {
  border-color: var(--bs-primary);
  background-color: rgba(13, 110, 253, 0.08);
}

</style>

{% endblock %}