{% extends "ui/templates/base/layout.html" %}
{% block content %}

<div class="space-y-6">
  {% include "modules/employees/templates/employees/_my_workspace_tabs.html" %}<div class="flex flex-wrap items-center justify-between gap-3"><div><h2 class="text-xl font-semibold text-slate-900">My Leave</h2><p class="text-sm text-slate-500">Apply for leave and track approval status.</p></div></div>{% if not employee %}<div class="rounded-2xl border border-amber-200 bg-amber-50 p-6 text-sm text-amber-900">Your login user is not linked to an employee profile. Please request employee linkage first.</div>{% else %}<div class="grid gap-4 md:grid-cols-3">{% for bal in 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-1 text-2xl font-semibold text-slate-900">{{ bal.balance_days }}</div><div class="text-xs text-slate-500">Availed {{ bal.availed_days }} days</div></div>{% else %}<div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft text-sm text-slate-600">No leave balance available yet.</div>{% endfor %}</div><form method="post" action="/employee/leave/apply" class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><h3 class="font-semibold text-slate-900">Apply Leave</h3><div class="mt-4 grid gap-3 md:grid-cols-4"><select name="leave_type_id" required class="rounded-xl border border-slate-300 px-3 py-2 text-sm"><option value="">Leave type</option>{% for lt in leave_types %}<option value="{{ lt.id }}">{{ lt.code }} - {{ lt.name }}</option>{% endfor %}</select><input type="date" name="from_date" required class="rounded-xl border border-slate-300 px-3 py-2 text-sm"><input type="date" name="to_date" required class="rounded-xl border border-slate-300 px-3 py-2 text-sm"><input name="reason" placeholder="Reason" class="rounded-xl border border-slate-300 px-3 py-2 text-sm"></div><button class="mt-4 rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Submit Leave Request</button></form><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 tracking-wide text-slate-500"><tr><th class="px-4 py-3">Leave</th><th class="px-4 py-3">Period</th><th class="px-4 py-3">Days</th><th class="px-4 py-3">Status</th><th class="px-4 py-3">Reason</th><th class="px-4 py-3 text-right">Action</th></tr></thead><tbody class="divide-y divide-slate-100">{% for row in rows %}<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 }} to {{ row.to_date }}</td><td class="px-4 py-3">{{ row.days }}</td><td class="px-4 py-3">{{ row.status.title() }}</td><td class="px-4 py-3 text-slate-600">{{ row.reason or row.review_notes or '-' }}</td><td class="px-4 py-3 text-right">{% if row.status == 'pending' %}<form method="post" action="/employee/leave/{{ row.id }}/cancel"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="rounded-lg border border-slate-300 px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50">Cancel</button></form>{% else %}-{% endif %}</td></tr>{% else %}<tr><td colspan="6" class="px-4 py-8 text-center text-slate-500">No leave requests found.</td></tr>{% endfor %}</tbody></table></div>{% endif %}</div>

{% endblock %}