<div
  id="dashboard-stats"
  class="grid grid-cols-4 gap-4"
  hx-get="/dashboard/stats"
  hx-swap="outerHTML"
  hx-trigger="every 1s, refresh from:body"
  hx-include="#graph-range"
>
  <div class="bg-gray-800 p-4 rounded shadow border border-gray-700">
    <div class="text-sm text-gray-400">Running Jobs</div>
    <div class="text-2xl font-bold text-blue-400"><%= stats.running %></div>
  </div>
  <div class="bg-gray-800 p-4 rounded shadow border border-gray-700">
    <div class="text-sm text-gray-400">Completed Jobs</div>
    <div class="text-2xl font-bold text-green-400"><%= stats.completed %></div>
  </div>
  <div class="bg-gray-800 p-4 rounded shadow border border-gray-700">
    <div class="text-sm text-gray-400">Failed Jobs</div>
    <div class="text-2xl font-bold text-red-400"><%= stats.failed %></div>
  </div>
  <div class="bg-gray-800 p-4 rounded shadow border border-gray-700">
    <div class="text-sm text-gray-400">Scheduled</div>
    <div class="text-2xl font-bold text-yellow-400"><%= stats.waiting %></div>
  </div>
</div>
