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

{% block content %}

    <link rel="stylesheet" href="{{ asset('assets/libs/dropzone/dist/min/dropzone.min.css')}}">
    <script src="{{ asset('assets/libs/dropzone/dist/min/dropzone.min.js') }}"></script>

      <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="mb-4 mb-sm-0 card-title">Galerie : {{galerie.nom}}</h4>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-9 d-flex align-items-stretch">
              <div class="card col-md-12">
                
                <div class="card-body">
                  <turbo-frame id="galerie-photos" src="{{ path('galerie_photos_frame', { id: galerie.idtoken }) }}">
                    <div class="masonry-gallery" id="list-img">
                      Chargement des photos...
                    </div>
                  </turbo-frame>
                </div>
              </div>
            </div>

              <turbo-frame id="infoGalerie" src="{{ path('galerie_info_frame', { id: galerie.idtoken }) }}" class="col-md-3 d-flex align-items-stretch" loading="lazy" data-prefetch-frame>
                <div class="card col-md-12">
                  <div class="card-body">
                    Chargement des informations...
                  </div>
                </div>
              </turbo-frame>

          {% if permissionAccess.can('AJOUTER_PHOTO') %}
            <div class="card">
              <div class="card-body">

                <h6 class="mt-4">Déposez ici les photos de la galerie!</h6>

                <form
                  action="#"
                  class="dropzone galerieForm"
                  data-controller="galerie-dropzone"
                  data-galerie-dropzone-url-value="{{ path('galerie_add_photo') }}"
                  data-galerie-dropzone-galerie-id-value="{{ galerie.idtoken }}"
                >
                    <div class="dz-message">Déposez vos fichiers ici</div>
                    <input type="hidden" id="galerieId" name="galerieId" value="{{galerie.idtoken}}">
                </form>

              </div>
            </div>
          {% endif %}

        </div>
      </div>


    </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 %}