{% extends "base.html" %}
{% block title %}Org API keys{% endblock %}
{% block content %}
<div class="app-page-header">
  <h1><i class="fas fa-key" aria-hidden="true"></i> Organization API keys</h1>
</div>
<p class="muted" style="margin-bottom:12px;">Superadmin, admin, and owner only. Keys are scoped to tools and client-portal scopes.</p>
<div id="list" class="filters-section" style="padding:12px;"><div class="loading-state"><div class="spinner"></div><span>Loading…</span></div></div>
<details class="widget" open style="margin-top:16px;">
  <summary><i class="fas fa-plus" aria-hidden="true"></i> Create key</summary>
  <div style="padding-top:12px;">
<form id="nf" style="max-width:520px;">
  <div class="form-group"><label>Name</label><input id="kname" required style="width:100%"></div>
  <div class="form-group"><label>Scopes (comma-separated)</label><input id="scopes" style="width:100%" placeholder="client:org:summary:read,client:org:tickets:read"></div>
  <button type="submit" class="btn btn-primary btn-sm">Create</button>
</form>
<pre id="created" class="muted" style="margin-top:12px;word-break:break-all"></pre>
  </div>
</details>
<script>
(async function load(){
  const el = document.getElementById('list');
  const r = await fetch('/api/portal/organization/api-keys');
  const j = await r.json();
  if (!j.success) { el.textContent = j.error||JSON.stringify(j); return; }
  const rows = (j.api_keys||[]).map(k => '<tr><td>'+k.id+'</td><td>'+(k.name||'')+'</td><td>'+(k.key_prefix||'')+'…</td><td>'+(k.scopes_raw||k.scopes||'')+'</td></tr>').join('');
  el.innerHTML = '<div class="table-container"><table class="client-table-simple"><thead><tr><th>ID</th><th>Name</th><th>Prefix</th><th>Scopes</th></tr></thead><tbody>'+(rows||'<tr><td colspan="4">None</td></tr>')+'</tbody></table></div>';
})();
document.getElementById('nf').onsubmit = async function(ev){
  ev.preventDefault();
  const raw = document.getElementById('scopes').value;
  const scopes = raw.split(',').map(s => s.trim()).filter(Boolean);
  const r = await fetch('/api/portal/organization/api-keys', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ name: document.getElementById('kname').value, scopes: scopes })
  });
  const j = await r.json();
  document.getElementById('created').textContent = j.api_key ? ('SAVE THIS KEY ONCE: '+j.api_key) : JSON.stringify(j, null, 2);
  location.reload();
};
</script>
{% endblock %}