{% extends "base.html" %}
{% from "_partials/empty_state.html" import empty_state %}
{% block title %}Users — {{ library_name() }}{% endblock %}
{% block content %}
<div style="display:flex; align-items:baseline; gap:1rem; margin-bottom:1rem">
  <h2 style="margin:0">Users</h2>
  <a href="/ui/users/new" role="button" class="outline" style="padding:0.25rem 0.75rem">+ New User</a>
</div>
<form method="get" action="/ui/users" id="user-filter-form" style="margin-bottom:0.75rem; display:flex; align-items:center; gap:0.5rem">
  <label style="display:inline-flex; align-items:center; gap:0.4rem; font-size:0.9rem; cursor:pointer; margin:0">
    <input type="checkbox" id="user-include-inactive" name="include_inactive" value="1"
           {% if include_inactive %}checked{% endif %} style="margin:0">
    Include inactive users
  </label>
  <button type="submit" class="outline" style="padding:0.2rem 0.6rem; width:auto; font-size:0.85rem">Apply</button>
</form>
<script nonce="{{ csp_nonce(request) }}">
(function() {
  var cb = document.getElementById('user-include-inactive');
  if (cb) cb.addEventListener('change', function() { document.getElementById('user-filter-form').submit(); });
})();
</script>
{% if not users %}
  {{ empty_state("No users on record", "Add a user account to grant access to the system.", cta_href="/ui/users/new", cta_label="Add user") }}
{% else %}
<table class="responsive-table">
  <thead>
    <tr><th>Username</th><th>Email</th><th>Role</th><th>Status</th></tr>
  </thead>
  <tbody>
    {% for u in users %}
    <tr>
      <td data-label="Username"><a href="/ui/users/{{ u.username }}">{{ u.username }}</a></td>
      <td data-label="Email">{{ u.email or "—" }}</td>
      <td data-label="Role">{{ u.role.name }}</td>
      <td data-label="Status">{% if u.is_active %}Active{% else %}<em>Inactive</em>{% endif %}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}
{% endblock %}