{% extends "tesm_core/base.html" %}
{% from "tesm_core/macros.html" import pill %}
{% block page_title %}{{ job.subject }}{% endblock %}
{% block page_sub %}{{ 'Aktualisierung' if job.kind.endswith('update') else 'Neustart' }} · {{ job.created_at | dt }}{% endblock %}
{% block breadcrumb %}
<nav class="breadcrumb">
  <span><a href="{{ url_for('maintenance.overview') }}">Wartung</a></span><span>{{ job.subject }}</span>
</nav>
{% endblock %}
{% block content %}
<section class="card">
  <div class="card__header">
    <div class="flex-1">
      <div class="card__title">
        {{ icon('wrench', size=17) }} Auftrag
        {% if job.state == 'succeeded' %}{{ pill('erfolgreich', 'online') }}
        {% elif job.state == 'failed' %}{{ pill('fehlgeschlagen', 'danger') }}
        {% elif job.state == 'running' %}{{ pill('läuft', 'info') }}
        {% elif job.state == 'unknown' %}{{ pill('unklar', 'warning') }}
        {% else %}{{ pill('wartet', '') }}{% endif %}
      </div>
      <div class="card__sub">{{ job.message }}</div>
    </div>
    <span class="fs-xs faint">gestartet von {{ job.started_by }}</span>
  </div>
  <div class="card__body">
    <div class="progress {{ 'progress--success' if job.state == 'succeeded' else ('progress--danger' if job.state == 'failed' else '') }}">
      <div class="progress__bar" style="width: {{ job.progress }}%"></div>
    </div>
  </div>
  <div id="job-output"
       {% if job.state in ('pending', 'running') %}
       data-refresh-url="{{ url_for('maintenance.job_output', job_id=job.id) }}"
       data-refresh-interval="3000"
       {% endif %}>
    {% include "tesm/_maintenance_output.html" %}
  </div>
</section>
<div class="row row--end">
  <a class="btn" href="{{ url_for('maintenance.overview') }}">Zurück</a>
</div>
{% endblock %}

{% block scripts %}
<script type="module" nonce="{{ csp_nonce }}">
  // Beim Öffnen ans Ende springen: bei einem laufenden Auftrag ist die
  // jüngste Zeile die interessante, nicht die erste. Das Nachführen beim
  // Aktualisieren erledigt die Schleife in app.js.
  const view = document.querySelector("#job-output .log-view");
  if (view) view.scrollTop = view.scrollHeight;
</script>
{% endblock %}