<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">Service Requests</h3><p class="mt-1 text-sm text-slate-500">Requests and leads raised by consultant to the firm.</p></div>
      <div class="flex flex-wrap gap-2"><a href="/consultant/service-requests" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">View All</a><a href="/consultant/service-requests/new" class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800">New Request</a></div>
    </div>
  </div>

  <section class="grid gap-6 xl:grid-cols-2">
    <div class="af-card">
      <h4 class="font-semibold text-slate-900">Pending Requests</h4>
      <div class="mt-4 space-y-3">
        {% for row in payload.pending_service_requests %}
        <a href="/consultant/service-requests/{{ row.id }}" class="block rounded-xl border border-slate-200 p-3 hover:bg-slate-50">
          <div class="font-semibold text-slate-900">{{ row.title }}</div>
          <div class="text-xs text-slate-500">{{ row.status.replace('_',' ').title() }} • {{ row.priority.replace('_',' ').title() if row.priority else 'Normal' }}</div>
          <div class="mt-2 text-xs text-slate-600">{{ row.managed_client.client_name if row.managed_client else (row.firm_client.client_name if row.firm_client else 'General request') }}</div>
        </a>
        {% else %}
        <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500">No pending service requests.</div>
        {% endfor %}
      </div>
    </div>
    <div class="af-card">
      <h4 class="font-semibold text-slate-900">Recent Requests</h4>
      <div class="mt-4 space-y-3">
        {% for row in payload.service_requests %}
        <a href="/consultant/service-requests/{{ row.id }}" class="block rounded-xl border border-slate-200 p-3 hover:bg-slate-50">
          <div class="font-semibold text-slate-900">{{ row.title }}</div>
          <div class="text-xs text-slate-500">{{ row.status.replace('_',' ').title() }} • {{ row.created_at_utc.strftime('%d-%m-%Y') if row.created_at_utc else '' }}</div>
        </a>
        {% else %}
        <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500">No service requests created.</div>
        {% endfor %}
      </div>
    </div>
  </section>
</div>
