{% extends "base/layout.html" %}
{% block content %}
<div class="mx-auto max-w-4xl p-4 sm:p-6">
  <div class="mb-5">
    <h1 class="text-2xl font-bold">Add encrypted credential</h1>
    {% if selected_registration %}
    <p class="mt-1 text-sm text-slate-600">Linked to registration <strong>{{ selected_registration.registration_number }}</strong>. Secrets remain encrypted and reveal access is audited.</p>
    {% endif %}
  </div>
  <form method="post" class="grid gap-4 rounded-xl bg-white p-6 shadow sm:grid-cols-2">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <label class="sm:col-span-2">Title<input required name="title" class="mt-1 w-full rounded-lg border p-2" placeholder="e.g. GST Portal - Main Login"></label>
    <label>Credential type
      <select name="category" class="mt-1 w-full rounded-lg border p-2">
        <option value="gst_portal">GST Portal</option>
        <option value="income_tax_portal">Income Tax Portal</option>
        <option value="traces_tds">TRACES / TDS</option>
        <option value="mca_portal">MCA Portal</option>
        <option value="eway_bill">E-Way Bill</option>
        <option value="einvoice">E-Invoice</option>
        <option value="government_portal">Other Government Portal</option>
        <option value="banking">Banking</option>
        <option value="email">Email</option>
        <option value="software">Software</option>
        <option value="api_key">API key</option>
        <option value="digital_signature">Digital signature</option>
        <option value="other">Other</option>
      </select>
    </label>
    <label>Sensitivity<select name="sensitivity" class="mt-1 w-full rounded-lg border p-2"><option>high</option><option>critical</option><option>standard</option></select></label>
    <label>Client
      <select name="client_id" id="vault-client" class="mt-1 w-full rounded-lg border p-2">
        <option value="">Firm-level credential</option>
        {% for c in clients %}<option value="{{ c.id }}" {% if selected_client_id and c.id == selected_client_id %}selected{% endif %}>{{ c.client_name }}</option>{% endfor %}
      </select>
    </label>
    <label>Registration record
      <select name="registration_id" id="vault-registration" class="mt-1 w-full rounded-lg border p-2">
        <option value="">Not linked</option>
        {% for r in registrations %}<option value="{{ r.id }}" data-client-id="{{ r.client_id }}" {% if selected_registration_id and r.id == selected_registration_id %}selected{% endif %}>{{ r.registration_number }}</option>{% endfor %}
      </select>
    </label>
    <label class="sm:col-span-2">Portal URL<input name="portal_url" type="url" class="mt-1 w-full rounded-lg border p-2"></label>
    <label>Reference number<input name="reference_number" class="mt-1 w-full rounded-lg border p-2" placeholder="GSTIN / TAN / CIN / login reference"></label>
    <label>Username/login ID<input name="username" autocomplete="off" class="mt-1 w-full rounded-lg border p-2"></label>
    <label>Secret/password/token<input required name="secret" type="password" autocomplete="new-password" class="mt-1 w-full rounded-lg border p-2"></label>
    <label>Additional secret/PIN<input name="additional_secret" type="password" autocomplete="new-password" class="mt-1 w-full rounded-lg border p-2"></label>
    <label>Expires on<input name="expires_on" type="date" class="mt-1 w-full rounded-lg border p-2"></label>
    <label>Rotation due on<input name="rotation_due_on" type="date" class="mt-1 w-full rounded-lg border p-2"></label>
    <label>Owner<select name="owner_user_id" class="mt-1 w-full rounded-lg border p-2"><option value="">Current user</option>{% for u in users %}<option value="{{ u.id }}">{{ u.full_name or u.email }}</option>{% endfor %}</select></label>
    <fieldset><legend>Explicit staff access</legend><div class="mt-1 max-h-32 overflow-auto rounded-lg border p-2">{% for u in users %}<label class="block text-sm"><input type="checkbox" name="allowed_user_ids" value="{{ u.id }}"> {{ u.full_name or u.email }}</label>{% endfor %}</div></fieldset>
    <label class="sm:col-span-2">Encrypted notes<textarea name="notes" rows="3" class="mt-1 w-full rounded-lg border p-2"></textarea></label>
    <div class="sm:col-span-2 flex gap-2"><button class="rounded-lg bg-brand-600 px-4 py-2 font-semibold text-white">Save securely</button><a href="/credential-vault" class="rounded-lg border px-4 py-2">Cancel</a></div>
  </form>
</div>
<script>
(() => {
  const client = document.getElementById('vault-client');
  const registration = document.getElementById('vault-registration');
  if (!client || !registration) return;
  const filterRegistrations = () => {
    const cid = client.value;
    Array.from(registration.options).forEach((opt, idx) => {
      if (idx === 0) { opt.hidden = false; return; }
      opt.hidden = !!cid && opt.dataset.clientId !== cid;
    });
    const selected = registration.selectedOptions[0];
    if (selected && selected.hidden) registration.value = '';
  };
  client.addEventListener('change', filterRegistrations);
  filterRegistrations();
})();
</script>
{% endblock %}