<section class="project-form-shell">
  <div class="admin-header">
    <h1><%= role ? 'Edit ' + role.name : 'New Role' %></h1>
  </div>
  <% if (role && role.isSystem) { %><p class="hint">This is the system Administrator role - it always has every capability. Its name, level, and job description can still be edited.</p><% } %>

  <form method="POST" action="<%= role ? '/admin/hr/roles/' + role.id + '?_method=PUT' : '/admin/hr/roles' %>">
    <div class="form-grid">
      <div class="form-main">
        <div class="form-section">
          <label>
            Role name
            <input type="text" name="name" value="<%= role ? role.name : '' %>" required placeholder="e.g. Finance Manager">
          </label>
          <label>
            Level <span class="hint">(lower = more senior - just for sorting/display)</span>
            <input type="number" name="level" value="<%= role ? role.level : 10 %>" required>
          </label>
          <label>
            Job description
            <textarea name="jobDescription" rows="4"><%= role && role.jobDescription ? role.jobDescription : '' %></textarea>
          </label>
          <label>
            Key duties <span class="hint">(one per line)</span>
            <textarea name="keyDuties" rows="5"><%= role && role.keyDuties ? role.keyDuties : '' %></textarea>
          </label>
          <label>
            KPIs <span class="hint">(one per line)</span>
            <textarea name="kpis" rows="4"><%= role && role.kpis ? role.kpis : '' %></textarea>
          </label>
        </div>

        <% if (role) { %>
        <div class="form-section">
          <h3 class="form-section-title">Capabilities</h3>
          <p class="hint">
            What this role can access - edited from
            <% if (typeof currentUser !== 'undefined' && currentUser && currentUser.isSuperAdmin) { %>
              <a href="/admin/system/access-matrix">System &gt; Access Matrix</a>
            <% } else { %>
              System &gt; Access Matrix (ask an administrator)
            <% } %>
            , not here - keeps granting someone the ability to edit roles from also letting them expand what those roles can do.
          </p>
          <% if (!roleCapabilities.length) { %>
            <p class="hint">No capabilities granted yet.</p>
          <% } else { %>
            <ul style="margin:0; padding-left:1.2rem;">
              <% roleCapabilities.forEach(function(cap) { %>
                <li><strong><%= cap.label %></strong> <span class="hint">(<%= cap.module %>)</span></li>
              <% }) %>
            </ul>
          <% } %>
        </div>
        <% } %>
      </div>

      <div class="form-sidebar">
        <div class="form-section">
          <button type="submit" class="button button-primary form-save-button">Save role</button>
        </div>
      </div>
    </div>
  </form>
</section>
