<!-- Project Carousel — partials/project_carousel.html
     Expects context: projects_latest (queryset)
     Requires: Alpine.js 3.x, daisyUI 5.x, Tailwind CSS 4.x
-->
<div class="relative mt-4 max-w-full overflow-hidden group/carousel" x-data="{
    scroll: null,
    init() { this.scroll = this.$refs.track; this.check() },
    prev() { this.scroll.scrollBy({ left: -320, behavior: 'smooth' }) },
    next() { this.scroll.scrollBy({ left:  320, behavior: 'smooth' }) },
    atStart: true,
    atEnd: false,
    check() {
        this.atStart = this.scroll.scrollLeft <= 0;
        this.atEnd  = this.scroll.scrollLeft + this.scroll.clientWidth >= this.scroll.scrollWidth - 4;
    }
}">
    <!-- header row -->
    <div class="flex items-center justify-between mb-2 px-1">
        <a href="/projects/"
           class="group/hdr flex items-center gap-1 text-lg font-semibold text-base-content/80
                  hover:text-base-content tracking-tight transition-colors duration-150">
            Latest Projects
            <svg class="w-4 h-4 opacity-0 group-hover/hdr:opacity-60 transition-opacity duration-150"
                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
        </a>
        <div class="flex gap-1">
            <button @click="prev()" :disabled="atStart"
                    class="btn btn-circle btn-sm btn-ghost disabled:opacity-30 transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </button>
            <button @click="next()" :disabled="atEnd"
                    class="btn btn-circle btn-sm btn-ghost disabled:opacity-30 transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            </button>
        </div>
    </div>

    <!-- gradient fade edges -->
    <div class="pointer-events-none absolute inset-y-12 left-0  w-8  z-10 bg-gradient-to-r from-gray-100 to-transparent rounded-l-xl"></div>
    <div class="pointer-events-none absolute inset-y-12 right-0 w-8  z-10 bg-gradient-to-l from-gray-100 to-transparent rounded-r-xl"></div>

    <!-- scrollable track -->
    <div x-ref="track" @scroll.passive="check()"
         class="carousel carousel-center w-full max-w-full gap-4 py-2 px-1 scroll-smooth snap-x snap-mandatory overflow-x-auto scrollbar-thin scrollbar-thumb-base-300 scrollbar-track-transparent">
        {% for item in projects_latest %}
        <div class="carousel-item flex-none snap-start">
            {% with level=item.get_level %}
            {% with item_id=item.project_id %}
            {% with item_url='lara_django_projects:project-detail' %}
                {% include 'lara_django_projects/components/project_experiment_card.html' %}
            {% endwith %}
            {% endwith %}
            {% endwith %}
        </div>
        {% empty %}
        <div class="carousel-item flex-none snap-start w-72">
            <div class="card bg-base-100 shadow-sm border border-base-300 w-full">
                <div class="card-body items-center text-center py-10">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4v16m8-8H4"/></svg>
                    <p class="text-sm text-base-content/50 mt-2">No projects yet</p>
                    <a href="{% url 'lara_django_projects:project-create' %}" class="btn btn-sm btn-primary mt-3">Create first project</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
