{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="mx-auto max-w-4xl space-y-6">
  <div class="flex items-center justify-between gap-3">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">Employee Registration Request #{{ item.id }}</h2>
      <p class="text-sm text-slate-500">Review and approve/reject employee self-service linkage request.</p>
    </div>
    <a href="/employees/registration-requests" 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>

  <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-soft">
    <h3 class="font-semibold text-slate-900">Request Details</h3>
    <dl class="mt-4 grid gap-4 md:grid-cols-2 text-sm">
      <div><dt class="text-slate-500">Full Name</dt><dd class="font-medium text-slate-900">{{ item.full_name }}</dd></div>
      <div><dt class="text-slate-500">Requested Code</dt><dd class="font-medium text-slate-900">{{ item.requested_employee_code or 'Auto generate' }}</dd></div>
      <div><dt class="text-slate-500">Email</dt><dd class="font-medium text-slate-900">{{ item.email or '-' }}</dd></div>
      <div><dt class="text-slate-500">Mobile</dt><dd class="font-medium text-slate-900">{{ item.mobile or '-' }}</dd></div>
      <div><dt class="text-slate-500">Department</dt><dd class="font-medium text-slate-900">{{ item.department or '-' }}</dd></div>
      <div><dt class="text-slate-500">Designation</dt><dd class="font-medium text-slate-900">{{ item.designation or '-' }}</dd></div>
      <div><dt class="text-slate-500">Status</dt><dd class="font-medium text-slate-900">{{ item.status.title() }}</dd></div>
      <div><dt class="text-slate-500">User ID</dt><dd class="font-medium text-slate-900">{{ item.user_id }}</dd></div>
      <div class="md:col-span-2"><dt class="text-slate-500">Remarks</dt><dd class="whitespace-pre-line font-medium text-slate-900">{{ item.remarks or '-' }}</dd></div>
      {% if item.review_notes %}<div class="md:col-span-2"><dt class="text-slate-500">Review Notes</dt><dd class="whitespace-pre-line font-medium text-slate-900">{{ item.review_notes }}</dd></div>{% endif %}
    </dl>
  </div>

  {% if item.status == 'pending' %}
  <div class="grid gap-6 lg:grid-cols-2">
    <form method="post" action="/employees/registration-requests/{{ item.id }}/approve" class="space-y-4 rounded-2xl border border-emerald-200 bg-emerald-50 p-6 shadow-soft">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <h3 class="font-semibold text-emerald-900">Approve Request</h3>
      <div><label class="mb-1 block text-sm font-medium text-emerald-900">Employee Code</label><input name="employee_code" value="{{ item.requested_employee_code or '' }}" placeholder="Leave blank to auto-generate" class="w-full rounded-xl border border-emerald-200 px-3 py-2 text-sm"></div>
      <div><label class="mb-1 block text-sm font-medium text-emerald-900">Review Notes</label><textarea name="review_notes" rows="3" class="w-full rounded-xl border border-emerald-200 px-3 py-2 text-sm"></textarea></div>
      <button class="rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700">Approve & Create Employee</button>
    </form>
    <form method="post" action="/employees/registration-requests/{{ item.id }}/reject" class="space-y-4 rounded-2xl border border-red-200 bg-red-50 p-6 shadow-soft">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <h3 class="font-semibold text-red-900">Reject Request</h3>
      <div><label class="mb-1 block text-sm font-medium text-red-900">Reason</label><textarea name="review_notes" rows="5" class="w-full rounded-xl border border-red-200 px-3 py-2 text-sm"></textarea></div>
      <button class="rounded-xl bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700">Reject Request</button>
    </form>
  </div>
  {% endif %}
</div>
{% endblock %}