/```{=html}
<div id="news-carousel-container">
    <div id="news-carousel-track">
        <% for (const item of items) { %>
            <div class="news-carousel-slide">
                <a href="<%- item.path %>" class="news-carousel-card">
                    <div class="news-carousel-card-body">
                        <h5 class="news-carousel-title"><%- item.title %></h5>
                        <p class="news-carousel-reading-time"><%- item['reading-time'] %> read</p>
                        <% if (item.description) { %>
                        <p class="news-carousel-description"><%- item.description %></p>
                        <% } %>
                        <div class="news-carousel-attribution">
                            <span class="news-carousel-author"><%- item.author %></span>
                            <span class="news-carousel-date"><%- item.date %></span>
                        </div>
                    </div>
                </a>
            </div>
        <% } %>
    </div>
</div>
/```

---
listing:
  - id: news-carousel
    contents: 
      - "news/posts/*/index.qmd"
    template: _includes/news/_news-carousel.ejs
    sort: "date desc"
---

### News

::: {#news-carousel}
:::

\```{=html}
<div class="d-flex flex-column align-items-center gap-0">
  <a href="news/" class="button btn">
    See all news &rarr;
  </a>
</div>

<style>
/* Scoped styles for the news carousel to avoid conflicts with global themes */
#news-carousel-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  cursor: grab;
}

#news-carousel-container.grabbing {
  cursor: grabbing;
}

#news-carousel-container #news-carousel-track {
  display: flex;
  align-items: stretch;
}

#news-carousel-container .news-carousel-slide {
  flex-shrink: 0;
  width: 33.3333%;
  padding: 0.5rem;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  #news-carousel-container .news-carousel-slide {
    width: 50%;
  }
}

@media (max-width: 768px) {
  #news-carousel-container .news-carousel-slide {
    width: 100%;
  }
}

#news-carousel-container .news-carousel-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  color: #212529;
}

#news-carousel-container .news-carousel-card:hover {
  background-color: #e9ecef;
  border-color: #dee2e6;
}

#news-carousel-container .news-carousel-card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

#news-carousel-container .news-carousel-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
  color: #212529;
  font-weight: 700;
}

#news-carousel-container .news-carousel-reading-time,
#news-carousel-container .news-carousel-description,
#news-carousel-container .news-carousel-attribution {
  color: #6c757d;
}

#news-carousel-container .news-carousel-reading-time {
  font-size: 0.9em;
  margin-bottom: 0.75rem;
}

#news-carousel-container .news-carousel-description {
  flex-grow: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1rem;
}

#news-carousel-container .news-carousel-attribution {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1em;
  font-size: 0.85em;
  margin-top: auto;
}

#news-carousel-container .news-carousel-author {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#news-carousel-container .news-carousel-date {
  white-space: nowrap;
  flex-shrink: 0;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const carouselContainer = document.getElementById('news-carousel-container');
    const carouselTrack = document.getElementById('news-carousel-track');
    
    if (!carouselContainer || !carouselTrack || !carouselTrack.children.length) {
        return;
    }
    
    const slides = Array.from(carouselTrack.children);
    const displayDuration = 2000;
    let currentTranslate = 0;
    let prevTranslate = 0;
    let currentIndex = 0;
    let intervalId;
    
    // Interaction state variables
    let isDragging = false;
    let startPos = 0;
    let hasDragged = false;
    let wheelTimeout;
    let isWheeling = false;

    const getItemsPerView = () => {
        const width = window.innerWidth;
        if (width <= 768) return 1;
        if (width > 768 && width <= 1024) return 2;
        return 3;
    }

    const getPositionX = (event) => {
        return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
    }
    
    const startAutoplay = () => {
        stopAutoplay();
        intervalId = setInterval(autoplayNext, displayDuration);
    }

    const stopAutoplay = () => {
        clearInterval(intervalId);
    }

    const setSliderPosition = () => {
        carouselTrack.style.transform = `translateX(${currentTranslate}px)`;
    }

    const setPositionByIndex = () => {
        if (slides.length === 0) return;

        const itemsPerView = getItemsPerView();
        const maxIndex = slides.length > itemsPerView ? slides.length - itemsPerView : 0;
        
        if (currentIndex > maxIndex) currentIndex = maxIndex;
        if (currentIndex < 0) currentIndex = 0;
        
        const slideWidth = slides[0].getBoundingClientRect().width;
        currentTranslate = currentIndex * -slideWidth;
        
        carouselTrack.style.transition = 'transform 0.4s ease-out';
        setSliderPosition();
    }

    const autoplayNext = () => {
        if (document.hidden || isDragging) return;
        const itemsPerView = getItemsPerView();
        const maxIndex = slides.length > itemsPerView ? slides.length - itemsPerView : 0;
        
        currentIndex++;
        if (currentIndex > maxIndex) {
            currentIndex = 0;
        }
        setPositionByIndex();
    }

    function handleDragStart(event) {
        isDragging = true;
        hasDragged = false;
        startPos = getPositionX(event);
        const style = window.getComputedStyle(carouselTrack);
        const matrix = new DOMMatrix(style.transform);
        prevTranslate = matrix.m41;
        carouselContainer.classList.add('grabbing');
        carouselTrack.style.transition = 'none';
        stopAutoplay();
    }

    function handleDragMove(event) {
        if (!isDragging) return;
        const currentPosition = getPositionX(event);
        currentTranslate = prevTranslate + currentPosition - startPos;
        setSliderPosition();
        if (Math.abs(currentPosition - startPos) > 10) {
            hasDragged = true;
        }
    }

    function handleDragEnd() {
        if (!isDragging) return;
        isDragging = false;
        carouselContainer.classList.remove('grabbing');
        const movedBy = currentTranslate - prevTranslate;
        const itemsPerView = getItemsPerView();
        const maxIndex = slides.length > itemsPerView ? slides.length - itemsPerView : 0;

        if (movedBy < -50 && currentIndex < maxIndex) {
            currentIndex++;
        }
        if (movedBy > 50 && currentIndex > 0) {
            currentIndex--;
        }

        setPositionByIndex();
        startAutoplay();
    }
    
    function handleWheel(event) {
        event.preventDefault();
        if (isWheeling) return;
        isWheeling = true;
        stopAutoplay();

        const itemsPerView = getItemsPerView();
        const maxIndex = slides.length > itemsPerView ? slides.length - itemsPerView : 0;
        const delta = event.deltaY;

        if (delta > 0) {
            if (currentIndex < maxIndex) currentIndex++;
        } else if (delta < 0) {
            if (currentIndex > 0) currentIndex--;
        }
        setPositionByIndex();

        clearTimeout(wheelTimeout);
        wheelTimeout = setTimeout(startAutoplay, 500);
        setTimeout(() => { isWheeling = false; }, 100);
    }
        
    carouselContainer.addEventListener('mousedown', handleDragStart);
    window.addEventListener('mouseup', handleDragEnd);
    window.addEventListener('mousemove', handleDragMove);
    
    carouselContainer.addEventListener('touchstart', handleDragStart, { passive: true });
    window.addEventListener('touchend', handleDragEnd);
    window.addEventListener('touchmove', handleDragMove, { passive: true });

    carouselContainer.addEventListener('click', (e) => {
        if (hasDragged) {
            e.preventDefault();
        }
    }, true);

    carouselContainer.addEventListener('wheel', handleWheel, { passive: false });
    
    carouselContainer.addEventListener('mouseenter', stopAutoplay);
    carouselContainer.addEventListener('mouseleave', startAutoplay);
    document.addEventListener('visibilitychange', () => document.hidden ? stopAutoplay() : startAutoplay());
    
    window.addEventListener('resize', setPositionByIndex);

    setPositionByIndex();
    startAutoplay();
});
</script>
\```