<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">Pending From Me</h3>
      <p class="mt-1 text-sm text-slate-500">Documents, replies or clarifications currently expected from you.</p>
    </div>
    <a href="/client/messages" class="af-btn af-btn-secondary">Open Messages</a>
  </div>
  <div class="mt-5 overflow-x-auto">
    <table class="min-w-full divide-y divide-slate-200 text-sm">
      <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
        <tr><th class="px-4 py-3">Service / Task</th><th class="px-4 py-3">Status</th><th class="px-4 py-3">FY / Period</th><th class="px-4 py-3">Due</th><th class="px-4 py-3">Action</th></tr>
      </thead>
      <tbody class="divide-y divide-slate-100 bg-white">
        {% set shown = namespace(count=0) %}
        {% for task in task_rows or [] %}
          {% if (task.status or 'pending') in ['pending','blocked','client_pending','clarification_required','rework'] %}
          {% set shown.count = shown.count + 1 %}
          <tr>
            <td class="px-4 py-3"><div class="font-semibold text-slate-900">{{ task.task_name or (task.catalogue.service_name if task.catalogue else 'Task') }}</div><div class="text-xs text-slate-500">{{ task.catalogue.service_name if task.catalogue else 'Service' }}</div></td>
            <td class="px-4 py-3"><span class="rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700">{{ (task.status or 'pending')|replace('_',' ')|title }}</span></td>
            <td class="px-4 py-3 text-slate-600">{{ task.financial_year or '-' }}</td>
            <td class="px-4 py-3 text-slate-600">{{ task.internal_target_date.strftime('%d-%m-%Y') if task.internal_target_date else '-' }}</td>
            <td class="px-4 py-3"><a href="/client/engagements/{{ task.subscription_id }}" class="font-semibold text-brand-700 hover:underline">Open</a></td>
          </tr>
          {% endif %}
        {% endfor %}
        {% if shown.count == 0 %}
        <tr><td colspan="5" class="px-4 py-8 text-center text-slate-500">No pending action from you.</td></tr>
        {% endif %}
      </tbody>
    </table>
  </div>
</div>
