<section class="project-form-shell">
  <div class="admin-header">
    <h1><%= staffUser ? 'Edit ' + staffUser.name : 'Add Staff' %></h1>
  </div>
  <% if (!staffUser) { %><p class="hint">They'll get an email with a link to set their own password - nothing to hand over manually unless email isn't configured yet.</p><% } %>

  <form method="POST" action="<%= staffUser ? '/admin/hr/staff/' + staffUser.id + '?_method=PUT' : '/admin/hr/staff' %>">
    <div class="form-grid">
      <div class="form-main">
        <div class="form-section">
          <label>
            Full name
            <input type="text" name="name" value="<%= staffUser ? staffUser.name : '' %>" required>
          </label>
          <label>
            Email
            <input type="email" name="email" value="<%= staffUser ? staffUser.email : '' %>" required>
          </label>
          <label>
            Job title
            <input type="text" name="jobTitle" value="<%= staffUser && staffUser.jobTitle ? staffUser.jobTitle : '' %>">
          </label>
          <label>
            Department
            <input type="text" name="department" value="<%= staffUser && staffUser.department ? staffUser.department : '' %>">
          </label>
          <label>
            Phone
            <input type="text" name="phone" value="<%= staffUser && staffUser.phone ? staffUser.phone : '' %>">
          </label>
          <label>
            Start date
            <input type="date" name="startDate" value="<%= staffUser && staffUser.startDate ? staffUser.startDate : '' %>">
          </label>
          <label>
            Gross monthly salary (KES) <span class="hint">(only needed once Payroll is enabled)</span>
            <input type="number" step="0.01" min="0" name="grossMonthlySalaryKes" value="<%= staffUser && staffUser.grossMonthlySalaryKes !== null && staffUser.grossMonthlySalaryKes !== undefined ? staffUser.grossMonthlySalaryKes : '' %>">
          </label>
        </div>

        <div class="form-section">
          <h3 class="form-section-title">Roles</h3>
          <p class="hint">A staff member can hold more than one - access is the union of everything their roles allow.</p>
          <% roles.forEach(function(r) { %>
            <label style="display:flex; align-items:center; gap:0.5rem; font-weight:400;">
              <input type="checkbox" name="roleIds" value="<%= r.id %>" style="width:auto;" <%= userRoleIds.map(String).indexOf(String(r.id)) !== -1 ? 'checked' : '' %>>
              <%= r.name %><% if (r.isSystem) { %> <span class="tag">full access</span><% } %>
            </label>
          <% }) %>
          <% if (!roles.length) { %><p class="hint">No roles exist yet - <a href="/admin/hr/roles/new">create one first</a>.</p><% } %>
        </div>
      </div>

      <div class="form-sidebar">
        <% if (staffUser) { %>
          <div class="form-section">
            <h3 class="form-section-title">Status</h3>
            <label style="display:flex; align-items:center; gap:0.5rem; font-weight:400;">
              <input type="checkbox" name="isActive" style="width:auto;" <%= staffUser.isActive ? 'checked' : '' %>>
              Active
            </label>
            <p class="hint">Unchecking this signs them out immediately and blocks login - their history stays intact.</p>
          </div>
          <div class="form-section">
            <h3 class="form-section-title">Account setup</h3>
            <form action="/admin/hr/staff/<%= staffUser.id %>/resend-invite" method="POST">
              <button type="submit" class="button button-secondary" style="width:100%;">Resend setup link</button>
            </form>
          </div>
        <% } %>
        <div class="form-section">
          <button type="submit" class="button button-primary form-save-button">Save staff member</button>
        </div>
      </div>
    </div>
  </form>
</section>
