<div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft" data-partner-client-list>
  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <div>
      <h2 class="text-lg font-semibold text-slate-900">Assigned Clients</h2>
      <p class="text-sm text-slate-500">Owned clients and review-assigned clients, with existing service, task and overdue totals.</p>
    </div>
    <div class="flex items-center gap-3">
      <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700" data-visible-count>{{ clients|length }} clients</span>
      <a href="/clients" class="rounded-2xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white">Manage Clients</a>
    </div>
  </div>

  <div class="mt-5 flex flex-col gap-3 sm:flex-row sm:items-end">
    <label class="min-w-0 flex-1">
      <span class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Search</span>
      <input type="search" data-client-search autocomplete="off" placeholder="Client code, name, PAN or GSTIN"
             class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-800 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100">
    </label>
    <label class="w-full sm:w-52">
      <span class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Status</span>
      <select data-client-status class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-800 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100">
        <option value="">All statuses</option>
        <option value="active" selected>Active</option>
        <option value="inactive">Inactive</option>
        <option value="archived">Archived</option>
      </select>
    </label>
    <button type="button" data-client-clear class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Clear</button>
  </div>

  <div data-client-scroll class="mt-4 max-h-[540px] overflow-auto rounded-2xl border border-slate-200">
    <table class="min-w-full divide-y divide-slate-200">
      <thead class="sticky top-0 z-10 bg-slate-50 shadow-sm">
        <tr>
          <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Code</th>
          <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Client</th>
          <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">PAN / GSTIN</th>
          <th class="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wide text-slate-500">Services</th>
          <th class="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wide text-slate-500">Tasks</th>
          <th class="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wide text-slate-500">Overdue</th>
          <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Status</th>
          <th class="px-4 py-3"></th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 bg-white">
        {% for c in clients %}
        {% set row_status = (c.status or 'active')|lower %}
        <tr data-client-row
            data-search="{{ (c.client_code ~ ' ' ~ c.client_name ~ ' ' ~ (c.pan or '') ~ ' ' ~ (c.gstin or ''))|lower|e }}"
            data-status="{{ row_status|e }}">
          <td class="whitespace-nowrap px-4 py-3 text-sm font-semibold text-slate-900">{{ c.client_code }}</td>
          <td class="px-4 py-3 text-sm text-slate-800">{{ c.client_name }}</td>
          <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ c.pan or c.gstin or '-' }}</td>
          <td class="px-4 py-3 text-center text-sm text-slate-700">{{ c.service_count }}</td>
          <td class="px-4 py-3 text-center text-sm text-slate-700">{{ c.task_count }}</td>
          <td class="px-4 py-3 text-center text-sm {% if c.overdue_count > 0 %}font-semibold text-red-700{% else %}text-slate-700{% endif %}">{{ c.overdue_count }}</td>
          <td class="whitespace-nowrap px-4 py-3 text-sm">
            {% if row_status == 'active' %}
            <span class="rounded-full bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700">Active</span>
            {% elif row_status == 'archived' %}
            <span class="rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-800">Archived</span>
            {% else %}
            <span class="rounded-full bg-slate-200 px-2 py-1 text-xs font-medium text-slate-700">Inactive</span>
            {% endif %}
          </td>
          <td class="whitespace-nowrap px-4 py-3 text-right">
            <a href="{{ c.href }}" class="text-sm font-medium text-brand-700 hover:underline">Open</a>
          </td>
        </tr>
        {% else %}
        <tr><td colspan="8" class="px-4 py-8 text-center text-sm text-slate-500">No assigned clients found.</td></tr>
        {% endfor %}
        <tr data-no-results hidden>
          <td colspan="8" class="px-4 py-8 text-center text-sm text-slate-500">No clients match the search.</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
