<% layout('layouts/main') %>
<% const staffBase = typeof staffBaseUrl !== 'undefined' ? staffBaseUrl : '/agenda'; %>
<div class="app-shell">
  <%- partial('partials/staff-nav') %>
  <section class="content">
    <div class="page-head">
      <div>
        <p class="eyebrow">Portail employé</p>
        <h1>Mes fiches de salaire</h1>
        <p class="muted">Téléchargement sécurisé des fiches publiées par l’entreprise.</p>
      </div>
      <a class="button secondary" href="<%= staffBase %>/absences">Mes absences</a>
    </div>

    <section class="panel">
      <div class="table-wrap">
        <table>
          <thead><tr><th>Période</th><th>Brut</th><th>Retenues</th><th>Net</th><th>Statut</th><th></th></tr></thead>
          <tbody>
            <% payslips.forEach((payslip) => { %>
              <tr>
                <td><strong><%= payslip.period_month %></strong><br><span class="muted">Paiement <%= ui.date(payslip.payment_date) %></span></td>
                <td><%= ui.money(payslip.gross_salary) %></td>
                <td><%= ui.money(payslip.employee_deductions) %></td>
                <td><strong><%= ui.money(payslip.net_salary) %></strong></td>
                <td><span class="badge"><%= ui.label(payslip.status) %></span></td>
                <td><a class="button small secondary" href="<%= staffBase %>/fiches-salaires/<%= payslip.id %>/pdf" target="_blank" rel="noopener">PDF</a></td>
              </tr>
            <% }) %>
            <% if (!payslips.length) { %>
              <tr><td colspan="6">Aucune fiche de salaire disponible pour le moment.</td></tr>
            <% } %>
          </tbody>
        </table>
      </div>
    </section>
  </section>
</div>
