{% extends "layout.html.tera" %}
{% block content %}
<h1 class="text-2xl font-semibold mb-4">{{ title | default(value="Metrics Summary") }}</h1>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
  <div class="kpi"><div class="kpi-title">Total</div><div class="kpi-value">{{ stats.total_jobs }}</div></div>
  <div class="kpi"><div class="kpi-title">Success</div><div class="kpi-value">{{ stats.success_jobs }}</div></div>
  <div class="kpi"><div class="kpi-title">Failed</div><div class="kpi-value">{{ stats.failed_jobs }}</div></div>
  <div class="kpi"><div class="kpi-title">Scheduled</div><div class="kpi-value">{{ stats.scheduled_jobs }}</div></div>
  <div class="kpi"><div class="kpi-title">Active Workers</div><div class="kpi-value">{{ stats.active_workers }}</div></div>
</div>

<div class="card p-4">
  <h2 class="text-sm mb-3 text-slate-600 dark:text-slate-300">Last 7 days</h2>
  <canvas id="jobsChart" height="80"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const labels = {{ chart.labels | json_encode | safe }};
const success = {{ chart.success | json_encode | safe }};
const failed = {{ chart.failed | json_encode | safe }};
const ctx = document.getElementById('jobsChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels,
    datasets: [
      { label: 'Success', data: success, tension: .35 },
      { label: 'Failed', data: failed, tension: .35 }
    ]
  },
  options: { responsive: true, plugins: { legend: { position: 'top' } } }
});
</script>
{% endblock content %}
