<div class="flex flex-wrap items-center justify-between gap-3">
  <div><h3 class="text-lg font-semibold text-slate-900">My Documents</h3><p class="mt-1 text-sm text-slate-600">Recently uploaded employee documents and verification status.</p></div>
  <a href="/employee/documents" class="af-btn af-btn-primary">Open Documents Page</a>
</div>
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft">
  <table class="min-w-full divide-y divide-slate-200 text-sm"><thead class="bg-slate-50 text-left text-xs font-semibold uppercase text-slate-500"><tr><th class="px-4 py-3">Document</th><th class="px-4 py-3">Type</th><th class="px-4 py-3">Status</th><th class="px-4 py-3">Uploaded</th><th class="px-4 py-3">Action</th></tr></thead><tbody class="divide-y divide-slate-100">
  {% for doc in own_documents %}<tr><td class="px-4 py-3 font-medium text-slate-900">{{ doc.title or doc.file_name or ('Document #' ~ doc.id) }}</td><td class="px-4 py-3">{{ doc.document_type.name if doc.document_type else '-' }}</td><td class="px-4 py-3">{{ doc.status.replace('_',' ').title() if doc.status else '-' }}</td><td class="px-4 py-3">{{ doc.created_at.strftime('%d-%m-%Y') if doc.created_at else '-' }}</td><td class="px-4 py-3"><a href="/employee/documents" class="font-semibold text-brand-700 hover:underline">View</a></td></tr>{% else %}<tr><td colspan="5" class="px-4 py-8 text-center text-slate-500">No employee documents available yet.</td></tr>{% endfor %}
  </tbody></table>
</div>
