<div class="space-y-6">
  <div class="af-card">
    <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
      <div>
        <h3 class="text-lg font-semibold text-slate-900">Engagement Progress</h3>
        <p class="mt-1 text-sm text-slate-500">Overall engagement progress and external blockers. Detailed internal task status is not exposed.</p>
      </div>
      <a href="/consultant/work" class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800">Open Full Engagement Report</a>
    </div>
  </div>

  {% set work_board = payload.work_board if payload.work_board is defined else {} %}
  {% if work_board.engagements %}
  <section class="grid gap-4 xl:grid-cols-3">
    {% for item in work_board.engagements[:9] %}
    <a href="/consultant/engagements/{{ item.subscription.id }}" class="rounded-3xl border border-slate-200 bg-white p-4 shadow-soft hover:border-brand-300">
      <div class="flex items-start justify-between gap-3">
        <div><div class="font-semibold text-slate-900">{{ item.client.client_name }}</div><div class="mt-1 text-xs text-slate-500">{{ item.catalogue.service_name }} • {{ item.subscription.financial_year }}</div></div>
        {% if item.is_overdue %}<span class="rounded-full bg-red-50 px-2 py-1 text-[11px] font-semibold text-red-700">Overdue</span>{% endif %}
      </div>
      <div class="mt-4 flex items-center justify-between text-xs font-semibold text-slate-700"><span>{{ item.external_stage }}</span><span>{{ item.progress_percentage }}%</span></div>
      <div class="mt-2 h-2 overflow-hidden rounded-full bg-slate-100"><div class="h-full rounded-full bg-brand-600" style="width: {{ item.progress_percentage }}%"></div></div>
      <div class="mt-3 rounded-xl {% if item.blocker_code != 'none' %}bg-amber-50 text-amber-800{% else %}bg-emerald-50 text-emerald-700{% endif %} p-2 text-xs"><strong>Blocker:</strong> {{ item.blocker_text }}<br><strong>Pending from:</strong> {{ item.pending_from }}</div>
    </a>
    {% endfor %}
  </section>
  {% else %}
  <div class="rounded-3xl border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500 shadow-soft">No consultant-visible engagements found.</div>
  {% endif %}

  {% if work_board.assigned_tasks %}
  <section class="rounded-3xl border border-indigo-200 bg-indigo-50 p-4 shadow-soft">
    <div class="flex items-center justify-between"><div><h4 class="font-semibold text-slate-900">Tasks Assigned Directly to Me</h4><p class="text-xs text-slate-600">Only these tasks expose detailed execution controls.</p></div><span class="rounded-full bg-white px-2 py-1 text-xs font-semibold text-indigo-700">{{ work_board.assigned_tasks|length }}</span></div>
    <div class="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-3">{% for item in work_board.assigned_tasks[:6] %}<a href="/consultant/assignments/{{ item.task.id }}" class="rounded-2xl border border-indigo-200 bg-white p-3 hover:bg-indigo-100"><div class="font-semibold text-slate-900">{{ item.client.client_name }}</div><div class="mt-1 text-xs text-slate-500">{{ item.task.task_name }}</div><div class="mt-2 text-xs font-semibold text-indigo-700">{{ item.task.consultant_assignment_status.replace('_',' ').title() }}</div></a>{% endfor %}</div>
  </section>
  {% endif %}
</div>
