{% extends "base/layout.html" %}{% block content %}
<div class="mx-auto max-w-7xl space-y-6 p-4 sm:p-6">
  <div class="flex flex-wrap items-center justify-between gap-3"><div><h1 class="text-2xl font-bold">Secure Credential Vault</h1><p class="text-sm text-slate-600">Encrypted client and portal credentials. Secret values are never displayed on this page.</p></div>{% if can_manage %}<a href="/credential-vault/new" class="rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white">Add credential</a>{% endif %}</div>
  <div class="grid gap-3 sm:grid-cols-3"><div class="rounded-xl bg-white p-4 shadow"><div class="text-xs text-slate-500">Visible credentials</div><div class="text-2xl font-bold">{{ counts.total }}</div></div><div class="rounded-xl bg-white p-4 shadow"><div class="text-xs text-slate-500">Rotation due soon</div><div class="text-2xl font-bold text-amber-700">{{ counts.due_soon }}</div></div><div class="rounded-xl bg-white p-4 shadow"><div class="text-xs text-slate-500">Overdue</div><div class="text-2xl font-bold text-red-700">{{ counts.overdue }}</div></div></div>
  <div class="overflow-x-auto rounded-xl bg-white shadow"><table class="min-w-full text-sm"><thead class="bg-slate-50 text-left"><tr><th class="p-3">Credential</th><th class="p-3">Client</th><th class="p-3">Category</th><th class="p-3">Rotation/expiry</th><th class="p-3">State</th><th class="p-3"></th></tr></thead><tbody>{% for entry, client, state in rows %}<tr class="border-t"><td class="p-3"><div class="font-semibold">{{ entry.title }}</div><div class="text-xs text-slate-500">{{ entry.reference_number or 'No reference number' }}</div></td><td class="p-3">{{ client.client_name if client else 'Firm credential' }}</td><td class="p-3">{{ entry.category|replace('_',' ')|title }}</td><td class="p-3">{{ entry.rotation_due_on or entry.expires_on or '-' }}</td><td class="p-3"><span class="rounded-full px-2 py-1 text-xs {% if state=='overdue' %}bg-red-100 text-red-700{% elif state=='due_soon' %}bg-amber-100 text-amber-700{% else %}bg-slate-100 text-slate-700{% endif %}">{{ state|replace('_',' ')|title }}</span></td><td class="p-3"><a class="font-semibold text-brand-700" href="/credential-vault/{{ entry.id }}">Open</a></td></tr>{% else %}<tr><td colspan="6" class="p-8 text-center text-slate-500">No credentials are visible in this workspace.</td></tr>{% endfor %}</tbody></table></div>
</div>{% endblock %}