{% extends "base.html" %}
{% block title %}— Tasks{% endblock %}
{% block content %}

{% set status_colors = {
  'running':  'bg-amber-100 text-amber-800',
  'complete': 'bg-green-100 text-green-800',
  'error':    'bg-red-100   text-red-800',
  'stopped':  'bg-slate-100 text-slate-600',
} %}

<div class="mb-6 flex items-start justify-between gap-4">
  <div>
    <h1 class="text-2xl font-bold text-slate-900">Tasks</h1>
    <p class="text-sm text-slate-500 mt-1">All experiment runs — running and recent.</p>
  </div>
  <form method="post" action="/tasks/cleanup"
        onsubmit="return confirm('Remove all completed, error, and stopped task records?')">
    <button type="submit"
            class="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm
                   font-medium text-slate-700 shadow-sm hover:bg-red-50
                   hover:border-red-300 hover:text-red-700 transition-colors
                   focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-1">
      Clean up finished
    </button>
  </form>
</div>

{% if cleanup_done %}
<div class="mb-5 flex items-center gap-2 rounded-md bg-green-50 border border-green-200
            px-4 py-3 text-sm text-green-800">
  <svg class="h-4 w-4 flex-shrink-0" fill="none" viewBox="0 0 24 24"
       stroke="currentColor" stroke-width="2">
    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
  </svg>
  Finished task records removed.
</div>
{% endif %}

<div class="bg-white rounded-lg border border-slate-200 shadow-sm overflow-hidden">
  {% if rows %}
  <table class="min-w-full divide-y divide-slate-200">
    <thead class="bg-slate-50">
      <tr>
        <th class="px-6 py-3 text-left text-xs font-medium
                   text-slate-500 uppercase tracking-wide">Status</th>
        <th class="px-6 py-3 text-left text-xs font-medium
                   text-slate-500 uppercase tracking-wide">Experiment</th>
        <th class="px-6 py-3 text-left text-xs font-medium
                   text-slate-500 uppercase tracking-wide">Started</th>
        <th class="px-6 py-3 text-left text-xs font-medium
                   text-slate-500 uppercase tracking-wide">Duration</th>
        <th class="px-6 py-3 text-left text-xs font-medium
                   text-slate-500 uppercase tracking-wide">Source</th>
        <th class="px-6 py-3"></th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      {% for row in rows %}
      {% set r = row.record %}
      {% set href = '/results/' ~ r.experiment_name ~ '/' ~ r.run_id
                    if r.status == 'complete' and r.run_id
                    else '/tasks/' ~ r.task_id %}
      <tr class="hover:bg-slate-50 transition-colors">
        <td class="px-6 py-3">
          <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full
                       text-xs font-medium
                       {{ status_colors.get(r.status, 'bg-slate-100 text-slate-600') }}">
            {% if r.status == 'running' %}
            <span class="animate-pulse h-1.5 w-1.5 rounded-full bg-amber-500
                         inline-block flex-shrink-0"></span>
            {% endif %}
            {{ r.status }}
          </span>
        </td>
        <td class="px-6 py-3">
          <p class="text-sm font-medium text-slate-900">
            {{ r.experiment_name }}
          </p>
          <p class="text-xs font-mono text-slate-400">{{ r.task_id }}</p>
        </td>
        <td class="px-6 py-3 text-xs text-slate-500 whitespace-nowrap">
          {{ r.started_at.strftime('%Y-%m-%d %H:%M') }}
        </td>
        <td class="px-6 py-3 text-xs text-slate-500 font-mono whitespace-nowrap">
          {{ row.duration }}
        </td>
        <td class="px-6 py-3">
          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs
                       font-medium bg-slate-100 text-slate-600">
            {{ r.source }}
          </span>
        </td>
        <td class="px-6 py-3 text-right">
          <a href="{{ href }}"
             class="text-xs text-indigo-600 hover:underline whitespace-nowrap">
            {% if r.status == 'running' %}Live →
            {% elif r.status == 'complete' and r.run_id %}Report →
            {% else %}Details →
            {% endif %}
          </a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="px-6 py-8 text-sm text-slate-400">No tasks yet.</p>
  {% endif %}
</div>

{% endblock %}