{# A run started from the builder, as the page that follows it: state, host, the run's own log (uv, Harbor, the tasks, the run),
   a Stop while it lives. Shown on the job page beside the job, and instead of it while Harbor has not written the job yet. #}
{# `csrf` is an argument, not a context lookup: an imported macro sees no
   template context, so a `{{ csrf }}` inside it rendered empty and every
   Stop and Continue answered 403. #}
{# `own`: this job's own (state, finished) when the run is of several agents - an arm that
   answered everything is done though a later arm failed; the run's state is said beside it. #}
{% macro execution_strip(ex, csrf, waiting=false, own=none) %}
{% set shown = own[0] if own else ex.state %}
<section class="execution" id="execution" data-run="{{ url_for('run_status', run_id=ex.id) }}" data-stop="{{ url_for('run_stop', run_id=ex.id) }}" data-continue="{{ url_for('run_continue', run_id=ex.id) }}"
         data-live="{{ 'yes' if ex.state in ('preparing', 'running') else 'no' }}" data-waiting="{{ 'yes' if waiting else 'no' }}" data-csrf="{{ csrf }}" data-own="{{ own[0] if own else '' }}">
  <div class="execution-line">
    <span class="chip {{ 'st-runs' if shown == 'done' else 'st-blocked' if shown == 'failed' else 'st-lane' }}" id="execution-state">{{ shown }}{% if not own and ex.step and ex.state in ('preparing', 'running') %} · {{ ex.step }}{% endif %}</span>
    <span class="small">on <strong>{{ ex.plan.host.label if ex.plan.host else 'this machine' }}</strong></span>
    {% if ex.error and not own %}<span class="small bad" id="execution-error">{{ ex.error }}</span>{% endif %}
    <span class="small muted" id="execution-run"{% if not own or ex.state == shown %} hidden{% endif %}>· the run: {{ ex.state }}{% if ex.error %} · {{ ex.error }}{% endif %}</span>
    {% if ex.state in ('preparing', 'running', 'paused') %}<button type="button" class="btn sm ghost" id="execution-stop">Stop</button>{% endif %}
  </div>
  {# an agent's run failed with more to come: the question, and the answer #}
  <div class="execution-ask" id="execution-ask" {% if ex.state != 'paused' %}hidden{% endif %}>
    <span class="small bad" id="execution-question">{{ ex.question or '' }}</span>
    <button type="button" class="btn sm" id="execution-continue">Continue</button>
  </div>
  {# what the run is doing: a stepper of the stages before its first unit (a check when done, its number until then), then its units (nullius/progress.py) #}
  {% set sp = ex.stages() %}
  <div class="execution-stages" id="execution-stages"{% if not sp.stages and not sp.units %} hidden{% endif %}>
    <ol class="xs-list" id="execution-stage-list">{% for st in sp.stages %}
      <li class="xs {{ st.state }}"{% if st.detail %} title="{{ st.detail }}"{% endif %}{% if st.state == 'running' %} aria-current="step"{% endif %}><i aria-hidden="true">{{ '' if st.state in ('done', 'cached') else '✕' if st.state == 'failed' else loop.index }}</i><span class="xs-label">{{ st.label }}</span>
        {%- if st.state == 'cached' %}<span class="xs-time">cached</span>{% elif st.get('seconds') is not none and st.state in ('done', 'failed') %}<span class="xs-time">{{ st.seconds|secs }}</span>{% endif %}
        {%- if st.state in ('running', 'failed') and st.detail and st.detail != sp.detail %}<span class="xs-detail">{{ st.detail }}</span>{% endif %}</li>{% endfor %}
    </ol>
    <div class="xs-units" id="execution-units"{% if not sp.units %} hidden{% endif %}>{% if sp.units %}{% set u = sp.units %}<progress max="{{ u.n or 1 }}" value="{{ u.done }}"></progress><span class="small"><b>{{ u.done }} / {{ u.n if u.n is not none else '?' }}</b> {{ u.noun }}{% for k in ('passed', 'failed', 'scored', 'errors') if u[k] %} · {{ u[k] }} {{ 'error' + ('' if u[k] == 1 else 's') if k == 'errors' else k }}{% endfor %}{% if u.running %} · {{ u.running }} running{% endif %}</span>{% endif %}</div>
    <div class="small bad" id="execution-refused"{% if sp.ended != 'refused' %} hidden{% endif %}>{% if sp.ended == 'refused' %}Refused before its first unit: {{ sp.detail }}{% endif %}</div>
  </div>
  {# a part downloading: its file, how much of it, as a bar #}
  <div class="execution-progress" id="execution-progress" hidden><progress id="execution-bar" max="1" value="0"></progress><span class="small mono" id="execution-progress-text"></span></div>
  <details class="execution-log" {% if waiting %}open{% endif %}><summary class="small">Run log</summary><pre id="execution-lines"></pre></details>
</section>
<script>
(() => {
  const box = document.getElementById('execution'), pre = document.getElementById('execution-lines'), state = document.getElementById('execution-state');
  let since = 0, live = box.dataset.live === 'yes';
  // the stages, drawn as the template draws them: the same marks, times and units line. A step keeps
  // its element from one answer to the next, so its mark changes in place and the running one's beat goes on.
  const secs = v => v < 9.95 ? v.toFixed(1) + 's' : v < 60 ? Math.round(v) + 's' : (v / 60).toFixed(1) + 'm';
  const clock = s => Math.floor(s / 60) + ':' + String(Math.floor(s % 60)).padStart(2, '0');
  const el = (tag, cls, text) => { const e = document.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; };
  const stages = sp => {
    const wrap = document.getElementById('execution-stages'), list = document.getElementById('execution-stage-list'), units = document.getElementById('execution-units');
    if (!sp || (!sp.stages.length && !sp.units)) return;
    wrap.hidden = false;
    sp.stages.forEach((st, n) => {
      const li = list.children[n] || list.appendChild(el('li'));
      li.className = 'xs ' + st.state;
      li.title = st.detail || '';
      if (st.state === 'running') li.setAttribute('aria-current', 'step'); else li.removeAttribute('aria-current');
      let mark = li.querySelector('i');
      if (!mark) { mark = el('i'); mark.setAttribute('aria-hidden', 'true'); li.append(mark); }
      mark.textContent = {done: '', cached: '', failed: '✕'}[st.state] ?? String(n + 1);
      while (mark.nextSibling) mark.nextSibling.remove();
      li.append(el('span', 'xs-label', st.label));
      if (st.state === 'cached') li.append(el('span', 'xs-time', 'cached'));
      else if (st.state === 'running' && st.t) li.append(el('span', 'xs-time', clock(Math.max(0, Date.now() / 1000 - st.t))));
      else if (st.seconds != null && (st.state === 'done' || st.state === 'failed')) li.append(el('span', 'xs-time', secs(st.seconds)));
      if (st.state === 'running' && st.bytes != null) li.append(el('span', 'xs-detail', Math.round(st.bytes / 1e6) + (st.total ? ' of ' + Math.round(st.total / 1e6) : '') + ' MB'));
      else if ((st.state === 'running' || st.state === 'failed') && st.detail && st.detail !== sp.detail) li.append(el('span', 'xs-detail', st.detail));
    });
    while (list.children.length > sp.stages.length) list.lastElementChild.remove();
    const refused = document.getElementById('execution-refused');
    refused.hidden = sp.ended !== 'refused'; refused.textContent = sp.ended === 'refused' ? 'Refused before its first unit: ' + sp.detail : '';
    const u = sp.units;
    units.hidden = !u;
    if (u) {
      const bar = el('progress'); bar.max = u.n || 1; bar.value = u.done;
      const txt = el('span', 'small'); txt.append(el('b', '', u.done + ' / ' + (u.n != null ? u.n : '?')), ' ' + u.noun);
      for (const k of ['passed', 'failed', 'scored', 'errors']) if (u[k]) txt.append(' · ' + u[k] + ' ' + (k === 'errors' ? (u[k] === 1 ? 'error' : 'errors') : k));
      if (u.running) txt.append(' · ' + u.running + ' running');
      units.replaceChildren(bar, txt);
    }
  };
  const tick = async () => {
    let retry = true;
    try {
      const r = await fetch(box.dataset.run + '?since=' + since, {cache: 'no-store'}); if (!r.ok) return;
      const j = await r.json();
      if (j.log.length) { pre.textContent += j.log.join('\n') + '\n'; pre.scrollTop = pre.scrollHeight; since = j.lines; }
      const bar = document.getElementById('execution-progress'), p = j.progress;
      bar.hidden = !p;
      if (p) {
        const mb = n => Math.round(n / 1e6);
        document.getElementById('execution-bar').max = p.total || 1; document.getElementById('execution-bar').value = p.total ? Math.min(p.done, p.total) : 0;
        document.getElementById('execution-progress-text').textContent = p.label + ' · ' + mb(p.done) + (p.total ? ' of ' + mb(p.total) + ' MB (' + Math.floor(100 * p.done / p.total) + '%)' : ' MB');
      }
      stages(j.stages);
      const alive = ['preparing', 'running', 'paused', 'stopping'].includes(j.state), own = box.dataset.own;
      retry = alive;
      if (own) {        // this arm has ended: its chip stays, the run's state goes beside it
        const run = document.getElementById('execution-run');
        run.hidden = j.state === own; run.textContent = '· the run: ' + j.state + (alive && j.step && j.state !== 'paused' ? ' · ' + j.step : '') + (j.error ? ' · ' + j.error : '');
      } else {
        state.textContent = j.state + (alive && j.step && j.state !== 'paused' ? ' · ' + j.step : '');
        state.className = 'chip ' + (j.state === 'done' ? 'st-runs' : j.state === 'failed' ? 'st-blocked' : (j.state === 'paused' || j.state === 'stopping') ? 'st-branch' : 'st-lane');
      }
      if (j.state === 'stopping') document.getElementById('execution-stop')?.remove();
      const ask = document.getElementById('execution-ask'); ask.hidden = j.state !== 'paused'; document.getElementById('execution-question').textContent = j.question || '';
      if (!alive && live) { live = false; document.getElementById('execution-stop')?.remove(); if (j.error && !own) { const e = document.createElement('span'); e.className = 'small bad'; e.textContent = j.error; state.after(e); } }
      // Check once more at completion, but do not wait forever for a job that never started.
      if (box.dataset.waiting === 'yes') { const h = await fetch(location.pathname, {method: 'HEAD', cache: 'no-store'}); if (h.ok) location.reload(); }
      if (alive) setTimeout(tick, 1000);
    } catch { if (retry) setTimeout(tick, 5000); }
  };
  tick();
  // The answer names the state (`stopping`) at once; the run's own thread
  // finishes the stop. A refused stop puts the button back and says why.
  document.getElementById('execution-stop')?.addEventListener('click', async e => {
    e.target.disabled = true;
    try {
      const r = await fetch(box.dataset.stop, {method: 'POST', headers: {'X-CSRF-Token': box.dataset.csrf}});
      if (!r.ok) throw new Error('stop refused: HTTP ' + r.status);
      const j = await r.json(); state.textContent = j.state; e.target.remove();
    } catch (err) {
      e.target.disabled = false;
      const n = document.createElement('span'); n.className = 'small bad'; n.textContent = String(err.message || err); e.target.after(n);
    }
  });
  document.getElementById('execution-continue')?.addEventListener('click', async e => {
    e.target.disabled = true; try { await fetch(box.dataset.continue, {method: 'POST', headers: {'X-CSRF-Token': box.dataset.csrf}}); } catch {} e.target.disabled = false;
  });
})();
</script>
{% endmacro %}