{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="mx-auto max-w-3xl space-y-6">
  <div class="flex items-center justify-between gap-3">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">Request Employee Profile</h2>
      <p class="text-sm text-slate-500">Use this when your login user is not yet linked to an employee master.</p>
    </div>
    <a href="/employee/dashboard" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Back</a>
  </div>

  {% if employee %}
    <div class="rounded-2xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-800">Your user is already linked to employee {{ employee.employee_code }}.</div>
  {% elif pending_request %}
    <div class="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">Your request #{{ pending_request.id }} is already pending approval.</div>
  {% else %}
    {% if errors %}<div class="rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-800"><ul class="list-disc pl-5">{% for error in errors %}<li>{{ error }}</li>{% endfor %}</ul></div>{% endif %}
    {% set f = form if form is defined else {} %}
    <form method="post" class="space-y-5 rounded-2xl border border-slate-200 bg-white p-6 shadow-soft">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <div class="grid gap-4 md:grid-cols-2">
        <div><label class="mb-1 block text-sm font-medium text-slate-700">Requested Employee Code</label><input name="requested_employee_code" value="{{ f.get('requested_employee_code','') }}" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm"><p class="mt-1 text-xs text-slate-500">Optional. Admin may approve with another code.</p></div>
        <div><label class="mb-1 block text-sm font-medium text-slate-700">Full Name *</label><input name="full_name" value="{{ f.get('full_name') or current_user.full_name or '' }}" required class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm"></div>
        <div><label class="mb-1 block text-sm font-medium text-slate-700">Email</label><input type="email" name="email" value="{{ f.get('email') or current_user.email or '' }}" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm"></div>
        <div><label class="mb-1 block text-sm font-medium text-slate-700">Mobile</label><input name="mobile" value="{{ f.get('mobile','') }}" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm"></div>
        <div><label class="mb-1 block text-sm font-medium text-slate-700">Department</label><input name="department" value="{{ f.get('department','') }}" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm"></div>
        <div><label class="mb-1 block text-sm font-medium text-slate-700">Designation</label><input name="designation" value="{{ f.get('designation','') }}" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm"></div>
        <div><label class="mb-1 block text-sm font-medium text-slate-700">Date of Joining</label><input type="date" name="date_of_joining" value="{{ f.get('date_of_joining','') }}" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm"></div>
        <div class="md:col-span-2"><label class="mb-1 block text-sm font-medium text-slate-700">Remarks</label><textarea name="remarks" rows="3" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">{{ f.get('remarks','') }}</textarea></div>
      </div>
      <div class="flex justify-end"><button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Submit Request</button></div>
    </form>
  {% endif %}
</div>
{% endblock %}
