<div class="mb-10">
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold flex items-center gap-2">
            <i class="fa-solid fa-clipboard-list"></i> Ma Watchlist
        </h2>
        <div class="flex gap-2">
            <button class="btn btn-sm btn-primary" hx-post="/api/watchlist/check" hx-swap="none">
                <i class="fas fa-sync"></i> Vérifier épisodes
            </button>
            <button class="btn btn-sm btn-ghost" 
                    hx-get="/api/watchlist" 
                    hx-target="#watchlist-items-container">
                <i class="fas fa-redo"></i> Actualiser
            </button>
        </div>
    </div>

    <!-- Watchlist items container loaded via HTMX on page load or manual refresh -->
    <div id="watchlist-items-container" 
         hx-get="/api/watchlist" 
         hx-trigger="load"
         class="flex justify-center py-8 text-base-content/50">
        <span class="loading loading-spinner loading-lg"></span>
        <span class="ml-2">Chargement de votre watchlist...</span>
    </div>
</div>
