<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">Documents</h3><p class="mt-1 text-sm text-slate-500">Shared firm documents and engagement documents visible to the consultant.</p></div>
      <a href="/consultant/documents" class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800">Open Document Centre</a>
    </div>
  </div>

  {% set docs = payload.document_centre if payload.document_centre is defined else {} %}
  <section class="grid gap-6 xl:grid-cols-2">
    <div class="af-card">
      <h4 class="font-semibold text-slate-900">Engagement Documents</h4>
      <div class="mt-4 space-y-3">
        {% for doc in docs.engagement_documents[:8] if docs.engagement_documents is defined %}
        <div class="rounded-xl border border-slate-200 p-3">
          <div class="font-semibold text-slate-900">{{ doc.title }}</div>
          <div class="text-xs text-slate-500">{{ doc.document_code or '-' }} • {{ doc.document_type or '-' }} • {{ doc.client.client_name if doc.client else '-' }}</div>
        </div>
        {% else %}
        <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500">No engagement documents available.</div>
        {% endfor %}
      </div>
    </div>
    <div class="af-card">
      <h4 class="font-semibold text-slate-900">Permanent Documents</h4>
      <div class="mt-4 space-y-3">
        {% for doc in docs.permanent_documents[:8] if docs.permanent_documents is defined %}
        <div class="rounded-xl border border-slate-200 p-3">
          <div class="font-semibold text-slate-900">{{ doc.title }}</div>
          <div class="text-xs text-slate-500">{{ doc.document_code or '-' }} • {{ doc.category or '-' }} • {{ doc.client.client_name if doc.client else '-' }}</div>
        </div>
        {% else %}
        <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500">No permanent documents available.</div>
        {% endfor %}
      </div>
    </div>
  </section>
</div>
