{% 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>

    
      <div class="text-center flex-md-nowrap flex-wrap">
        <h2 class="fs-15 fw-bolder mb-0">
          {{galerie.nom}}
        </h2>
        <h4 class="fs-10 fw-bolder mb-0">
          {{galerie.lieu}}
        </h4>
        <h4 class="fs-7 fw-bolder mb-0">
          {{galerie.date|date_fr}}
        </h4>
        
      </div>
    <section class="pt-5 pt-md-14 pb-4 pb-md-5">
      <div class="container-fluid">
        
        <div class="row">

          <div class="mb-3">
            <a href="{{path('portail_galerie')}}" class="btn btn-warning btn-sm py-2 px-9">
              Retour aux galeries
            </a>
          </div>
          <div class="masonry-gallery" id="list-img" data-controller="wall-gallery">
            {% for photo in photos %}
                <div class="masonry-item" id="image{{ photo.idtoken }}">
                    <div class="card overflow-hidden">
                        <div class="el-card-item">
                            <div class="el-card-avatar el-overlay-1 w-100 overflow-hidden position-relative text-center">

                                <img 
                                    src="{{ asset(photo.societe.dossier ~ '/galeries/' ~ photo.galerie.slug ~ '/' ~ photo.photo) }}" 
                                    class="d-block position-relative w-100" 
                                    alt="photo"
                                    loading="lazy" data-prefetch-frame
                                >
                                <div class="el-overlay w-100 overflow-hidden">
                                    <ul class="list-style-none el-info text-white text-uppercase d-inline-block p-0">
                                        <li class="el-item d-inline-block my-0 mx-1">
                                            <a class="btn default btn-outline image-popup el-link text-white border-white"
                                              href="{{ asset(photo.societe.dossier ~ '/galeries/' ~ photo.galerie.slug ~ '/' ~ photo.photo) }}"
                                              data-mfp="image">
                                                <i class="ti ti-search"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
          </div>

          <div class="mt-4">
            <a href="{{path('portail_galerie')}}" class="btn btn-warning btn-sm py-2 px-9">
              Retour aux galeries
            </a>
          </div>

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

  </div>

<style>

.gallery {
  column-count: 4;         /* Nombre de colonnes */
  column-gap: 15px;        /* Espace entre les colonnes */
}

.gallery img {
  width: 100%;
  margin-bottom: 15px;
  display: block;
  border-radius: 8px;
  break-inside: avoid;     /* Évite que l'image soit coupée */
}




.masonry-gallery {
    column-count: 4;
    column-gap: 15px;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 15px;
}

@media (max-width: 1200px) {
    .masonry-gallery { column-count: 3; }
}

@media (max-width: 768px) {
    .masonry-gallery { column-count: 2; }
}

@media (max-width: 480px) {
    .masonry-gallery { column-count: 1; }
}

.masonry-gallery img {
    opacity: 0.9;
    transition: opacity 0.5s ease;
}

.masonry-gallery img.is-loaded {
    opacity: 1;
}

.el-card-avatar {
    position: relative;
    margin-bottom: 0; /* supprime l'espace inutile */
}

.el-card-avatar img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0;
    vertical-align: top;
}

.el-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-card-avatar:hover .el-overlay {
    opacity: 1;
}

.wall-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1080;
}

.wall-lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.wall-lightbox__close,
.wall-lightbox__nav {
  position: absolute;
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.wall-lightbox__close {
  top: 24px;
  right: 24px;
}

.wall-lightbox__nav.prev {
  left: 24px;
}

.wall-lightbox__nav.next {
  right: 24px;
}

</style>

{% endblock %}