{% extends "base.html" %}

{% block content %}
<div class="container-fluid px-3 px-md-4 mt-4">
    <div class="d-flex align-items-center mb-4">
        <i class="bi bi-cloud-arrow-down fs-2 text-primary me-3"></i>
        <div>
            <h2 class="mb-0 text-white fw-bold">Active Downloads</h2>
            <p class="text-muted mb-0">Manage your current transfers</p>
        </div>
    </div>

    <div id="downloads" class="d-flex flex-column gap-3 mb-5 pb-5">
        <!-- Cards injected by downloads.js -->
    </div>
</div>
{% endblock %}