<div class="grid gap-6 xl:grid-cols-2">
  <div class="af-card">
    <div class="flex items-center justify-between">
      <div><h3 class="text-lg font-semibold text-slate-900">Managed Clients</h3><p class="mt-1 text-sm text-slate-500">Clients maintained by the consultant workspace.</p></div>
      <a href="/consultant/managed-clients" class="text-sm font-semibold text-brand-700 hover:underline">View all</a>
    </div>
    <div class="mt-4 space-y-3">
      {% for client in payload.managed_clients %}
      <a href="/consultant/managed-clients/{{ client.id }}" class="block rounded-xl border border-slate-200 p-3 hover:bg-slate-50">
        <div class="font-semibold text-slate-900">{{ client.client_name }}</div>
        <div class="text-xs text-slate-500">{{ client.client_code or '-' }} • {{ client.relationship_stage.replace('_',' ').title() }} • {{ client.status.replace('_',' ').title() }}</div>
        <div class="mt-2 text-xs text-slate-600">Conversion: {{ client.conversion_status.replace('_',' ').title() if client.conversion_status else 'Not Requested' }}</div>
      </a>
      {% else %}
      <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500">No managed clients yet.</div>
      {% endfor %}
    </div>
  </div>

  <div class="af-card">
    <div class="flex items-center justify-between">
      <div><h3 class="text-lg font-semibold text-slate-900">Linked Firm Clients</h3><p class="mt-1 text-sm text-slate-500">Only explicitly linked firm clients are visible.</p></div>
      <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">{{ payload.active_links|length }} active</span>
    </div>
    <div class="mt-4 space-y-3">
      {% for link in payload.active_links %}
      <div class="rounded-xl border border-slate-200 p-3">
        <div class="font-semibold text-slate-900">{{ link.client.client_name if link.client else '-' }}</div>
        <div class="text-xs text-slate-500">{{ link.client.client_code if link.client else '' }} • {{ link.relationship_type.replace('_',' ').title() }}</div>
        <div class="mt-2 flex flex-wrap gap-2 text-xs">
          <span class="rounded-full bg-slate-100 px-2 py-1 font-semibold text-slate-600">Client {{ 'visible' if link.can_view_client else 'hidden' }}</span>
          <span class="rounded-full bg-slate-100 px-2 py-1 font-semibold text-slate-600">Services {{ 'visible' if link.can_view_services else 'hidden' }}</span>
          <span class="rounded-full bg-slate-100 px-2 py-1 font-semibold text-slate-600">Due dates {{ 'visible' if link.can_view_due_dates else 'hidden' }}</span>
          <span class="rounded-full bg-slate-100 px-2 py-1 font-semibold text-slate-600">Communications {{ 'visible' if link.can_view_communications else 'hidden' }}</span>
        </div>
      </div>
      {% else %}
      <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500">No firm clients are linked yet.</div>
      {% endfor %}
    </div>
  </div>
</div>
