<turbo-stream action="replace" target="listings"><template>
  <turbo-frame id="listings" target="_top">
    <section class="listings">
    <div class="no-results-message" style="text-align: center; padding: 3rem 1rem; max-width: 600px; margin: 0 auto;">
        <div>
          <h3 style="color: #e04e53; font-size: 1.5rem; margin-bottom: 1rem;">😔 No encontramos resultados</h3>
          <p style="color: #666; font-size: 1rem; line-height: 1.6;">
            No hay espacios disponibles que coincidan con tus criterios de búsqueda.
            <br><br>
            Intenta ajustar tus filtros o buscar con otros criterios.
          </p>
        </div>
    </div>
  <div class="map-view">
    <div id="map-container">Vista de mapa</div>
  </div>
  <button class="view-toggle" aria-label="Toggle view">
    <span class="icon">🗺️</span>
    <span>Vista de mapa</span>
  </button>
</section>

<script>

carousels.forEach(carousel => {
  const images = carousel.querySelectorAll('.carousel-image');
  const prevButton = carousel.querySelector('.prev');
  const nextButton = carousel.querySelector('.next');
  let currentIndex = 0;

  const showImage = (index) => {
    images.forEach((img, i) => {
      img.classList.toggle('active', i === index);
    });
    // Lazy load the image when it becomes active
    const lazyImg = images[index].querySelector('.lazy-image');
    if (lazyImg && lazyImg.dataset.src) {
      lazyImg.src = lazyImg.dataset.src;
      delete lazyImg.dataset.src;
    }
  };

  if (prevButton) {
    prevButton.addEventListener('click', () => {
      currentIndex = (currentIndex - 1 + images.length) % images.length;
      showImage(currentIndex);
    });
  }

  if (nextButton) {
    nextButton.addEventListener('click', () => {
      currentIndex = (currentIndex + 1) % images.length;
      showImage(currentIndex);
    });
  }
});
</script>
</turbo-frame></template></turbo-stream>