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

    <section class="pt-md-14 pb-4 pb-md-5">
      <div class="container-fluid">
        
        <div class="row">

          <div class="row el-element-overlay" id="list-img" >
            {% for galerie in galeries %}

                <div class="col-lg-4 col-md-6">
                  <div class="card overflow-hidden">
                      <div class="el-card-item ">
                      <a href="{{path('portail_galerie_view', {id: galerie.idtoken})}}">
                        <div class="el-card-avatar el-overlay-1 w-100 overflow-hidden position-relative text-center">
                              {% if galerie.photo is not null %}
                                <img src="{{ asset(galerie.societe.dossier ~ '/galeries/' ~ galerie.slug ~ '/' ~ galerie.photo.photo) }}" class="img-galerie d-block position-relative w-100" alt="user">
                              {% endif %}
                            <div class="el-overlay w-100 overflow-hidden" style="opacity:0.5;">
                              
                            <ul class="list-style-none el-info text-white text-uppercase d-inline-block p-0">

                            </div>
                            <div class="w-100 overflow-hidden" style="opacity:1;">
                              
                            <ul class="list-style-none el-info text-white text-uppercase d-inline-block p-0">
                            <!-- Date en haut à gauche -->
                              <span class="galerie-date">
                                {{ galerie.date|date_fr }}
                              </span>
                              <br/>
                              <!-- Nom centré -->
                              <span class="galerie-nom w-100">
                                  {{ galerie.nom }}
                              </span>
                            </ul>
                            </div>
                        </div>
                      </a>
                      </div>
                  </div>
                </div>

            {% endfor %}

        </div>

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

  </div>

<style>
.el-element-overlay .el-card-item .el-overlay-1 .el-info {
    top: 0 !important;
}

/* É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 {
  position: relative;
  /*display: flex;*/
  justify-content: center;
  align-items: center;
  height: 250px;
  overflow: hidden;
}

/* Date en haut à gauche */
.galerie-date {
  position: absolute;
  top: 20px;
  left: 12px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  text-transform: uppercase;   /* => "1 AOÛT 2025" */
  letter-spacing: .5px;
  z-index: 2;
}

.galerie-nom {
  position: absolute;
  top: 150px;
  left: 0px;
  color: #fff;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .5px;
  z-index: 2;
}

/* Overlay + nom centré */
.el-overlay {
  position: absolute;
  inset: 0;                    /* top/right/bottom/left: 0 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-overlay .el-info {
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

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


</style>

{% endblock %}