<section>
  <div class="admin-header">
    <h1>Staff</h1>
    <a class="button button-primary" href="/admin/hr/staff/new">+ Add Staff</a>
  </div>

  <table class="admin-table">
    <thead>
      <tr><th>Name</th><th>Email</th><th>Job title</th><th>Roles</th><th>Status</th><th></th></tr>
    </thead>
    <tbody>
      <% users.forEach(function(u) { %>
        <tr>
          <td><%= u.name %></td>
          <td><%= u.email %></td>
          <td><%= u.jobTitle || '-' %></td>
          <td>
            <% if (u.UserRoles && u.UserRoles.length) { %>
              <% u.UserRoles.forEach(function(ur) { %><span class="tag"><%= ur.Role ? ur.Role.name : '?' %></span> <% }) %>
            <% } else { %>
              <span class="hint">No roles assigned</span>
            <% } %>
          </td>
          <td><span class="tag <%= u.isActive ? 'tag-accepted' : 'tag-declined' %>"><%= u.isActive ? 'active' : 'deactivated' %></span></td>
          <td><a href="/admin/hr/staff/<%= u.id %>/edit">Edit</a></td>
        </tr>
      <% }) %>
    </tbody>
  </table>
</section>
