{% if active_tasks %}
<div id="active-task-indicator"
     class="mx-2 mb-3 rounded-md bg-amber-950 border border-amber-700 px-3 py-2.5"
     hx-get="/tasks/active-indicator"
     hx-trigger="every 3s"
     hx-target="#active-task-indicator"
     hx-swap="outerHTML">
  <div class="flex items-center justify-between mb-2">
    <div class="flex items-center gap-2">
      <span class="relative flex h-2 w-2 flex-shrink-0">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-2 w-2 bg-amber-400"></span>
      </span>
      <span class="text-xs font-semibold text-amber-200 uppercase tracking-wide">Running</span>
    </div>
    <a href="/tasks"
       class="text-xs text-amber-400 hover:text-amber-200 transition-colors">
      View all →
    </a>
  </div>
  {% for task in active_tasks %}
  <p class="text-xs text-amber-300 truncate font-mono mb-2">{{ task.label | replace("run: ", "") }}</p>
  <button hx-post="/tasks/{{ task.task_id }}/stop"
          hx-target="#active-task-indicator"
          hx-swap="outerHTML"
          hx-confirm="Stop this experiment?"
          class="w-full text-xs font-medium text-red-300 hover:text-white
                 border border-red-700 hover:bg-red-700 rounded px-2 py-1
                 transition-colors cursor-pointer">
    Stop experiment
  </button>
  {% endfor %}
</div>
{% else %}
<div id="active-task-indicator"
     hx-get="/tasks/active-indicator"
     hx-trigger="every 3s"
     hx-target="#active-task-indicator"
     hx-swap="outerHTML">
</div>
{% endif %}