{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  {% include "modules/employees/templates/employees/_my_workspace_tabs.html" %}
  <div><h1 class="text-2xl font-semibold text-slate-900">My Offboarding</h1><p class="text-sm text-slate-500">Submit resignation/offboarding request and track status.</p></div>
  {% if not employee %}<div class="rounded-2xl border bg-amber-50 p-4 text-sm text-amber-800">Employee profile is not linked. Please request employee profile first.</div>{% else %}
  <div class="rounded-2xl border bg-white p-4 shadow-sm"><form method="post" action="/employee/offboarding/request" class="grid gap-3 md:grid-cols-4"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><select name="request_type" class="rounded-xl border px-3 py-2 text-sm"><option value="resignation">Resignation</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-3"></textarea><button class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Submit Request</button></form></div>
  {% endif %}
  <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">Type</th><th class="p-3">Requested Date</th><th class="p-3">Approved Date</th><th class="p-3">Status</th><th class="p-3 text-left">Notes</th></tr></thead><tbody class="divide-y">{% for r in rows %}<tr><td class="p-3">{{ r.request_type }}</td><td class="p-3 text-center">{{ r.requested_relieving_date or '-' }}</td><td class="p-3 text-center">{{ r.approved_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 text-xs text-slate-500">{{ r.review_notes or r.handover_notes or '-' }}</td></tr>{% else %}<tr><td colspan="5" class="p-6 text-center text-slate-500">No requests yet.</td></tr>{% endfor %}</tbody></table></div>
</div>
{% endblock %}