<div class="flex flex-wrap items-center justify-between gap-3">
  <div><h3 class="text-lg font-semibold text-slate-900">My Leave</h3><p class="mt-1 text-sm text-slate-600">Leave balances and recent applications.</p></div>
  <a href="/employee/leave" class="af-btn af-btn-primary">Open Leave Page</a>
</div>
<div class="grid gap-3 md:grid-cols-3">
  {% for bal in leave_balances %}
  <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft">
    <div class="text-xs font-semibold uppercase text-slate-500">{{ bal.leave_type.name if bal.leave_type else bal.leave_type_id }}</div>
    <div class="mt-2 text-2xl font-semibold text-slate-900">{{ bal.balance_days }}</div>
    <div class="text-xs text-slate-500">days balance</div>
  </div>
  {% else %}
  <div class="rounded-2xl border border-dashed border-slate-300 bg-white p-6 text-sm text-slate-500 md:col-span-3">No leave balance available yet.</div>
  {% endfor %}
</div>
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft">
  <div class="border-b border-slate-200 px-5 py-4"><h3 class="font-semibold text-slate-900">Recent Leave Requests</h3></div>
  <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">Type</th><th class="px-4 py-3">From</th><th class="px-4 py-3">To</th><th class="px-4 py-3">Days</th><th class="px-4 py-3">Status</th></tr></thead><tbody class="divide-y divide-slate-100">
  {% for row in leave_requests %}<tr><td class="px-4 py-3">{{ row.leave_type.name if row.leave_type else row.leave_type_id }}</td><td class="px-4 py-3">{{ row.from_date }}</td><td class="px-4 py-3">{{ row.to_date }}</td><td class="px-4 py-3">{{ row.days }}</td><td class="px-4 py-3">{{ row.status.replace('_',' ').title() }}</td></tr>{% else %}<tr><td colspan="5" class="px-4 py-8 text-center text-slate-500">No leave requests available.</td></tr>{% endfor %}
  </tbody></table>
</div>
