{% extends 'base.html' %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<div class="space-y-8">
  <div>
    <h2 class="text-2xl font-bold text-white">Dashboard</h2>
    <p class="text-sm text-slate-500">Last updated {{ generated_at }}</p>
  </div>

  {% for title, stat in sections %}
  <section>
    <h3 class="text-sm font-semibold text-slate-400 mb-3">{{ title }}</h3>
    <div class="grid grid-cols-2 sm:grid-cols-5 gap-4">
      {% set cards = [('Executions', stat.executions, 'text-brand-400 bg-brand-600/10'),
                       ('Success', stat.success, 'text-status-success bg-status-successBg'),
                       ('Failed', stat.failed, 'text-status-failed bg-status-failedBg'),
                       ('Running', stat.running, 'text-status-running bg-status-runningBg'),
                       ('Pending', stat.pending, 'text-status-pending bg-status-pendingBg')] %}
      {% for label, value, cls in cards %}
      <div class="bg-surface-panel rounded-xl border border-surface-border p-5">
        <p class="text-sm text-slate-400">{{ label }}</p>
        <div class="mt-3 inline-flex items-baseline gap-1 rounded-lg px-2 py-1 {{ cls }}">
          <span class="text-2xl font-bold">{{ value }}</span>
        </div>
      </div>
      {% endfor %}
    </div>
  </section>
  {% endfor %}
</div>
{% endblock %}
{% block extra_scripts %}
<script>setTimeout(() => location.reload(), 30000);</script>
{% endblock %}