<div class="section-container">
    <div class="section-header">
        <h2>Telechargements <span id="activeDownloadsCount" class="active-downloads-counter" style="display:none;">(0 actif)</span></h2>
        <div class="header-actions">
            <button class="btn btn-sm btn-secondary" 
                    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-danger" 
                    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">
        <div class="loading-placeholder">
            <div class="spinner"></div> Chargement des telechargements...
        </div>
    </div>
</div>

<style>
.section-container { margin-bottom: 40px; }
.active-downloads-counter {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(0, 217, 255, 0.1);
    padding: 2px 10px;
    border-radius: 12px;
    margin-left: 10px;
}
</style>
