{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  {% include "modules/employees/templates/employees/_my_workspace_tabs.html" %}
  {% if errors %}<div class="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">{{ errors|join(', ') }}</div>{% endif %}
  <div><h2 class="text-xl font-semibold text-slate-900">My Documents</h2><p class="text-sm text-slate-500">Upload and track your own employee documents.</p></div>
  {% if not employee %}
    <div class="rounded-2xl border border-amber-200 bg-amber-50 p-5 text-sm text-amber-800">Your user is not linked to an employee profile. <a class="font-semibold underline" href="/employee/register">Request employee profile linkage</a>.</div>
  {% else %}
  <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
    <h3 class="mb-4 font-semibold text-slate-900">Upload Document</h3>
    <form method="post" enctype="multipart/form-data" action="/employee/documents/upload" class="grid gap-4 md:grid-cols-4">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <div><label class="text-xs font-semibold text-slate-500">Type</label><select name="document_type_id" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"><option value="">General</option>{% for dt in document_types %}<option value="{{ dt.id }}">{{ dt.code }} - {{ dt.name }}</option>{% endfor %}</select></div>
      <div><label class="text-xs font-semibold text-slate-500">Title</label><input name="title" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></div>
      <div><label class="text-xs font-semibold text-slate-500">Document No</label><input name="document_no" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></div>
      <div><label class="text-xs font-semibold text-slate-500">File</label><input type="file" name="document_file" accept="{{ employee_upload_accept }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" required><p class="mt-1 text-xs text-slate-500">{{ employee_upload_help }}</p></div>
      <div><label class="text-xs font-semibold text-slate-500">Issue Date</label><input type="date" name="issue_date" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></div>
      <div><label class="text-xs font-semibold text-slate-500">Expiry Date</label><input type="date" name="expiry_date" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></div>
      <div class="md:col-span-2"><label class="text-xs font-semibold text-slate-500">Remarks</label><input name="remarks" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></div>
      <div class="md:col-span-4"><button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Upload</button></div>
    </form>
  </div>

  <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
    <table class="min-w-full divide-y divide-slate-200 text-sm"><thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500"><tr><th class="px-4 py-3">Document</th><th class="px-4 py-3">Status</th><th class="px-4 py-3">Dates</th><th class="px-4 py-3">Remarks</th></tr></thead>
      <tbody class="divide-y divide-slate-100">{% for row in rows %}<tr><td class="px-4 py-3"><div class="font-medium">{{ row.title }}</div><div class="text-xs text-slate-500">{{ row.document_type.code if row.document_type else 'GENERAL' }} • {{ row.original_filename }}</div></td><td class="px-4 py-3"><span class="rounded-full bg-slate-100 px-2 py-1 text-xs">{{ row.status }}</span></td><td class="px-4 py-3 text-xs">Issue: {{ row.issue_date or '-' }}<br>Expiry: {{ row.expiry_date or '-' }}</td><td class="px-4 py-3 text-xs">{{ row.remarks or '' }}<br>{{ row.verification_notes or '' }}</td></tr>{% else %}<tr><td colspan="4" class="px-4 py-6 text-center text-slate-500">No documents uploaded.</td></tr>{% endfor %}</tbody>
    </table>
  </div>
  {% endif %}
</div>
{% endblock %}