<section>
  <div class="admin-header">
    <h1>Roles</h1>
    <a class="button button-primary" href="/admin/hr/roles/new">+ New Role</a>
  </div>

  <table class="admin-table">
    <thead>
      <tr><th>Role</th><th>Level</th><th>Staff</th><th></th></tr>
    </thead>
    <tbody>
      <% roles.forEach(function(r) { %>
        <tr>
          <td><%= r.name %><% if (r.isSystem) { %> <span class="tag tag-accepted">full access</span><% } %></td>
          <td><%= r.level %></td>
          <td><%= r.UserRoles ? r.UserRoles.length : 0 %></td>
          <td>
            <a href="/admin/hr/roles/<%= r.id %>/edit">Edit</a>
            <% if (!r.isSystem) { %>
              <form action="/admin/hr/roles/<%= r.id %>?_method=DELETE" method="POST" style="display:inline"
                    onsubmit="return confirm('Delete this role?')">
                <button type="submit">Delete</button>
              </form>
            <% } %>
          </td>
        </tr>
      <% }) %>
    </tbody>
  </table>
</section>
