<div class="grid gap-6 xl:grid-cols-2">
  <div class="af-card">
    <div class="flex items-center justify-between gap-3"><div><h3 class="text-lg font-semibold text-slate-900">Engagement Documents</h3><p class="mt-1 text-sm text-slate-500">Recent working documents and files shared for active services.</p></div><a href="/client/documents" class="af-btn af-btn-primary">Open Documents</a></div>
    <div class="mt-5 space-y-3">
      {% for doc in recent_documents or [] %}
      <a href="/client/documents" class="block rounded-2xl border border-slate-200 p-4 hover:bg-slate-50">
        <div class="font-semibold text-slate-900">{{ doc.document_title or doc.document_type or 'Document' }}</div>
        <div class="mt-1 text-xs text-slate-500">{{ doc.financial_year or '-' }}{% if doc.updated_at_utc %} • Updated {{ doc.updated_at_utc.strftime('%d-%m-%Y') }}{% endif %}</div>
      </a>
      {% else %}
      <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500">No recent engagement documents found.</div>
      {% endfor %}
    </div>
  </div>

  <div class="af-card">
    <div class="flex items-center justify-between gap-3"><div><h3 class="text-lg font-semibold text-slate-900">Permanent Documents</h3><p class="mt-1 text-sm text-slate-500">Profile and permanent records shared with the firm.</p></div><a href="/client/documents" class="af-btn af-btn-secondary">View All</a></div>
    <div class="mt-5 space-y-3">
      {% for doc in permanent_documents[:8] if permanent_documents is defined %}
      <a href="/client/documents" class="block rounded-2xl border border-slate-200 p-4 hover:bg-slate-50">
        <div class="font-semibold text-slate-900">{{ doc.document_title or doc.document_type or doc.category or 'Permanent Document' }}</div>
        <div class="mt-1 text-xs text-slate-500">{{ doc.category or '-' }}{% if doc.updated_at_utc %} • Updated {{ doc.updated_at_utc.strftime('%d-%m-%Y') }}{% endif %}</div>
      </a>
      {% else %}
      <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500">No permanent documents found.</div>
      {% endfor %}
    </div>
  </div>
</div>
