<div class="space-y-6">
  <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
    <div class="af-metric-card border-red-200 bg-red-50"><div class="text-xs font-semibold uppercase text-red-700">Overdue</div><div class="mt-2 text-3xl font-semibold text-red-700">{{ overview.overdue_count }}</div><div class="mt-1 text-xs text-red-700">Ageing risk</div></div>
    <div class="af-metric-card border-orange-200 bg-orange-50"><div class="text-xs font-semibold uppercase text-orange-700">Unassigned</div><div class="mt-2 text-3xl font-semibold text-orange-700">{{ overview.unassigned_count }}</div><div class="mt-1 text-xs text-orange-700">Manager action</div></div>
    <div class="af-metric-card border-amber-200 bg-amber-50"><div class="text-xs font-semibold uppercase text-amber-700">Client Pending</div><div class="mt-2 text-3xl font-semibold text-amber-700">{{ overview.client_pending_count }}</div><div class="mt-1 text-xs text-amber-700">Follow-up needed</div></div>
    <div class="af-metric-card"><div class="text-xs font-semibold uppercase text-slate-500">Escalation Items</div><div class="mt-2 text-3xl font-semibold text-slate-900">{{ overview.escalation_count }}</div><div class="mt-1 text-xs text-slate-500">Combined attention list</div></div>
  </section>

  <section class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_340px]">
    <div class="af-card">
      <div class="mb-4 flex items-center justify-between gap-3"><div><h3 class="text-lg font-semibold text-slate-900">Escalation Register</h3><p class="text-sm text-slate-500">Unassigned, overdue and client-pending tasks sorted by urgency.</p></div><a href="/alerts" class="af-btn af-btn-primary">Open Alerts</a></div>
      {% set rows = escalations %}
      {% include 'modules/manager_dashboard/templates/manager_dashboard/partials/_task_table.html' %}
    </div>
    <aside class="space-y-4">
      <div class="af-card"><h3 class="font-semibold text-slate-900">Ageing Buckets</h3><div class="mt-4 space-y-2 text-sm">{% for item in age_buckets %}<div class="flex justify-between rounded-xl bg-slate-50 px-3 py-2"><span>{{ item.label }}</span><span class="font-semibold">{{ item.count }}</span></div>{% endfor %}</div></div>
      <div class="af-card"><h3 class="font-semibold text-slate-900">Escalation Actions</h3><div class="mt-4 grid gap-2"><a href="/manager/work" class="rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold hover:bg-slate-50">Assign / Reassign Work</a><a href="/manager/dashboard?tab=client-pending" class="rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold hover:bg-slate-50">Client Pending Follow-up</a><a href="/employees/progress" class="rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold hover:bg-slate-50">Review Progress</a></div></div>
    </aside>
  </section>
</div>
