{% 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">Onboarding Checklist</h1><p class="text-sm text-slate-500">Branch-wise reusable joining checklist items.</p></div>
    <form method="post" action="/employees/onboarding-checklist/defaults"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Create Defaults</button></form>
  </div>
  <div class="rounded-2xl border bg-white p-4 shadow-sm"><h2 class="mb-3 font-semibold">Add checklist item</h2>
    <form method="post" action="/employees/onboarding-checklist" class="grid gap-3 md:grid-cols-6">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input name="code" required placeholder="Code" class="rounded-xl border px-3 py-2 text-sm">
      <input name="title" required placeholder="Title" class="rounded-xl border px-3 py-2 text-sm md:col-span-2">
      <input name="stage" value="joining" class="rounded-xl border px-3 py-2 text-sm">
      <input name="default_due_days" type="number" value="0" class="rounded-xl border px-3 py-2 text-sm">
      <input name="sort_order" type="number" value="0" class="rounded-xl border px-3 py-2 text-sm">
      <textarea name="description" placeholder="Description" class="rounded-xl border px-3 py-2 text-sm md:col-span-4"></textarea>
      <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="is_mandatory" checked> Mandatory</label>
      <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="is_active" checked> Active</label>
      <button class="rounded-xl bg-blue-700 px-4 py-2 text-sm font-semibold text-white md:col-span-6">Add Item</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">Code</th><th class="p-3 text-left">Title</th><th class="p-3">Stage</th><th class="p-3">Due Days</th><th class="p-3">Status</th><th class="p-3 text-left">Update</th></tr></thead><tbody class="divide-y">
  {% for r in rows %}<tr><form method="post" action="/employees/onboarding-checklist/{{ r.id }}/edit"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><td class="p-3 font-medium">{{ r.code }}</td><td class="p-3"><input name="title" value="{{ r.title }}" class="w-full rounded-lg border px-2 py-1"><input type="hidden" name="code" value="{{ r.code }}"><textarea name="description" class="mt-2 w-full rounded-lg border px-2 py-1">{{ r.description or '' }}</textarea></td><td class="p-3"><input name="stage" value="{{ r.stage }}" class="w-28 rounded-lg border px-2 py-1"></td><td class="p-3"><input name="default_due_days" type="number" value="{{ r.default_due_days }}" class="w-20 rounded-lg border px-2 py-1"><input name="sort_order" type="hidden" value="{{ r.sort_order }}"></td><td class="p-3"><label><input type="checkbox" name="is_mandatory" {% if r.is_mandatory %}checked{% endif %}> Mandatory</label><br><label><input type="checkbox" name="is_active" {% if r.is_active %}checked{% endif %}> Active</label></td><td class="p-3"><button class="rounded-lg bg-slate-900 px-3 py-1 text-white">Save</button></td></form></tr>{% else %}<tr><td colspan="6" class="p-6 text-center text-slate-500">No checklist items yet.</td></tr>{% endfor %}
  </tbody></table></div>
</div>
{% endblock %}