{% 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">Due Today</h3><p class="mt-1 text-sm text-slate-600">Assigned work that needs action today.</p></div>
  <a href="/employee/work?date_bucket=today" 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.due_today_count %}
        {% set ns.count = ns.count + 1 %}
        <article class="rounded-2xl border border-amber-200 bg-amber-50 p-5 shadow-soft">
          <div class="text-xs font-semibold uppercase tracking-wide text-amber-700">Due Today</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 }}</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-slate-900">{{ card.open_count }}</strong>Open</div>
            <div class="rounded-xl bg-white/80 p-3"><strong class="block text-slate-900">{{ card.due_today_count }}</strong>Due today</div>
            <div class="rounded-xl bg-white/80 p-3"><strong class="block text-slate-900">{{ card.completed_count }}</strong>Completed</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>
        {% 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 work is due today.</div>
  {% endif %}
</div>
{% endif %}