{% extends "base.html" %}
{% block title %}Vault — Organization{% endblock %}
{% block content %}
<div class="app-page-header">
  <h1><i class="fas fa-lock" aria-hidden="true"></i> Vault</h1>
  <div class="app-page-header-actions">
    <a class="btn btn-primary btn-sm" href="{{ url_for('organization_vault_new_page') }}"><i class="fas fa-plus"></i> New entry</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>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/vault_password_widget.js') }}"></script>
<script>
(async function(){
  const el = document.getElementById('out');
  const VP = window.TntVaultPassword;
  const r = await fetch('/api/portal/organization/vault-entries');
  const j = await r.json();
  if (!j.success) { el.textContent = j.error||'Failed'; return; }
  const entries = j.entries || [];
  if (!entries.length) { el.innerHTML = '<p class="muted">No vault entries.</p>'; return; }
  if (!VP) { el.textContent = 'Password widget unavailable.'; return; }
  const rows = entries.map(function(e) {
    return '<tr>' +
      '<td>' + VP.renderNameCell(e.id, e.name) + '</td>' +
      '<td>' + VP.renderUsernameCell(e.username) + '</td>' +
      '<td>' + VP.renderPasswordCell(e.id, e.has_password !== false) + '</td>' +
      '</tr>';
  }).join('');
  el.innerHTML = '<div class="table-container tnt-vault-table-wrap"><table class="client-table-simple tnt-vault-table"><thead><tr><th>Name</th><th>Username</th><th>Password</th></tr></thead><tbody>' + rows + '</tbody></table></div>';
  VP.bindContainer(el);
})();
</script>
{% endblock %}