{% if tasks %}
    <div class="flex flex-col gap-3">
        {% for task in tasks %}
            <div class="card bg-base-200 border border-base-300 p-4">
                <!-- Top row: filename + status badge -->
                <div class="flex justify-between items-center mb-3">
                    <span class="font-medium truncate mr-2" title="{{ task.filename }}">{{ task.filename }}</span>
                    <span class="badge
                        {% if task.status == 'downloading' %}badge-info
                        {% elif task.status == 'completed' %}badge-success
                        {% elif task.status == 'failed' %}badge-error
                        {% elif task.status == 'paused' %}badge-warning
                        {% else %}badge-ghost{% endif %}">
                        {{ task.status | upper }}
                    </span>
                </div>

                <!-- Progress bar -->
                <progress class="progress progress-primary w-full mb-3" value="{{ task.progress }}" max="100"></progress>

                <!-- Meta row: speed, percentage, ETA -->
                <div class="flex gap-4 text-xs text-base-content/50 mb-3">
                    <span>{{ task.progress | round(1) }}%</span>
                    <span>{{ task.speed or '0' }} KB/s</span>
                    <span>{{ task.eta or '' }}</span>
                </div>

                <!-- Action buttons -->
                <div class="flex gap-1 justify-end">
                    {% if task.status == 'downloading' or task.status == 'pending' %}
                        <button class="btn btn-circle btn-sm btn-ghost" 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 btn-circle btn-sm btn-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 btn-circle btn-sm btn-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 btn-circle btn-sm btn-success" title="Streamer">
                            <i class="fas fa-play-circle"></i>
                        </a>
                        <a href="/downloads/{{ task.filename }}" class="btn btn-circle btn-sm btn-ghost" download title="Telecharger">
                            <i class="fas fa-file-download"></i>
                        </a>
                    {% endif %}

                    <button class="btn btn-circle btn-sm btn-error" 
                            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="text-center py-16 text-base-content/30">
        <i class="fas fa-cloud-download-alt text-5xl mb-5 block"></i>
        <p>Aucun telechargement en cours</p>
    </div>
{% endif %}
