<div class="mb-10">
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold flex items-center gap-2">
            Téléchargements
            <span id="activeDownloadsCount" class="badge badge-primary badge-sm" style="display:none;">0 actif</span>
        </h2>
        <div class="flex gap-2">
            <button class="btn btn-sm btn-ghost" 
                    hx-post="/api/downloads/cleanup" 
                    hx-swap="none"
                    hx-confirm="Nettoyer tous les telechargements termines ?"
                    hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')">
                <i class="fas fa-broom"></i> Nettoyer termines
            </button>
            <button class="btn btn-sm btn-error" 
                    hx-post="/api/downloads/cancel-all" 
                    hx-swap="none"
                    hx-confirm="Annuler tous les telechargements actifs ?"
                    hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')">
                <i class="fas fa-stop-circle"></i> Tout annuler
            </button>
        </div>
    </div>

    <!-- Container that loads content via HTMX -->
    <div id="downloads-container-inner" 
         hx-get="/api/downloads?html=1" 
         hx-trigger="load, refresh, every 3s" 
         hx-swap="innerHTML"
         class="flex justify-center py-8 text-base-content/50">
        <span class="loading loading-spinner loading-lg"></span>
        <span class="ml-2">Chargement des telechargements...</span>
    </div>
</div>
