{% extends "base.html" %}
{% block title %}Publish Job {{ job_id }}{% endblock %}
{% block content %}
<h1>Publish Job {{ job_id }}</h1>
<div id="status-box" style="background:#fff;padding:1rem;border:1px solid #ddd;border-radius:6px;">
  <p>Status: <strong id="status">loading...</strong></p>
  <p>Progress: <strong id="progress">0%</strong></p>
  <p>Message: <span id="message"></span></p>
</div>
<script>
(function(){
  const jobId = {{ job_id }};
  const statusEl = document.getElementById('status');
  const progEl = document.getElementById('progress');
  const msgEl = document.getElementById('message');
  async function poll(){
    try{
      const res = await fetch('/publish/status/' + jobId);
      if(!res.ok){ statusEl.textContent='error'; return; }
      const j = await res.json();
      statusEl.textContent = j.status;
      progEl.textContent = (j.progress || 0) + '%';
      msgEl.textContent = j.message || '';
      if(j.status !== 'done' && j.status !== 'failed') setTimeout(poll, 1500);
    }catch(e){ statusEl.textContent='error'; }
  }
  poll();
})();
</script>
{% endblock %}