{{/*
Hugo List to Carousel Partial
Source: https://hugocodex.org/add-ons/slider-carousel/
Author: Jeroen van der Schee
*/}}

{{ $id := printf "carousel-%d" (now.UnixNano) }}
<div id="{{ $id }}" class="carousel-container bg-white">
  <div class="carousel-slides">
    {{ range .images }}
    <div class="carousel-slide">
      <img src="{{ . }}" alt="Carousel image" loading="lazy" style="object-fit: contain;" />
    </div>
    {{ end }}
  </div>
  {{ if gt (len .images) 1 }}
  <button class="carousel-prev" aria-label="Précédent">&#10094;</button>
  <button class="carousel-next" aria-label="Suivant">&#10095;</button>

  <div class="carousel-dots">
    {{ range $i, $_ := .images }}
    <span class="carousel-dot" data-index="{{ $i }}"></span>
    {{ end }}
  </div>
  {{ end }}
</div>

<style>
  .carousel-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  .carousel-slides {
    display: flex;
    overflow: hidden;
  }

  .carousel-slide {
    min-width: 100%;
    transition: transform 0.5s ease;
    display: flex;
    justify-content: center;
  }

  .carousel-slide img {
    max-width: 100%;
    border-radius: 1rem;
  }

  .carousel-prev,
  .carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 50%;
    z-index: 2;
    color:#0d242e;
  }

  .carousel-prev {
    left: 10px;
  }

  .carousel-next {
    right: 10px;
  }

  .carousel-dots {
    text-align: center;
    margin-top: 1rem;
  }

  .carousel-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 4px;
    background: #bbb;
    border-radius: 50%;
    cursor: pointer;
  }

  .carousel-dot.active {
    background: #333;
  }
</style>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var container = document.getElementById('{{ $id }}');
    if (!container) return;
    var slides = container.querySelectorAll('.carousel-slide');
    var prevBtn = container.querySelector('.carousel-prev');
    var nextBtn = container.querySelector('.carousel-next');
    var dots = container.querySelectorAll('.carousel-dot');
    var current = 0;

    function showSlide(idx) {
      slides.forEach(function (slide, i) {
        slide.style.transform = 'translateX(' + (-100 * idx) + '%)';
      });
      dots.forEach(function (dot, i) {
        dot.classList.toggle('active', i === idx);
      });
      current = idx;
    }
    prevBtn.addEventListener('click', function () {
      showSlide((current - 1 + slides.length) % slides.length);
    });
    nextBtn.addEventListener('click', function () {
      showSlide((current + 1) % slides.length);
    });
    dots.forEach(function (dot, i) {
      dot.addEventListener('click', function () { showSlide(i); });
    });
    showSlide(0);
  });
</script>