<div class="flex flex-wrap items-center justify-between gap-3">
  <div><h3 class="text-lg font-semibold text-slate-900">My Offboarding</h3><p class="mt-1 text-sm text-slate-600">Offboarding requests and status.</p></div>
  <a href="/employee/offboarding" class="af-btn af-btn-primary">Open Offboarding Page</a>
</div>
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft">
  <table class="min-w-full divide-y divide-slate-200 text-sm"><thead class="bg-slate-50 text-left text-xs font-semibold uppercase text-slate-500"><tr><th class="px-4 py-3">Request</th><th class="px-4 py-3">Reason</th><th class="px-4 py-3">Status</th><th class="px-4 py-3">Created</th></tr></thead><tbody class="divide-y divide-slate-100">
  {% for row in offboarding_requests %}<tr><td class="px-4 py-3 font-medium text-slate-900">#{{ row.id }}</td><td class="px-4 py-3">{{ row.reason or '-' }}</td><td class="px-4 py-3">{{ row.status.replace('_',' ').title() if row.status else '-' }}</td><td class="px-4 py-3">{{ row.created_at.strftime('%d-%m-%Y') if row.created_at else '-' }}</td></tr>{% else %}<tr><td colspan="4" class="px-4 py-8 text-center text-slate-500">No offboarding requests available.</td></tr>{% endfor %}
  </tbody></table>
</div>
