{% extends 'layouts/base.html' %}

{% block content %}
<div class="panel form-card" data-job-status data-status-url="{{ url_for('jobs.status', job_id=job.id) }}">
    <div class="page-head">
        <h1>{{ job.label }}</h1>
        <a class="btn btn-sm" href="{{ url_for('admin.dashboard') }}">Continue Working</a>
    </div>
    <p data-job-message>{{ job.message }}</p>
    <div class="progress-track" aria-label="Job progress">
        <div class="progress-bar" data-job-progress style="width: {{ job.progress }}%"></div>
    </div>
    <p class="muted"><span data-job-progress-label>{{ job.progress }}%</span> complete</p>
    <div data-job-result>
        {% if job.status == 'completed' and job.result and job.result.file %}
        <a class="btn" href="{{ url_for('jobs.download', job_id=job.id) }}">Download {{ job.result.download_name }}</a>
        {% elif job.status == 'failed' %}
        <p class="alert danger">{{ job.error }}</p>
        {% endif %}
    </div>
</div>

<script>
(() => {
    const panel = document.querySelector('[data-job-status]');
    if (!panel) return;
    const message = panel.querySelector('[data-job-message]');
    const progress = panel.querySelector('[data-job-progress]');
    const progressLabel = panel.querySelector('[data-job-progress-label]');
    const result = panel.querySelector('[data-job-result]');
    const poll = async () => {
        const response = await fetch(panel.dataset.statusUrl, {headers: {'Accept': 'application/json'}});
        if (!response.ok) return;
        const job = await response.json();
        message.textContent = job.message;
        progress.style.width = `${job.progress}%`;
        progressLabel.textContent = `${job.progress}%`;
        if (job.status === 'completed') {
            result.innerHTML = `<a class="btn" href="${job.download_url}">Download ${job.download_name}</a>`;
            return;
        }
        if (job.status === 'failed') {
            result.innerHTML = `<p class="alert danger"></p>`;
            result.firstElementChild.textContent = job.error || 'The job failed.';
            return;
        }
        window.setTimeout(poll, 1500);
    };
    if (['queued', 'running'].includes('{{ job.status }}')) window.setTimeout(poll, 800);
})();
</script>
{% endblock %}