{% extends "base.html" %}
{% block title %}Vault entry {{ entry_id }}{% endblock %}
{% block content %}
<div class="app-page-header">
  <h1><i class="fas fa-lock" aria-hidden="true"></i> Vault entry</h1>
  <div class="app-page-header-actions">
    <a class="btn btn-secondary btn-sm" href="{{ url_for('organization_vault_page') }}"><i class="fas fa-arrow-left"></i> Vault</a>
  </div>
</div>
<div id="out" class="filters-section" style="padding:12px;"><div class="loading-state"><div class="spinner"></div><span>Loading…</span></div></div>
<div id="passwordSection" style="display:none;padding:0 12px 12px;">
  <label class="muted" style="display:block;margin-bottom:6px;font-size:0.85rem;">Password</label>
  <div id="passwordCell"></div>
  <div id="otpSection" style="display:none;">
    <label class="muted" style="display:block;margin:10px 0 6px;font-size:0.85rem;">One-time code</label>
    <div id="otpCell" class="tnt-vault-otp-field"></div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/vault_password_widget.js') }}"></script>
<script>
(async function(){
  const el = document.getElementById('out');
  const entryId = {{ entry_id }};
  const VP = window.TntVaultPassword;
  const r = await fetch('/api/portal/organization/vault-entries/' + entryId);
  const j = await r.json();
  if (!j.success || !j.entry) { el.textContent = j.error||'Not found'; return; }
  const e = j.entry;
  el.innerHTML = '<p><strong>'+(e.name||'').replace(/</g,'&lt;')+'</strong></p>' +
    '<p class="muted">User: '+(e.username||'—')+' · URL: '+(e.url ? '<a href="'+String(e.url).replace(/"/g,'&quot;')+'" target="_blank" rel="noopener">'+(e.url||'').replace(/</g,'&lt;')+'</a>' : '—')+'</p>' +
    (e.notes ? '<pre class="muted" style="white-space:pre-wrap;margin-top:8px;">'+(e.notes||'').replace(/</g,'&lt;')+'</pre>' : '');
  const pwSection = document.getElementById('passwordSection');
  const pwCell = document.getElementById('passwordCell');
  if (pwSection && pwCell && VP && e.has_password !== false) {
    pwSection.style.display = 'block';
    pwCell.innerHTML = VP.renderPasswordCell(entryId, true);
    VP.bindContainer(pwCell);
  }
})();
</script>
{% endblock %}