{% extends "ui/templates/base/layout.html" %}
{% import "ui/templates/components/macros.html" as ui %}
{% block content %}
<div class="space-y-6">
  {{ ui.page_shell('User Management', 'Audit Firm- and branch-scoped users with filters, pagination, lifecycle controls, role bindings, and invite actions.', '<a href="/system-settings/users/new" class="inline-flex items-center justify-center rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-700">Create user</a>' if can_manage_users(current_user, current_user_permissions or []) else '') }}
  {% if flash %}{{ ui.alert(flash) }}{% endif %}

  <div class="overflow-hidden rounded-3xl bg-white shadow-soft">
    {{ ui.search_bar('/system-settings/users', filters.q, filters.per_page) }}
    {% if users %}
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-slate-200 text-sm">
        <thead class="bg-slate-50">
          <tr>
            <th class="px-4 py-3 text-left font-semibold text-slate-600">User</th>
            <th class="px-4 py-3 text-left font-semibold text-slate-600">Audit Firm / Branch</th>
            <th class="px-4 py-3 text-left font-semibold text-slate-600">Roles</th>
            <th class="px-4 py-3 text-left font-semibold text-slate-600">Lifecycle</th>
            <th class="px-4 py-3 text-right font-semibold text-slate-600">Action</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          {% for row in users %}
          <tr>
            <td class="px-4 py-4"><div class="font-medium text-slate-900">{{ row.full_name or '-' }}</div><div class="text-slate-500">{{ row.email }}</div></td>
            <td class="px-4 py-4 text-slate-600"><div>{{ tenants[row.tenant_id].name if row.tenant_id in tenants else '-' }}</div><div class="text-xs text-slate-400">{{ branches[row.branch_id].name if row.branch_id in branches else '-' }}</div></td>
            <td class="px-4 py-4"><div class="flex flex-wrap gap-2">{% for role_name in user_roles.get(row.id, []) %}{{ ui.badge(role_name, 'brand') }}{% else %}<span class="text-slate-400">No roles</span>{% endfor %}</div></td>
            <td class="px-4 py-4"><div class="flex flex-wrap gap-2">{% if row.deleted_at %}{{ ui.badge('Deleted') }}{% endif %}{% if row.is_active %}{{ ui.badge('Active','emerald') }}{% else %}{{ ui.badge('Inactive','rose') }}{% endif %}{% if row.allow_login %}{{ ui.badge('Login enabled','sky') }}{% else %}{{ ui.badge('Login disabled','amber') }}{% endif %}{% if row.is_locked %}{{ ui.badge('Locked','amber') }}{% else %}{{ ui.badge('Unlocked') }}{% endif %}</div></td>
            <td class="px-4 py-4 text-right">
              {% if "users.manage" in current_user_permissions %}
              <div class="flex flex-wrap justify-end gap-2">
                <a href="/system-settings/users/{{ row.id }}/edit" class="inline-flex rounded-xl border border-slate-300 px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50">Edit</a>
                {% if row.deleted_at %}
                <form method="post" action="/system-settings/users/{{ row.id }}/restore"><input type="hidden" name="csrf_token" value="{{ csrf_token }}" /><button class="inline-flex rounded-xl border border-slate-300 px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50">Restore</button></form>
                {% else %}
                  {% if row.is_active %}<form method="post" action="/system-settings/users/{{ row.id }}/deactivate"><input type="hidden" name="csrf_token" value="{{ csrf_token }}" /><button class="inline-flex rounded-xl border border-slate-300 px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50">Deactivate</button></form>{% else %}<form method="post" action="/system-settings/users/{{ row.id }}/activate"><input type="hidden" name="csrf_token" value="{{ csrf_token }}" /><button class="inline-flex rounded-xl border border-slate-300 px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50">Activate</button></form>{% endif %}
                  {% if row.allow_login %}<form method="post" action="/system-settings/users/{{ row.id }}/disable-login"><input type="hidden" name="csrf_token" value="{{ csrf_token }}" /><button class="inline-flex rounded-xl border border-slate-300 px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50">Disable Login</button></form>{% else %}<form method="post" action="/system-settings/users/{{ row.id }}/enable-login"><input type="hidden" name="csrf_token" value="{{ csrf_token }}" /><button class="inline-flex rounded-xl border border-slate-300 px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50">Enable Login</button></form>{% endif %}
                  {% if row.is_locked %}<form method="post" action="/system-settings/users/{{ row.id }}/unlock"><input type="hidden" name="csrf_token" value="{{ csrf_token }}" /><button class="inline-flex rounded-xl border border-slate-300 px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50">Unlock</button></form>{% else %}<form method="post" action="/system-settings/users/{{ row.id }}/lock"><input type="hidden" name="csrf_token" value="{{ csrf_token }}" /><button class="inline-flex rounded-xl border border-slate-300 px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50">Lock</button></form>{% endif %}
                  {% if "users.invite" in current_user_permissions and row.allow_login and not row.deleted_at %}<form method="post" action="/system-settings/users/{{ row.id }}/invite"><input type="hidden" name="csrf_token" value="{{ csrf_token }}" /><button class="inline-flex rounded-xl border border-slate-300 px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50">Invite</button></form>{% endif %}
                <form method="post" action="/system-settings/users/{{ row.id }}/delete"><input type="hidden" name="csrf_token" value="{{ csrf_token }}" /><button class="inline-flex rounded-xl border border-rose-300 px-3 py-2 text-xs font-medium text-rose-700 hover:bg-rose-50">Soft Delete</button></form>
                {% endif %}
              </div>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {{ ui.pagination(users_page, '/system-settings/users', request.url.query) }}
    {% else %}
      <div class="p-6">{{ ui.empty_state('No users matched the current filter.', 'Try a different search term or create a new user.') }}</div>
    {% endif %}
  </div>
</div>
{% endblock %}