{% set status_color = {
  'queued': 'bg-slate-500/15 text-slate-100 border border-white/10',
  'provisioning': 'bg-blue-500/15 text-blue-100 border border-blue-200/20',
  'uploading': 'bg-cyan-500/15 text-cyan-100 border border-cyan-200/20',
  'running': 'bg-emerald-500/15 text-emerald-100 border border-emerald-200/20',
  'succeeded': 'bg-emerald-500/10 text-emerald-100 border border-emerald-200/20',
  'failed': 'bg-red-500/15 text-red-100 border border-red-200/20',
  'stopping': 'bg-amber-500/15 text-amber-100 border border-amber-200/20',
  'stopped': 'bg-slate-500/10 text-slate-100 border border-white/10',
  'cancelled': 'bg-slate-500/10 text-slate-100 border border-white/10'
} %}

{% if jobs|length == 0 %}
  <div class="px-4 sm:px-6 py-10 text-center">
    <div class="text-sm font-medium">No jobs yet</div>
    <div class="mt-1 text-xs muted">Create one via <span class="mono">/api/jobs</span> or <span class="mono">pxq add</span>.</div>
  </div>
{% else %}
  <div class="overflow-x-auto">
    <table class="w-full text-left text-sm">
      <thead class="text-xs uppercase tracking-[0.16em] muted">
        <tr>
          <th class="px-4 sm:px-6 py-3">ID</th>
          <th class="px-4 sm:px-6 py-3">Status</th>
          <th class="px-4 sm:px-6 py-3">Provider</th>
          <th class="px-4 sm:px-6 py-3">Command</th>
          <th class="px-4 sm:px-6 py-3">Updated</th>
          <th class="px-4 sm:px-6 py-3">Runtime</th>
          <th class="px-4 sm:px-6 py-3"></th>
        </tr>
      </thead>
      <tbody class="divide-y divide-white/5">
        {% for job in jobs %}
          <tr class="hover:bg-white/5 transition">
            <td class="px-4 sm:px-6 py-3 mono">{{ job.id }}</td>
            <td class="px-4 sm:px-6 py-3">
              <span class="mono text-xs px-2 py-1 rounded-lg {{ status_color.get(job.status.value, 'bg-white/10 border border-white/10') }}">{{ job.status.value }}</span>
            </td>
            <td class="px-4 sm:px-6 py-3 mono">{{ job.provider }}</td>
            <td class="px-4 sm:px-6 py-3">
              <div class="mono text-xs whitespace-nowrap overflow-hidden text-ellipsis max-w-[38ch] sm:max-w-[64ch]">{{ job.command }}</div>
            </td>
            <td class="px-4 sm:px-6 py-3 mono text-xs">{{ fmt_dt(job.updated_at) }}</td>
            <td class="px-4 sm:px-6 py-3 mono text-xs">
              {% set d = duration_seconds(job.started_at, job.finished_at) %}
              {{ d if d is not none else '-' }}
            </td>
            <td class="px-4 sm:px-6 py-3 text-right">
              <a class="text-xs px-3 py-2 rounded-lg bg-white/10 hover:bg-white/15 transition" href="/jobs/{{ job.id }}">Open</a>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endif %}