{% 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">Client Pending / Blocked Work</h3><p class="mt-1 text-sm text-slate-600">Tasks marked blocked usually need client documents, clarification, manager input or correction before continuation.</p></div>
  <a href="/employee/work?status=blocked" class="af-btn af-btn-primary">Open Blocked Work</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 if column.code == 'blocked' %}
      {% for card in column.cards %}
      {% 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">Blocked / Waiting</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 rounded-xl bg-white/80 p-3 text-xs text-slate-700">{{ card.blocked_count }} blocked task(s). Latest note: {{ card.latest_comment.comment_text if card.latest_comment and card.latest_comment.comment_text is defined else '-' }}</div>
        <a href="/employee/work/engagements/{{ card.engagement_id }}" class="mt-4 inline-flex w-full justify-center rounded-xl bg-amber-600 px-4 py-2 text-sm font-semibold text-white hover:bg-amber-700">Open / Follow Up</a>
      </article>
      {% 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 blocked or client-pending work is pending.</div>
  {% endif %}
</div>
{% endif %}