{% extends "layout.html" %}

{% block title %}TrueNAS Burn-In — Job #{{ job.id }}{% endblock %}

{% block content %}
<div class="page-toolbar">
  <div class="breadcrumb">
    <a href="/history">History</a>
    <span class="breadcrumb-sep">›</span>
    <span>Job #{{ job.id }}</span>
  </div>
  <div class="toolbar-right">
    <a class="btn-export" href="/history/{{ job.id }}/print" target="_blank" rel="noopener">
      Print / Export
    </a>
  </div>
</div>

<!-- Summary cards -->
<div class="detail-grid">

  <!-- Drive info -->
  <div class="detail-card">
    <div class="detail-card-title">Drive</div>
    <div class="detail-rows">
      <div class="detail-row">
        <span class="detail-label">Device</span>
        <span class="detail-value drive-name">{{ job.devname }}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Model</span>
        <span class="detail-value">{{ job.model or '—' }}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Serial</span>
        <span class="detail-value mono">{{ job.serial or '—' }}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Size</span>
        <span class="detail-value">{{ job.size_bytes | format_bytes }}</span>
      </div>
    </div>
  </div>

  <!-- Job summary -->
  <div class="detail-card">
    <div class="detail-card-title">Job</div>
    <div class="detail-rows">
      <div class="detail-row">
        <span class="detail-label">Profile</span>
        <span class="chip chip-{{ 'red' if job.profile == 'full' else 'gray' }}">{{ job.profile }}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">State</span>
        <span class="chip chip-{{ job.state }}">{{ job.state }}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Operator</span>
        <span class="detail-value">{{ job.operator or '—' }}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Created</span>
        <span class="detail-value mono">{{ job.created_at | format_dt_full }}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Started</span>
        <span class="detail-value mono">{{ job.started_at | format_dt_full }}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Finished</span>
        <span class="detail-value mono">{{ job.finished_at | format_dt_full }}</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Duration</span>
        <span class="detail-value mono">{{ job.duration_seconds | format_duration }}</span>
      </div>
    </div>
  </div>

</div>

{% if job.error_text %}
<div class="banner banner-error" style="margin-bottom: 14px; border-radius: 6px; border: 1px solid var(--red-bd);">
  ✕ {{ job.error_text }}
</div>
{% endif %}

<!-- Stages table -->
<h2 class="section-title">Stages</h2>
<div class="table-wrap">
  <table>
    <thead>
      <tr>
        <th>Stage</th>
        <th>State</th>
        <th>Started</th>
        <th>Duration</th>
        <th>Error</th>
      </tr>
    </thead>
    <tbody>
      {% for s in job.stages %}
      <tr>
        <td>
          <span class="stage-label">{{ s.stage_name.replace('_', ' ').title() }}</span>
        </td>
        <td>
          <span class="chip chip-{{ s.state }}">{{ s.state }}</span>
        </td>
        <td class="mono text-muted">{{ s.started_at | format_dt_full }}</td>
        <td class="mono text-muted">{{ s.duration_seconds | format_duration }}</td>
        <td>
          {% if s.error_text %}
          <span class="error-full">{{ s.error_text }}</span>
          {% else %}—{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}