{{ define "page_job_show" }}
{{ $view := .Data }}
{{ $job := index $view "job" }}
<section class="card">
  <div class="section-head">
    <h1>Job #{{ $job.ID }} - {{ $job.Name }}</h1>
    <a href="/jobs" class="btn subtle">Back</a>
  </div>
  <p>Status: <span id="job-status-badge" class="status {{ statusClass $job.Status }}">{{ $job.Status }}</span></p>
  <p>Progress: <span id="job-progress-text">{{ progressInt $job.Progress }}%</span></p>
  <div class="progress">
    <div class="progress-fill" data-progress="{{ progressInt $job.Progress }}"></div>
  </div>
  <div class="row">
    {{ if $job.FrameStart }}<span>Frames: {{ derefInt $job.FrameStart }}{{ if $job.FrameEnd }}-{{ derefInt $job.FrameEnd }}{{ end }}</span>{{ end }}
    {{ if $job.OutputFormat }}<span>Format: {{ derefString $job.OutputFormat }}</span>{{ end }}
    <span>Created: {{ formatTime $job.CreatedAt }}</span>
  </div>
  <div class="section-head">
    <button id="cancel-job-btn" class="btn{{ if not (or (eq $job.Status "pending") (eq $job.Status "running")) }} hidden{{ end }}" data-cancel-job="{{ $job.ID }}">Cancel Job</button>
    <button id="delete-job-btn" class="btn danger{{ if not (or (eq $job.Status "completed") (eq $job.Status "failed") (eq $job.Status "cancelled")) }} hidden{{ end }}" data-delete-job="{{ $job.ID }}">Delete Job</button>
  </div>
</section>

<section class="card">
  <div class="section-head">
    <h2>Tasks</h2>
    <button id="tasks-refresh" class="btn tiny">Refresh tasks</button>
  </div>
  <div id="tasks-fragment"
       hx-get="/ui/fragments/jobs/{{ $job.ID }}/tasks"
       hx-trigger="load"
       hx-swap="innerHTML">
    <p>Loading tasks...</p>
  </div>
</section>

<section class="card">
  <div class="section-head">
    <h2>Files</h2>
    <div class="row">
      <a href="/api/jobs/{{ $job.ID }}/files/exr-zip" class="btn tiny">Download all EXR (.zip)</a>
      <button id="files-refresh" class="btn tiny">Refresh files</button>
    </div>
  </div>
  <div id="files-fragment"
       hx-get="/ui/fragments/jobs/{{ $job.ID }}/files"
       hx-trigger="load"
       hx-swap="innerHTML">
    <p>Loading files...</p>
  </div>
</section>

<div id="exr-preview-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="exr-preview-title">
  <div class="modal-backdrop" data-modal-close></div>
  <div class="modal-content">
    <div class="section-head">
      <h3 id="exr-preview-title">EXR Preview</h3>
      <button type="button" id="exr-preview-close" class="btn tiny subtle" data-modal-close>Close</button>
    </div>
    <p id="exr-preview-name" class="muted"></p>
    <div class="modal-body">
      <img id="exr-preview-image" alt="EXR preview" class="preview-image hidden">
      <p id="exr-preview-loading" class="muted">Loading preview...</p>
      <p id="exr-preview-error" class="alert error hidden"></p>
    </div>
  </div>
</div>

<section class="card">
  <div class="section-head">
    <h2>Task Logs</h2>
    <span id="task-log-status" class="muted">Select a task to view logs.</span>
  </div>
  <div class="log-controls">
    <label>Task
      <select id="task-log-task-id">
        <option value="">Choose a task...</option>
      </select>
    </label>
    <label>Level
      <select id="task-log-level-filter">
        <option value="">All</option>
        <option value="INFO">INFO</option>
        <option value="WARN">WARN</option>
        <option value="ERROR">ERROR</option>
        <option value="DEBUG">DEBUG</option>
      </select>
    </label>
    <label class="log-toggle"><input id="task-log-auto-refresh" type="checkbox" checked> Auto refresh</label>
    <label class="log-toggle"><input id="task-log-follow" type="checkbox" checked> Follow tail</label>
    <button id="task-log-refresh" class="btn">Refresh now</button>
    <button id="task-log-copy" class="btn subtle">Copy logs</button>
  </div>
  <div id="task-log-output" class="logs log-lines"></div>
</section>
{{ end }}