{{ range .jobs }}
<tr id="job-{{ .ID }}" class="border-b {{ if eq .Status "error" }}bg-red-100 text-red-800{{ end }}">
  <td class="px-2 py-1 text-sm">{{ .Name }}</td>
  <td class="px-2 py-1 text-sm">{{ .Status }}</td>
  <td class="px-2 py-1 text-sm">{{ .Speed }}</td>
  <td class="px-2 py-1 text-sm">
    <progress class="progress is-info" value="{{ .Progress }}" max="100">{{ .Progress }}</progress>
  </td>
  <td class="px-2 py-1 text-sm">
    {{ if eq .Status "waiting" }}
    <button data-action="start-job" data-id="{{ .ID }}" class="text-indigo-600">⬇ Télécharger</button>
    {{ end }}

    {{ if eq .Status "paused" }}
    <button data-action="resume-job" data-id="{{ .ID }}" class="text-blue-600">▶</button>
    {{ else if eq .Status "running" }}
    <button data-action="pause-job" data-id="{{ .ID }}" class="text-yellow-600">⏸</button>
    {{ end }}

    {{ if eq .Status "done" }}
      {{ if .StreamURL }}
      <a href="/stream/{{ .ID }}" target="_blank" class="text-green-600 ml-2">🎬 Stream</a>
      <button onclick="navigator.clipboard.writeText('{{ .StreamURL }}')" class="text-gray-600 ml-1">📋</button>
      {{ end }}
    {{ end }}

    <button data-action="delete-job" data-id="{{ .ID }}" class="text-red-600 ml-2">✖</button>
  </td>
</tr>

{{ if eq .Status "error" }}
<tr class="bg-red-50 text-sm text-red-600">
  <td colspan="5" class="px-2 py-1">Erreur : {{ .ErrorMsg }}</td>
</tr>
{{ end }}
{{ end }}