<!-- Home Tab -->
<div id="tab-home" x-show="activeTab === 'home'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">

    <!-- Recommendations Section -->
    <div class="mb-8">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold">
                <i class="fa-solid fa-bullseye text-primary"></i> Recommandé pour vous
            </h2>
            <button class="btn btn-sm btn-ghost gap-1.5"
                    hx-get="/api/recommendations"
                    hx-target="#recommendationsList">
                <i class="fa-solid fa-arrows-rotate text-xs"></i> Actualiser
            </button>
        </div>
        <div id="recommendationsList"
             hx-get="/api/recommendations"
             hx-trigger="load delay:100ms">
            <div class="flex gap-4 overflow-x-auto pb-4">
                <div class="flex items-center justify-center py-8 w-full">
                    <span class="loading loading-spinner loading-lg text-primary"></span>
                </div>
            </div>
        </div>
    </div>

    <!-- Latest Releases Section -->
    <div>
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold">
                <i class="fa-solid fa-fire text-error"></i> Dernières sorties
            </h2>
            <button class="btn btn-sm btn-ghost gap-1.5"
                    hx-get="/api/releases/latest"
                    hx-target="#releasesList">
                <i class="fa-solid fa-arrows-rotate text-xs"></i> Actualiser
            </button>
        </div>
        <div id="releasesList"
             hx-get="/api/releases/latest"
             hx-trigger="load delay:300ms">
            <div class="flex gap-4 overflow-x-auto pb-4">
                <div class="flex items-center justify-center py-8 w-full">
                    <span class="loading loading-spinner loading-lg text-primary"></span>
                </div>
            </div>
        </div>
    </div>
</div>
