{% if not employee %}
<div class="rounded-2xl border border-amber-200 bg-amber-50 p-6 text-sm text-amber-900 shadow-soft">Your login is not linked to an employee profile yet.</div>
{% else %}
<div class="flex flex-wrap items-center justify-between gap-3">
  <div><h3 class="text-lg font-semibold text-slate-900">Overdue Work</h3><p class="mt-1 text-sm text-slate-600">These assigned engagements have overdue task items. Clear these first.</p></div>
  <a href="/employee/work?date_bucket=overdue" class="af-btn af-btn-primary">Open Full Board</a>
</div>
<div class="grid gap-4 lg:grid-cols-2">
  {% set ns = namespace(count=0) %}
  {% if work_payload %}
    {% for column in work_payload.columns %}
      {% for card in column.cards %}
        {% if card.overdue_count %}
        {% set ns.count = ns.count + 1 %}
        <article class="rounded-2xl border border-red-200 bg-red-50 p-5 shadow-soft">
          <div class="text-xs font-semibold uppercase tracking-wide text-red-700">Overdue</div>
          <h4 class="mt-1 text-base font-semibold text-slate-900">{{ card.client_name }}</h4>
          <p class="mt-1 text-sm text-slate-700">{{ card.service_name }} · FY {{ card.financial_year }} · Due {{ card.due_date or '-' }}</p>
          <div class="mt-3 grid gap-2 text-xs text-slate-700 sm:grid-cols-3">
            <div class="rounded-xl bg-white/80 p-3"><strong class="block text-red-700">{{ card.overdue_count }}</strong>Overdue</div>
            <div class="rounded-xl bg-white/80 p-3"><strong class="block text-slate-900">{{ card.open_count }}</strong>Open</div>
            <div class="rounded-xl bg-white/80 p-3"><strong class="block text-slate-900">{{ card.blocked_count }}</strong>Blocked</div>
          </div>
          <a href="/employee/work/engagements/{{ card.engagement_id }}" class="mt-4 inline-flex w-full justify-center rounded-xl bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700">Open Overdue Work</a>
        </article>
        {% endif %}
      {% endfor %}
    {% endfor %}
  {% endif %}
  {% if ns.count == 0 %}
  <div class="rounded-2xl border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500 lg:col-span-2">No overdue work is pending.</div>
  {% endif %}
</div>
{% endif %}