<section>
  <div class="admin-header">
    <h1>Access Matrix</h1>
  </div>
  <p class="hint">What each role can access. The Administrator role always has everything, regardless of what's checked here - it's not editable. A role's name, level, job description, duties and KPIs are edited from <a href="/admin/hr/roles">HR &amp; Team &rarr; Roles</a> instead; this page only controls what a role is allowed to do.</p>

  <% if (!roles.length) { %>
    <div class="dash-empty-state">
      <p>No roles exist yet - <a href="/admin/hr/roles/new">create one first</a>.</p>
    </div>
  <% } else { %>
    <form method="POST" action="/admin/system/access-matrix">
      <div class="matrix-wrap">
        <table class="admin-table matrix-table">
          <thead>
            <tr>
              <th>Capability</th>
              <% roles.forEach(function(r) { %>
                <th><%= r.name %></th>
              <% }) %>
            </tr>
          </thead>
          <tbody>
            <% capabilityGroups.forEach(function(group) { %>
              <tr class="matrix-group-row"><td colspan="<%= roles.length + 1 %>"><%= group.module %></td></tr>
              <% group.capabilities.forEach(function(cap) { %>
                <tr>
                  <td>
                    <strong><%= cap.label %></strong><br>
                    <span class="hint"><%= cap.description %></span>
                  </td>
                  <% roles.forEach(function(r) { %>
                    <td class="matrix-cell">
                      <% if (r.isSystem) { %>
                        <input type="checkbox" checked disabled title="Always granted">
                      <% } else { %>
                        <input type="checkbox" name="grants[<%= r.id %>][<%= cap.key %>]"
                          <%= grants[r.id] && grants[r.id].has(cap.key) ? 'checked' : '' %>>
                      <% } %>
                    </td>
                  <% }) %>
                </tr>
              <% }) %>
            <% }) %>
          </tbody>
        </table>
      </div>
      <button type="submit" class="button button-primary" style="margin-top:1rem;">Save access matrix</button>
    </form>
  <% } %>
</section>
