{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  {% include "modules/employees/templates/employees/_my_workspace_tabs.html" %}
  <div class="flex flex-wrap items-center justify-between gap-3"><div><h2 class="text-xl font-semibold text-slate-900">My Payslips</h2><p class="text-sm text-slate-500">View your generated monthly payslips.</p></div></div>
  {% if not employee %}<div class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">Your user is not linked to an employee profile.</div>{% else %}
  <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"><table class="min-w-full divide-y divide-slate-200 text-sm"><thead class="bg-slate-50"><tr><th class="px-4 py-3 text-left">Period</th><th class="px-4 py-3 text-right">Gross</th><th class="px-4 py-3 text-right">Deductions</th><th class="px-4 py-3 text-right">Net Pay</th><th class="px-4 py-3 text-left">Status</th></tr></thead><tbody class="divide-y divide-slate-100">{% for row in rows %}<tr><td class="px-4 py-3 font-medium">{{ '%02d' % row.pay_month }}/{{ row.pay_year }}</td><td class="px-4 py-3 text-right">{{ row.gross_amount }}</td><td class="px-4 py-3 text-right">{{ row.deduction_amount }}</td><td class="px-4 py-3 text-right font-semibold">{{ row.net_amount }}</td><td class="px-4 py-3">{{ row.status.title() }}</td></tr>{% else %}<tr><td colspan="5" class="px-4 py-6 text-center text-slate-500">No payslips generated yet.</td></tr>{% endfor %}</tbody></table></div>
  {% endif %}
</div>
{% endblock %}