{% if tasks %}
    <div class="downloads-grid">
        {% for task in tasks %}
            <div class="download-item task-{{ task.status }}">
                <div class="download-info">
                    <span class="download-name" title="{{ task.filename }}">{{ task.filename }}</span>
                    <span class="badge badge-{{ task.status }}">{{ task.status }}</span>
                </div>
                
                <div class="progress-container">
                    <div class="progress-bar" style="width: {{ task.progress }}%"></div>
                </div>
                
                <div class="download-meta">
                    <span>{{ task.progress | round(1) }}%</span>
                    <span>{{ task.speed or '0' }} KB/s</span>
                    <span>{{ task.eta or '' }}</span>
                </div>
                
                <div class="download-actions">
                    {% if task.status == 'downloading' or task.status == 'pending' %}
                        <button class="btn-icon" hx-post="/api/downloads/{{ task.id }}/pause" hx-swap="none">
                            <i class="fas fa-pause"></i>
                        </button>
                    {% elif task.status == 'paused' %}
                        <button class="btn-icon" hx-post="/api/downloads/{{ task.id }}/resume" hx-swap="none">
                            <i class="fas fa-play"></i>
                        </button>
                    {% endif %}
                    
                    {% if task.status == 'completed' %}
                        <a href="/video/{{ task.id }}" class="btn-icon success">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                    {% endif %}
                    
                    <button class="btn-icon danger" 
                            hx-delete="/api/downloads/{{ task.id }}" 
                            hx-confirm="Supprimer ce téléchargement ?"
                            hx-swap="none">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        {% endfor %}
    </div>
{% else %}
    <div class="empty-state">
        <p>Aucun téléchargement en cours</p>
    </div>
{% endif %}

<style>
.downloads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}
.download-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.progress-container {
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    margin: 10px 0;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #00d9ff, #00ff88);
    transition: width 0.3s ease;
}
.download-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.download-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.download-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: #aaa; }
.download-actions { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; }
.btn-icon {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.badge-completed { color: #00ff88; }
.badge-failed { color: #ff4444; }
.badge-downloading { color: #00d9ff; }
</style>
