{% if not employee %}
<div class="rounded-2xl border border-amber-200 bg-amber-50 p-6 text-sm text-amber-900 shadow-soft">
  <h3 class="font-semibold">Your login is not linked to an employee master</h3>
  <p class="mt-1">You may still see tasks assigned directly to your user ID, but full self-service requires employee master linkage.</p>
  <a href="/employee/register" class="mt-4 inline-flex rounded-xl bg-amber-700 px-4 py-2 text-sm font-semibold text-white hover:bg-amber-800">Request Employee Link</a>
</div>
{% endif %}

<div class="flex flex-wrap items-center justify-between gap-3">
  <div>
    <h3 class="text-lg font-semibold text-slate-900">My Work Board</h3>
    <p class="mt-1 text-sm text-slate-600">Snapshot of your assigned engagements. Use the full work board to update task status and communication.</p>
  </div>
  <a href="/employee/work" class="af-btn af-btn-primary">Open Full Work Board</a>
</div>

<section class="grid gap-4 md:grid-cols-6">
  <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Total</div><div class="mt-1 text-2xl font-semibold">{{ work_payload.summary.total if work_payload else 0 }}</div></div>
  <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Open</div><div class="mt-1 text-2xl font-semibold">{{ work_payload.summary.open if work_payload else 0 }}</div></div>
  <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">In Progress</div><div class="mt-1 text-2xl font-semibold">{{ work_payload.summary.in_progress if work_payload else 0 }}</div></div>
  <div class="rounded-2xl border border-rose-200 bg-rose-50 p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-rose-600">Blocked</div><div class="mt-1 text-2xl font-semibold text-rose-700">{{ work_payload.summary.blocked if work_payload else 0 }}</div></div>
  <div class="rounded-2xl border border-red-200 bg-red-50 p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-red-600">Overdue</div><div class="mt-1 text-2xl font-semibold text-red-700">{{ work_payload.summary.overdue if work_payload else 0 }}</div></div>
  <div class="rounded-2xl border border-emerald-200 bg-emerald-50 p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-emerald-600">Completed</div><div class="mt-1 text-2xl font-semibold text-emerald-700">{{ work_payload.summary.completed if work_payload else 0 }}</div></div>
</section>

<div class="grid gap-4 xl:grid-cols-4">
  {% if work_payload %}
  {% for column in work_payload.columns %}
  <section class="min-h-[320px] rounded-2xl border border-slate-200 bg-slate-50 p-3 shadow-soft">
    <div class="mb-3 flex items-center justify-between px-1">
      <h3 class="text-sm font-semibold text-slate-900">{{ column.label }}</h3>
      <span class="rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-slate-600">{{ column.cards|length }}</span>
    </div>
    <div class="space-y-3">
      {% for card in column.cards[:5] %}
      <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm hover:border-brand-200 hover:shadow-soft">
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ card.client_code or 'Client' }}</div>
        <h4 class="mt-1 text-sm font-semibold text-slate-900">{{ card.client_name }}</h4>
        <div class="mt-3 rounded-xl bg-slate-50 p-3">
          <div class="text-sm font-semibold text-slate-900">{{ card.service_name }}</div>
          <div class="mt-1 text-xs text-slate-500">FY {{ card.financial_year }} · Due {{ card.due_date or '-' }}</div>
        </div>
        <a href="/employee/work/engagements/{{ card.engagement_id }}" class="mt-4 inline-flex w-full justify-center rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Open Work Details</a>
      </article>
      {% else %}
      <div class="rounded-2xl border border-dashed border-slate-300 bg-white p-6 text-center text-sm text-slate-500">No cards in this column.</div>
      {% endfor %}
      {% if column.cards|length > 5 %}<a href="/employee/work?status={{ column.code }}" class="block rounded-xl border border-slate-200 bg-white px-4 py-2 text-center text-sm font-semibold text-slate-700 hover:bg-slate-50">View all {{ column.cards|length }}</a>{% endif %}
    </div>
  </section>
  {% endfor %}
  {% else %}
  <div class="rounded-2xl border border-dashed border-slate-300 bg-white p-6 text-sm text-slate-500 xl:col-span-4">No work board data available yet.</div>
  {% endif %}
</div>
