{% if tasks %}
    <div class="downloads-grid">
        {% for task in tasks %}
            <div class="download-item status-{{ task.status }}">
                <div class="download-info">
                    <span class="download-name" title="{{ task.filename }}">{{ task.filename }}</span>
                    <span class="badge badge-{{ task.status }}">{{ task.status | upper }}</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"
                                hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')" title="Pause">
                            <i class="fas fa-pause"></i>
                        </button>
                    {% elif task.status == 'paused' %}
                        <button class="btn-icon success" hx-post="/api/downloads/{{ task.id }}/resume" hx-swap="none"
                                hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')" title="Reprendre">
                            <i class="fas fa-play"></i>
                        </button>
                    {% endif %}
                    
                    {% if task.status == 'failed' or task.status == 'cancelled' %}
                        <button class="btn-icon warning" hx-post="/api/downloads/{{ task.id }}/retry" hx-swap="none"
                                hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')" title="Relancer">
                            <i class="fas fa-redo"></i>
                        </button>
                    {% endif %}
                    
                    {% if task.status == 'completed' %}
                        <a href="/api/downloads/video/{{ task.id }}" class="btn-icon success" title="Streamer">
                            <i class="fas fa-play-circle"></i>
                        </a>
                        <a href="/downloads/{{ task.filename }}" class="btn-icon" download title="Telecharger">
                            <i class="fas fa-file-download"></i>
                        </a>
                    {% endif %}
                    
                    <button class="btn-icon danger" 
                            hx-delete="/api/downloads/{{ task.id }}" 
                            hx-confirm="Supprimer ce telechargement ?"
                            hx-swap="none"
                            hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')"
                            title="Supprimer">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        {% endfor %}
    </div>
{% else %}
    <div class="empty-state" style="text-align: center; padding: 60px 20px; color: var(--text-dim);">
        <i class="fas fa-cloud-download-alt" style="font-size: 3rem; margin-bottom: 20px; opacity: 0.1; display: block;"></i>
        <p>Aucun telechargement en cours</p>
    </div>
{% endif %}