<turbo-stream action="replace" target="listings"><template>
  <turbo-frame id="listings" target="_top">
    <section class="listings">
    <div class="card-view">
        <article>
        <figure class="carousel">
        <div class="carousel-images">
            <div class="carousel-image active">
              <a data-turbo-frame="_top" href="/offices/6"><img loading="eager" src="https://www.kuida.co/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjMsInB1ciI6ImJsb2JfaWQifX0=--f358f00052e3b2ecc5d74c62320e1250eaa0dafa/office-06.jpg" /></a>
            </div>
            <div class="carousel-image ">
              <a data-turbo-frame="_top" href="/offices/6"><img loading="lazy" src="https://www.kuida.co/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjQsInB1ciI6ImJsb2JfaWQifX0=--318b133f655d395d026e7bf637136ba70e39720c/office-09.jpg" /></a>
            </div>
        </div>
        <button class="carousel-arrow prev" aria-label="Previous image">❮</button>
        <button class="carousel-arrow next" aria-label="Next image">❯</button>
      </figure>
          <section>
            <h3><a data-turbo-frame="_top" href="/offices/6">Psicológico</a></h3>
            <p>Modern medical office in an excellent location. This space offers a perfect balance of functional...</p>
              <div class="office-categories-list" style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0;">
                  <span style="background: rgba(224, 78, 83, 0.1); color: #e04e53; padding: 0.25rem 0.6rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem;">
                      <i class="fa-solid fa-baby" style="font-size: 0.75rem;"></i>
                    Pediátrico
                  </span>
                  <span style="background: rgba(224, 78, 83, 0.1); color: #e04e53; padding: 0.25rem 0.6rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem;">
                      <i class="fa-solid fa-brain" style="font-size: 0.75rem;"></i>
                    Psicológico
                  </span>
              </div>
              <div class="office-rating" style="display: flex; align-items: center; gap: 0.5rem; margin: 0.75rem 0;">
                <div class="rating-stars" style="display: flex; gap: 2px;">
                    <i class="fas fa-star" style="color: #ffc107; font-size: 0.9rem;"></i>
                    <i class="fas fa-star" style="color: #ffc107; font-size: 0.9rem;"></i>
                    <i class="fas fa-star" style="color: #ffc107; font-size: 0.9rem;"></i>
                    <i class="fas fa-star" style="color: #ffc107; font-size: 0.9rem;"></i>
                    <i class="far fa-star" style="color: #ffc107; font-size: 0.9rem;"></i>
                </div>
                <span style="color: #666; font-size: 0.9rem; font-weight: 600;">
                  4.3 (3)
                </span>
              </div>
            <p>800000.0</p>
          </section>
        </article>
    </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>