{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-wrap items-center justify-between gap-3"><div><h2 class="text-xl font-semibold text-slate-900">Employee Payslips</h2><p class="text-sm text-slate-500">Review generated payroll slips for employees.</p></div><a href="/employees/payroll/runs" class="rounded-xl border px-4 py-2 text-sm font-semibold">Payroll Runs</a></div>
  <form method="get" class="grid gap-3 rounded-2xl border border-slate-200 bg-white p-4 md:grid-cols-4"><select name="payroll_run_id" class="rounded-xl border px-3 py-2 text-sm"><option value="">All Runs</option>{% for run in runs %}<option value="{{ run.id }}" {% if selected_run_id == run.id %}selected{% endif %}>{{ '%02d' % run.pay_month }}/{{ run.pay_year }} - {{ run.status }}</option>{% endfor %}</select><select name="employee_id" class="rounded-xl border px-3 py-2 text-sm"><option value="">All Employees</option>{% for emp in employees %}<option value="{{ emp.id }}" {% if selected_employee_id == emp.id %}selected{% endif %}>{{ emp.employee_code }} - {{ emp.full_name }}</option>{% endfor %}</select><button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white">Filter</button></form>
  <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-left">Employee</th><th class="px-4 py-3 text-right">Gross</th><th class="px-4 py-3 text-right">Deduction</th><th class="px-4 py-3 text-right">Net</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">{{ '%02d' % row.pay_month }}/{{ row.pay_year }}</td><td class="px-4 py-3 font-medium">{{ row.employee.employee_code if row.employee else row.employee_id }} - {{ row.employee.full_name if row.employee else '' }}</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="6" class="px-4 py-6 text-center text-slate-500">No payslips available.</td></tr>{% endfor %}</tbody></table></div>
</div>
{% endblock %}