{% extends "base.html" %}
{% from "_macros.html" import status_badge %}

{% block title %}DCF Dashboard — Overview{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-slate-900">Overview</h1>
<p class="mt-1 text-sm text-slate-500">Status across all registered data contracts.</p>

<div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
  <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
    <div class="text-sm font-medium text-slate-500">Contracts</div>
    <div class="mt-1 text-3xl font-semibold text-slate-900">{{ contracts|length }}</div>
  </div>
  <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
    <div class="text-sm font-medium text-slate-500">Compliant runs</div>
    <div class="mt-1 text-3xl font-semibold text-green-600">{{ counts.COMPLIANT }}</div>
  </div>
  <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
    <div class="text-sm font-medium text-slate-500">Breaching runs</div>
    <div class="mt-1 text-3xl font-semibold text-red-600">{{ counts.BREACH }}</div>
  </div>
  <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
    <div class="text-sm font-medium text-slate-500">Errors</div>
    <div class="mt-1 text-3xl font-semibold text-amber-600">{{ counts.ERROR }}</div>
  </div>
</div>

<h2 class="mt-10 text-lg font-semibold text-slate-900">Registered Contracts</h2>
<div class="mt-3 overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
  {% if contracts %}
  <table class="min-w-full divide-y divide-slate-200 text-sm">
    <thead class="bg-slate-50">
      <tr>
        <th class="px-4 py-2 text-left font-medium text-slate-500">Name</th>
        <th class="px-4 py-2 text-left font-medium text-slate-500">Version</th>
        <th class="px-4 py-2 text-left font-medium text-slate-500">Published</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      {% for c in contracts %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-2">
          <a href="/contracts/{{ c.name }}" class="font-medium text-indigo-600 hover:underline">{{ c.name }}</a>
        </td>
        <td class="px-4 py-2 text-slate-600">v{{ c.version }}</td>
        <td class="px-4 py-2 text-slate-600">{{ c.published_at }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="px-4 py-6 text-sm text-slate-500">No contracts registered yet.</p>
  {% endif %}
</div>

<h2 class="mt-10 text-lg font-semibold text-slate-900">Recent Breach Events</h2>
<div class="mt-3 overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
  {% if breach_events %}
  <table class="min-w-full divide-y divide-slate-200 text-sm">
    <thead class="bg-slate-50">
      <tr>
        <th class="px-4 py-2 text-left font-medium text-slate-500">Contract</th>
        <th class="px-4 py-2 text-left font-medium text-slate-500">Version</th>
        <th class="px-4 py-2 text-left font-medium text-slate-500">Validated At</th>
        <th class="px-4 py-2 text-left font-medium text-slate-500">Status</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      {% for r in breach_events %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-2">
          <a href="/contracts/{{ r.contract_name }}" class="font-medium text-indigo-600 hover:underline">{{ r.contract_name }}</a>
        </td>
        <td class="px-4 py-2 text-slate-600">v{{ r.contract_version }}</td>
        <td class="px-4 py-2 text-slate-600">{{ r.validated_at }}</td>
        <td class="px-4 py-2">{{ status_badge(r.overall_status) }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="px-4 py-6 text-sm text-green-700">No recent breach events.</p>
  {% endif %}
</div>
{% endblock %}