{% import 'ui/kit.html' as kit %}{% import 'ui/broker/_fmt.html' as fmt %}
{%- set tabs = [('access', 'Access'), ('users', 'Users'), ('secrets', 'App secrets'), ('delivery', 'Delivery'), ('danger', 'Danger zone')] %}
{% call kit.modal('Settings', 'amebo') %}
<div class="modal-body">
  {{ fmt.flash(message, tone) }}
  <div class="tabs">
    {%- for key, label in tabs %}<button class="{{ 'active' if key == tab else '' }}" onclick="dgTab(this,'{{ key }}')">{{ label }}</button>{% endfor %}
  </div>
  <div class="tabpane{{ ' active' if tab == 'access' else '' }}" id="tab-access">
    <div class="field"><label>Admin API key</label>
      <p class="hint" style="margin-top:0">Superadmin key (x-amebo-admin-key) for automation and break-glass access to every /v1 endpoint. Treat it like a password.</p>
      <div class="codebox"><code id="adminkey" data-real="{{ admin_key }}" data-masked="{{ masked }}">{{ masked }}</code>
        <button class="btn btn-sm btn-ghost" onclick="var c=document.getElementById('adminkey'); c.textContent = c.textContent.indexOf('...')>=0 ? c.dataset.real : c.dataset.masked">reveal</button>
        <button class="btn btn-sm btn-ghost" onclick="navigator.clipboard.writeText(document.getElementById('adminkey').dataset.real)">copy</button>
        <form action="/dash/settings/rotate-key" method="post" onsubmit="return confirm('Rotate the admin key? Every client using it must be updated.') && dj.submit(this, '#modal')" style="display:inline"><button class="btn btn-sm btn-danger">rotate</button></form>
      </div>
    </div>
    <div class="kv" style="margin-top:18px">
      <div class="k">Signature</div><div>HMAC-SHA256 over the JSON body (orjson-serialized), optionally bound to x-amebo-timestamp</div>
      <div class="k">Envelope</div><div class="mono">{ action, metadata, payload }</div>
      <div class="k">Sessions</div><div>signed cookie (HttpOnly), per-action ACLs</div>
    </div>
  </div>
  <div class="tabpane{{ ' active' if tab == 'users' else '' }}" id="tab-users">
    <p class="hint" style="margin-top:0">Accounts that can sign in and be granted per-action access. Local users authenticate with a password here; LDAP users bind against your directory.</p>
    <form action="/dash/users" method="post" onsubmit="dj.submit(this, '#list-users'); this.reset(); return false" autocomplete="off">
      <div class="field-row3">
        <div class="field"><label>Username</label><input name="username" placeholder="username / LDAP uid" autocomplete="off" required></div>
        <div class="field"><label>Password</label><input type="password" name="password" placeholder="local users only" autocomplete="new-password"></div>
        <div class="field"><label>Source</label><select name="source"><option value="local">Local</option><option value="ldap">LDAP</option></select></div>
      </div>
      <div class="form-actions">
        <label class="acl-cb"><input type="checkbox" name="superadmin"> Superadmin</label>
        <button class="btn btn-primary">Add user</button>
      </div>
    </form>
    <div class="list-page" data-tkey="users" style="margin-top:18px">
      <div class="toolbar" data-toolbar="users">
        <div class="grow"></div>
        <div class="sel-actions" data-selbar="users" hidden>
          <span class="sel-n">0 selected</span>
          <button class="btn btn-sm btn-danger" onclick="dashBulk('users','/dash/users/delete-many')">Remove</button>
          <button class="btn btn-sm btn-ghost" onclick="dashClear('users')">Clear</button>
        </div>
      </div>
      <div id="list-users">{% with message='', tone='ok' %}{% include 'ui/broker/_users_list.html' %}{% endwith %}</div>
    </div>
  </div>
  <div class="tabpane{{ ' active' if tab == 'secrets' else '' }}" id="tab-secrets">
    <p class="hint" style="margin-top:0">Each app's secret signs its publishes and outbound webhooks. Rotate carefully.</p>
    <div id="list-secrets">{% with message='', tone='ok' %}{% include 'ui/broker/_secrets_list.html' %}{% endwith %}</div>
  </div>
  <div class="tabpane{{ ' active' if tab == 'delivery' else '' }}" id="tab-delivery">
    <p class="hint" style="margin-top:0">Delivery policy. The default max retries applies to any new subscription that doesn't set its own.</p>
    <form action="/dash/settings/delivery" method="post" onsubmit="return dj.submit(this, '#modal')" class="field">
      <label>Default max retries</label>
      <div style="display:flex;gap:8px;align-items:center;max-width:280px">
        <input name="max_retries" type="number" min="1" value="{{ default_retries }}" style="width:120px">
        <button class="btn btn-primary">Save</button>
      </div>
    </form>
    <div class="kv" style="margin-top:18px">
      <div class="k">Backoff</div><div class="mono">min(3600, 10 * 2^(attempt-1)) s</div>
      <div class="k">Worker poll</div><div>idles between empty envelopes</div>
      <div class="k">Lease batch</div><div>AMEBO_ENVELOPE gists</div>
    </div>
  </div>
  <div class="tabpane{{ ' active' if tab == 'danger' else '' }}" id="tab-danger">
    <div class="danger-row"><div><div class="fw">Purge delivered gists</div><div class="d-txt">Remove delivery records that already succeeded.</div></div>
      <form action="/dash/purge" method="post" onsubmit="return confirm('Purge every delivered gist?') && dj.submit(this, '#modal')"><input type="hidden" name="mode" value="delivered"><button class="btn btn-danger btn-sm">Purge delivered</button></form></div>
    <div class="danger-row"><div><div class="fw">Reset broker data</div><div class="d-txt">Delete all events and gists. Apps/actions/subscriptions kept.</div></div>
      <form action="/dash/purge" method="post" onsubmit="return confirm('Delete every event and gist? This cannot be undone.') && dj.submit(this, '#modal')"><input type="hidden" name="mode" value="all"><button class="btn btn-danger btn-sm">Delete events + gists</button></form></div>
  </div>
</div>
<div class="modal-foot"><button type="button" class="btn" onclick="document.getElementById('modal').innerHTML=''">Close</button></div>
<script>
  window.dgTab = function(btn, name){ var root = btn.closest('.modal');
    root.querySelectorAll('.tabs button').forEach(function(b){ b.classList.toggle('active', b === btn); });
    root.querySelectorAll('.tabpane').forEach(function(p){ p.classList.toggle('active', p.id === 'tab-' + name); }); };
</script>
{% endcall %}