{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div><h1 class="text-2xl font-semibold text-slate-900">Employee Offboarding</h1><p class="text-sm text-slate-500">Manage resignation, handover and relieving checklist.</p></div>
  <div class="rounded-2xl border bg-white p-4 shadow-sm"><h2 class="mb-3 font-semibold">Initiate offboarding</h2><form method="post" id="offboardForm" class="grid gap-3 md:grid-cols-6"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><select name="employee_id" onchange="document.getElementById('offboardForm').action='/employees/'+this.value+'/offboarding/initiate'" required class="rounded-xl border px-3 py-2 text-sm md:col-span-2"><option value="">Select employee</option>{% for e in employees %}<option value="{{ e.id }}">{{ e.employee_code }} - {{ e.full_name }}</option>{% endfor %}</select><select name="request_type" class="rounded-xl border px-3 py-2 text-sm"><option value="resignation">Resignation</option><option value="termination">Termination</option><option value="contract_end">Contract End</option></select><input type="date" name="requested_relieving_date" class="rounded-xl border px-3 py-2 text-sm"><input name="reason" placeholder="Reason" class="rounded-xl border px-3 py-2 text-sm md:col-span-2"><textarea name="handover_notes" placeholder="Handover notes" class="rounded-xl border px-3 py-2 text-sm md:col-span-5"></textarea><button class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Create Request</button></form></div>
  <div class="overflow-hidden rounded-2xl border bg-white shadow-sm"><table class="min-w-full divide-y text-sm"><thead class="bg-slate-50"><tr><th class="p-3 text-left">Employee</th><th class="p-3">Requested Date</th><th class="p-3">Status</th><th class="p-3 text-left">Review / Completion</th></tr></thead><tbody class="divide-y">
  {% for r in rows %}<tr><td class="p-3"><div class="font-medium">{{ r.employee.full_name if r.employee else r.employee_id }}</div><div class="text-xs text-slate-500">{{ r.request_type }}{% if r.reason %} · {{ r.reason }}{% endif %}</div></td><td class="p-3 text-center">{{ r.requested_relieving_date or '-' }}</td><td class="p-3 text-center"><span class="rounded-full bg-slate-100 px-2 py-1 text-xs">{{ r.status }}</span></td><td class="p-3 space-y-2">{% if r.status in ['pending','approved'] %}<form method="post" action="/employees/offboarding/{{ r.id }}/review" class="flex flex-wrap gap-2"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><select name="status" class="rounded-lg border px-2 py-1"><option value="approved">Approve</option><option value="rejected">Reject</option></select><input type="date" name="approved_relieving_date" value="{{ r.approved_relieving_date or r.requested_relieving_date or '' }}" class="rounded-lg border px-2 py-1"><input name="review_notes" placeholder="Review notes" class="rounded-lg border px-2 py-1"><button class="rounded-lg bg-blue-700 px-3 py-1 text-white">Submit</button></form>{% endif %}{% if r.status == 'approved' %}<form method="post" action="/employees/offboarding/{{ r.id }}/complete"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="rounded-lg bg-emerald-700 px-3 py-1 text-white">Complete Final Offboarding</button></form>{% endif %}</td></tr>{% else %}<tr><td colspan="4" class="p-6 text-center text-slate-500">No offboarding requests.</td></tr>{% endfor %}
  </tbody></table></div>
</div>
{% endblock %}