{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"><div><h1 class="text-2xl font-semibold text-slate-900">Employee Onboarding</h1><p class="text-sm text-slate-500">Generate and track joining checklist tasks.</p></div><a href="/employees/onboarding-checklist" class="rounded-xl border px-4 py-2 text-sm font-semibold">Checklist Master</a></div>
  <div class="rounded-2xl border bg-white p-4 shadow-sm"><form method="get" action="/employees/onboarding" class="flex flex-wrap gap-3"><select name="employee_id" class="rounded-xl border px-3 py-2 text-sm"><option value="">All employees</option>{% for e in employees %}<option value="{{ e.id }}" {% if selected_employee_id==e.id %}selected{% endif %}>{{ e.employee_code }} - {{ e.full_name }}</option>{% endfor %}</select><button class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Filter</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 text-left">Task</th><th class="p-3">Due</th><th class="p-3">Status</th><th class="p-3 text-left">Action</th></tr></thead><tbody class="divide-y">
  {% for r in rows %}<tr><td class="p-3">{{ r.employee.full_name if r.employee else r.employee_id }}</td><td class="p-3"><div class="font-medium">{{ r.title }}</div><div class="text-xs text-slate-500">{{ r.stage }}{% if r.description %} · {{ r.description }}{% endif %}</div></td><td class="p-3 text-center">{{ r.due_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"><form method="post" action="/employees/onboarding/{{ r.id }}/status" 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">{% for st in onboarding_task_statuses %}<option value="{{ st }}" {% if r.status==st %}selected{% endif %}>{{ st }}</option>{% endfor %}</select><input name="review_notes" placeholder="Notes" class="rounded-lg border px-2 py-1"><button class="rounded-lg bg-blue-700 px-3 py-1 text-white">Update</button></form></td></tr>{% else %}<tr><td colspan="5" class="p-6 text-center text-slate-500">No onboarding tasks. Open an employee detail page and click Generate Onboarding.</td></tr>{% endfor %}
  </tbody></table></div>
</div>
{% endblock %}