<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">Assigned Work</h3>
        <p class="mt-1 text-sm text-slate-500">Consultant-visible assignments and firm task communications.</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 Work Board</a>
    </div>
  </div>

  {% set work_board = payload.work_board if payload.work_board is defined else {} %}
  {% if work_board.columns %}
  <section class="grid gap-4 xl:grid-cols-3">
    {% for key, column in work_board.columns.items() %}
    <div class="rounded-3xl border border-slate-200 bg-white p-4 shadow-soft">
      <div class="flex items-center justify-between">
        <h4 class="font-semibold text-slate-900">{{ column.label }}</h4>
        <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-600">{{ column.items|length }}</span>
      </div>
      <div class="mt-4 space-y-3">
        {% for item in column.items[:5] %}
        {% set task = item.task %}{% set client = item.client %}{% set catalogue = item.catalogue %}{% set comment = item.comment %}
        <a href="/consultant/assignments/{{ task.id }}" class="block rounded-2xl border {% if item.is_overdue %}border-red-200 bg-red-50{% else %}border-slate-200 hover:bg-slate-50{% endif %} p-3">
          <div class="font-semibold text-slate-900">{{ client.client_name }}</div>
          <div class="mt-1 text-xs text-slate-500">{{ catalogue.service_name }} • {{ task.task_name }}</div>
          <div class="mt-2 flex flex-wrap gap-2 text-xs">
            <span class="rounded-full bg-white px-2 py-1 font-semibold text-slate-600">{{ task.status.replace('_',' ').title() if task.status else 'Pending' }}</span>
            {% if item.is_overdue %}<span class="rounded-full bg-red-100 px-2 py-1 font-semibold text-red-700">Overdue</span>{% endif %}
          </div>
          <div class="mt-2 line-clamp-2 text-xs text-slate-600">{{ comment.message }}</div>
        </a>
        {% else %}
        <div class="rounded-2xl border border-dashed border-slate-300 p-4 text-sm text-slate-500">No items in this column.</div>
        {% endfor %}
      </div>
    </div>
    {% 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 assigned work found.</div>
  {% endif %}
</div>
