{% if jobs %}
<section class="card">
    <div class="card-header">
        <h3 class="card-title">Processing Jobs ({{ jobs|length }})</h3>
        <div class="card-meta">
            <span>Backend:</span>
            <span class="badge badge-armed">{{ backend.display_name }}</span>
            {% if backend.is_synchronous %}
            <span class="badge badge-idle">sync</span>
            {% else %}
            <span class="badge badge-connected">async</span>
            {% endif %}
        </div>
    </div>
    <table>
        <thead>
            <tr>
                <th>Input</th>
                <th>State</th>
                <th>Progress</th>
                <th>Message</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for job in jobs %}
            <tr>
                <td><code>{{ job.raw_path.name }}</code></td>
                <td>
                    <span class="badge badge-{{ job.state.value }}">
                        {{ job.state.value }}
                    </span>
                    {% if job.stale %}
                    <span class="badge badge-failed" title="Older than the backend's stale-warning window — not failed, just long-running. Use Verify to double-check.">
                        stale
                    </span>
                    {% endif %}
                </td>
                <td>
                    {% if job.state.value == 'completed' %}
                        {% set pct = 100 %}
                    {% elif job.state.value in ('failed', 'cancelled') %}
                        {% set pct = 0 %}
                    {% else %}
                        {% set pct = (job.progress * 100) | int %}
                    {% endif %}
                    <progress value="{{ pct }}" max="100" class="progress-{{ job.state.value }}">
                        {{ pct }}%
                    </progress>
                </td>
                <td>
                    {% if job.error %}
                    <span class="error-text">{{ job.error }}</span>
                    {% elif job.last_poll_error %}
                    <span class="error-text">{{ job.last_poll_error }}</span>
                    {% else %}
                    {{ job.message }}
                    {% endif %}
                </td>
                <td>
                    <div class="u-flex u-items-center u-gap-1">
                        <form hx-post="/jobs/{{ job.id }}/reconcile"
                              hx-target="#jobs-panel"
                              hx-swap="innerHTML"
                              hx-disabled-elt="find button"
                              class="u-inline">
                            <button type="submit" class="btn btn-sm" title="Verify the job's state against upstream + disk; recovers from server-restart and upstream-completed-while-we-slept cases.">
                                &#x21bb; Verify
                            </button>
                        </form>
                        {% if not job.is_terminal %}
                        <form hx-post="/jobs/{{ job.id }}/cancel"
                              hx-target="#jobs-panel"
                              hx-swap="innerHTML"
                              hx-disabled-elt="find button"
                              class="u-inline">
                            <button type="submit" class="btn btn-sm btn-ghost">
                                Cancel
                            </button>
                        </form>
                        {% endif %}
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</section>
{% else %}
<section class="card">
    <div class="card-header">
        <h3 class="card-title">Processing Jobs</h3>
        <div class="card-meta">
            <span>Backend:</span>
            <span class="badge badge-armed">{{ backend.display_name }}</span>
        </div>
    </div>
    <p><small>No jobs submitted yet.</small></p>
</section>
{% endif %}