{% extends "ui/_layout.html" %}
{% block title %}Downloads - withcache{% endblock %}

{% block subnav %}
<nav class="navbar subnav-strip" aria-label="Section sub-navigation">
    <div class="container">
        <span class="subnav-jumps d-flex align-items-center flex-wrap">
            <a href="#downloads-list">Downloads</a>
        </span>
        <form method="post" action="/admin/clear"
              class="subnav-actions d-flex align-items-center gap-1 m-0 ms-auto">
            <button type="submit" class="btn btn-sm btn-outline-secondary text-nowrap"
                    title="Drop completed / failed / cancelled rows from the list.">
                <i class="bi bi-broom me-1"></i>Clear finished
            </button>
        </form>
    </div>
</nav>
{% endblock %}

{% block intro %}
<div class="alert alert-secondary small mb-3">
    Operator-triggered downloads run here (not in the request
    handler). Each job walks through queued -> running -> completed
    (or failed / cancelled). Cancel per row + Clear-finished on the
    subnav strip.
</div>
{% endblock %}

{% block content %}
<div class="card mb-3" id="downloads-list">
    <div class="card-header bg-light fw-semibold py-2">
        <i class="bi bi-cloud-download me-1"></i>Downloads
    </div>
    <div class="table-responsive">
        <table class="table table-striped table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>URL</th>
                    <th>Status</th>
                    <th>Progress</th>
                    <th>Error</th>
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for j in jobs %}
                <tr>
                    <td class="text-muted small">{{ j.id }}</td>
                    <td class="small font-monospace text-truncate" style="max-width: 28rem;"
                        title="{{ j.url }}">{{ j.url }}</td>
                    <td>
                        {% if j.status == 'completed' %}
                        <span class="badge bg-success">completed</span>
                        {% elif j.status == 'failed' %}
                        <span class="badge bg-danger">failed</span>
                        {% elif j.status == 'cancelled' %}
                        <span class="badge bg-secondary">cancelled</span>
                        {% elif j.status == 'running' %}
                        <span class="badge bg-primary">running</span>
                        {% else %}
                        <span class="badge bg-info text-dark">{{ j.status }}</span>
                        {% endif %}
                    </td>
                    <td style="min-width: 10rem;">
                        {% if j.bytes_total and j.bytes_total > 0 %}
                        {% set pct = (j.bytes_done * 100 / j.bytes_total) | round(1) %}
                        <div class="progress" style="height: 0.65rem;" role="progressbar"
                             aria-valuenow="{{ pct }}" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar bg-primary" style="width: {{ pct }}%"></div>
                        </div>
                        <small class="text-muted">{{ pct }}%</small>
                        {% else %}
                        <small class="text-muted">-</small>
                        {% endif %}
                    </td>
                    <td class="small text-danger">{{ j.error or '' }}</td>
                    <td class="text-end text-nowrap">
                        {% if j.status in ('queued', 'running') %}
                        <form method="post" action="/admin/cancel" class="d-inline m-0">
                            <input type="hidden" name="id" value="{{ j.id }}">
                            <button type="submit" class="btn btn-sm btn-outline-warning"
                                    title="Cancel this download">
                                <i class="bi bi-x-circle"></i>
                            </button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                {% if not jobs %}
                <tr><td colspan="6" class="text-muted text-center py-3">
                    No download jobs. Operator triggers a fetch from the
                    Misses tab or via the JSON API.
                </td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}