<section>
  <div class="admin-header">
    <h1>Payroll - <%= month %>/<%= year %></h1>
    <a class="button button-secondary" href="/admin/hr/payroll">Back to Payroll</a>
  </div>

  <table class="admin-table">
    <thead>
      <tr><th>Staff</th><th>Gross</th><th>PAYE</th><th>NSSF</th><th>SHIF</th><th>Housing Levy</th><th>Total deductions</th><th>Net pay</th></tr>
    </thead>
    <tbody>
      <% records.forEach(function(r) { %>
        <tr>
          <td><%= r.User ? r.User.name : '-' %></td>
          <td><%= Number(r.grossSalary).toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></td>
          <td><%= Number(r.payeAmount).toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></td>
          <td><%= Number(r.nssfAmount).toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></td>
          <td><%= Number(r.shifAmount).toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></td>
          <td><%= Number(r.housingLevyAmount).toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></td>
          <td><%= Number(r.totalDeductions).toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></td>
          <td><strong><%= Number(r.netPay).toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></strong></td>
        </tr>
      <% }) %>
      <tr>
        <td><strong>Totals</strong></td>
        <td><strong><%= totals.grossSalary.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></strong></td>
        <td><strong><%= totals.payeAmount.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></strong></td>
        <td><strong><%= totals.nssfAmount.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></strong></td>
        <td><strong><%= totals.shifAmount.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></strong></td>
        <td><strong><%= totals.housingLevyAmount.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></strong></td>
        <td><strong><%= totals.totalDeductions.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></strong></td>
        <td><strong><%= totals.netPay.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></strong></td>
      </tr>
    </tbody>
  </table>
</section>
