<div class="flex flex-wrap items-center justify-between gap-3">
  <div><h3 class="text-lg font-semibold text-slate-900">My Payslips</h3><p class="mt-1 text-sm text-slate-600">Recently available payslips.</p></div>
  <a href="/employee/payslips" class="af-btn af-btn-primary">Open Payslips Page</a>
</div>
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
  {% for slip in payslips %}
  <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
    <div class="text-xs font-semibold uppercase text-slate-500">Payslip</div>
    <h3 class="mt-2 text-lg font-semibold text-slate-900">{{ slip.period_label if slip.period_label is defined else ('Payslip #' ~ slip.id) }}</h3>
    <p class="mt-1 text-sm text-slate-600">Status: {{ slip.status.replace('_',' ').title() if slip.status else '-' }}</p>
    <a href="/employee/payslips" class="mt-4 inline-flex af-btn af-btn-secondary">View</a>
  </div>
  {% else %}
  <div class="rounded-2xl border border-dashed border-slate-300 bg-white p-6 text-sm text-slate-500 md:col-span-2 xl:col-span-3">No payslips available yet.</div>
  {% endfor %}
</div>
