{# A running job's progress: phases, bar, clock, stop controls, console.
   Needs the page's component to include `...optiqJobRun(phases)` and to set
   `progress`, `message` and `logLines`. `can_save` says whether this kind of
   job can stop and keep its work. #}
<div class="job-run">
  <ol class="job-phases" aria-label="Progress">
    <template x-for="(ph, i) in phases" :key="ph.label">
      <li :class="phaseClass(i)" :aria-current="phaseClass(i) === 'is-current' ? 'step' : null">
        <span class="job-dot" aria-hidden="true"></span><span x-text="ph.label"></span>
      </li>
    </template>
  </ol>
  <div class="job-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"
       :aria-valuenow="Math.round((progress || 0) * 100)">
    <div :class="'job-fill job-' + jobState" :style="'width: ' + Math.round((progress || 0) * 100) + '%'"></div>
  </div>
  <div class="job-meta">
    <span class="job-msg" x-text="jobState === 'cancelled' ? 'Cancelled' : (message || 'Starting…')"></span>
    <span class="job-clock" x-text="clockText()"></span>
  </div>
  <template x-if="['running', 'stopping'].includes(jobState)">
    <div class="job-actions">
      {% if can_save %}
      <button type="button" class="btn btn-ghost" @click="stopJob(true)" :disabled="jobState === 'stopping'"
              title="Finish at the next step and keep the adapter trained so far">Stop &amp; save</button>
      {% endif %}
      <template x-if="!confirmCancel">
        <button type="button" class="btn btn-ghost" @click="confirmCancel = true">Cancel</button>
      </template>
      <template x-if="confirmCancel">
        <span class="job-confirm">Discard this run?
          <button type="button" class="link-btn link-danger" @click="stopJob(false)">Cancel the run</button>
          <button type="button" class="link-btn" @click="confirmCancel = false">Keep running</button></span>
      </template>
      <span class="job-note" x-show="stopNote" x-text="stopNote" role="status"></span>
    </div>
  </template>
  <template x-if="jobState === 'failed'">
    <div class="flash flash-err job-end"><span x-text="'Failed: ' + jobError"></span>
      <a href="{{ request.path }}">Start over</a></div>
  </template>
  <template x-if="jobState === 'cancelled'">
    <div class="flash flash-warn job-end"><span>Cancelled. Nothing from this run was kept.</span>
      <a href="{{ request.path }}">Start over</a></div>
  </template>
  <details class="job-log" :open="jobState === 'failed'">
    <summary>Console output <span x-text="'(' + logLines.length + ' lines)'"></span></summary>
    <pre x-ref="logEl" x-text="logLines.slice(-200).join('\n')"></pre>
  </details>
</div>