<div class="rounded-3xl border border-slate-200 bg-white shadow-soft">
  <div class="flex flex-col gap-3 border-b border-slate-100 p-5 xl:flex-row xl:items-center xl:justify-between">
    <div>
      <h2 class="text-lg font-bold text-slate-900">Users & Roles</h2>
      <p class="text-sm text-slate-500">Firm Admin controls user invitations, branch mapping, employee linking and role mapping.</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="/firm-admin/users/new?role=partner" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">+ Add Partner</a>
      <a href="/firm-admin/users/new?role=manager" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">+ Add Manager</a>
      <a href="/firm-admin/users/new?role=staff" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">+ Add Staff</a>
      <a href="/firm-admin/users/new?role=consultant" class="rounded-xl bg-violet-600 px-4 py-2 text-sm font-semibold text-white hover:bg-violet-700">+ Add Consultant</a>
      <a href="/firm-admin/users/import" class="rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700">Import Users</a>
      <a href="/firm-admin/users/import/template" class="rounded-xl border border-emerald-200 px-4 py-2 text-sm font-semibold text-emerald-700 hover:bg-emerald-50">Template</a>
      <a href="/system-settings/users" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Manage Users</a>
    </div>
  </div>
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-slate-100 text-sm">
      <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
        <tr>
          <th class="px-5 py-3">User</th>
          <th class="px-5 py-3">Roles</th>
          <th class="px-5 py-3">Employee Link</th>
          <th class="px-5 py-3">Login Status</th>
          <th class="px-5 py-3">Designation</th>
          <th class="px-5 py-3">Mobile</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100">
        {% for user in users %}
        <tr class="hover:bg-slate-50">
          <td class="px-5 py-3"><div class="font-semibold text-slate-900">{{ user.name }}</div><div class="text-xs text-slate-500">{{ user.email }}</div></td>
          <td class="px-5 py-3"><div class="flex flex-wrap gap-1">{% for role in user.roles %}<span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">{{ role }}</span>{% else %}<span class="text-xs text-amber-700">No role</span>{% endfor %}</div></td>
          <td class="px-5 py-3 text-xs">
            {% if user.employee_linked %}
            <span class="rounded-full bg-emerald-50 px-2 py-1 font-semibold text-emerald-700">Linked</span>
            <div class="mt-1 text-slate-500">{{ user.employee_code or ('#' ~ user.employee_id) }}</div>
            {% else %}
            <span class="rounded-full bg-amber-50 px-2 py-1 font-semibold text-amber-700">Not linked</span>
            {% endif %}
          </td>
          <td class="px-5 py-3 text-xs"><span class="rounded-full px-2 py-1 font-semibold {% if user.is_active and user.allow_login and not user.is_locked %}bg-emerald-50 text-emerald-700{% else %}bg-red-50 text-red-700{% endif %}">{% if user.is_locked %}Locked{% elif not user.is_active %}Inactive{% elif not user.allow_login %}Login Blocked{% else %}Active{% endif %}</span>{% if user.must_change_password %}<div class="mt-1 font-semibold text-amber-700">Invite/password pending</div>{% endif %}</td>
          <td class="px-5 py-3 text-slate-600">{{ user.designation or '-' }}</td>
          <td class="px-5 py-3 text-slate-600">{{ user.mobile or '-' }}</td>
        </tr>
        {% else %}
        <tr><td colspan="6" class="px-5 py-8 text-center text-slate-500">No users found.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
