{%- import 'ui/kit.html' as kit %}{% import 'ui/broker/_fmt.html' as fmt -%}
{%- if found is none %}
{% call kit.drawer('action', aname) %}<p class="hint">Not found.</p>{% endcall %}
{%- else %}
<div class="drawer-scrim" onclick="document.getElementById('drawer').innerHTML=''"></div>
<aside class="drawer drawer-wide">
  <div class="drawer-head"><div><div class="eyebrow">action</div><h3>{{ aname }} {{ fmt.status_pill(found.status) }}</h3></div>
    <button class="icon-btn" onclick="document.getElementById('drawer').innerHTML=''">&times;</button></div>
  <div class="drawer-body">
    {{ fmt.flash(message, tone) }}
    <div class="tabs">
      <button class="active" onclick="dgDrawerTab(this,'schema')">Schema</button>
      <button onclick="dgDrawerTab(this,'validate')">Validate</button>
      <button onclick="dgDrawerTab(this,'access')">Access control</button>
      <button onclick="dgDrawerTab(this,'redact')">Redactions</button>
    </div>
    <div class="tabpane active" id="dtab-schema">
      <form class="acl-add amebo-lifecycle" action="/dash/action/transition" method="post" onsubmit="return dj.submit(this, '#drawer')">
        <input type="hidden" name="action" value="{{ aname }}">
        <span class="dim">owner <b>{{ found.application }}</b>{% if found.family %} &middot; family <b>{{ found.family }}</b>{% endif %}{% if found.compatibility %} &middot; {{ found.compatibility }}{% endif %}</span>
        <select name="status">
          {%- for s in ['active', 'deprecated', 'retired'] %}<option value="{{ s }}"{{ ' selected' if s == found.status else '' }}>{{ s }}</option>{% endfor %}
        </select>
        <select name="successor">
          <option value="">no successor</option>
          {%- for o in others %}<option value="{{ o }}"{{ ' selected' if o == found.successor else '' }}>{{ o }}</option>{% endfor %}
        </select>
        <button class="btn btn-sm">Apply lifecycle</button>
      </form>
      <div class="ide-head"><span class="drawer-sec" style="margin:0">JSON Schema</span>
        <span class="schema-tools">
          <button class="btn btn-sm btn-ghost" id="schema-edit-btn" onclick="dgSchemaEdit(true)">Edit schema</button>
          <button class="btn btn-sm btn-ghost" id="schema-cancel-btn" hidden onclick="dgSchemaEdit(false)">Cancel</button>
          <button class="btn btn-sm btn-primary" id="schema-save-btn" hidden onclick="dgSchemaSave({{ fmt.js(aname) }})">Save schema</button>
          <button class="btn btn-sm btn-ghost" onclick="dgCopyAce('schema-view', this)">Copy</button>
        </span></div>
      <p class="hint schema-tools" id="schema-edit-hint" hidden>Only non-breaking changes are saved, checked against this action's <b>{{ found.compatibility or 'BACKWARD' }}</b> compatibility. To break the contract, register a new version.</p>
      <div id="schema-edit-result"></div>
      <div id="schema-view" class="ide" style="height:calc(100vh - 260px)">{{ schema_pretty }}</div>
    </div>
    <div class="tabpane" id="dtab-validate">
      <p class="hint" style="margin-top:0">Paste a sample payload and check it against this action's schema. <b>Nothing here is saved</b> - it is a scratch validator, not a publish.</p>
      <div id="payload-ide" class="ide" style="height:calc(100vh - 350px)">{{ sample }}</div>
      <div class="drawer-actions">
        <button class="btn btn-primary btn-sm" onclick="dgValidatePayload({{ fmt.js(aname) }})">Validate payload</button>
        <span class="hint">not saved &mdash; validated on the fly</span>
      </div>
      <div id="validate-result"></div>
    </div>
    <div class="tabpane" id="dtab-access">
      <p class="drawer-sec" style="margin-top:0">Access control<span class="acl-hint">who may read, write or administer this action</span></p>
      <form class="acl-add" onsubmit="return dashAclAdd(this)">
        <select name="subject_type" onchange="this.form.subject_name.disabled = this.value === '*'">
          <option value="user">User</option>
          <option value="service">Service</option>
          <option value="*">Any valid token</option>
        </select>
        <input name="subject_name" placeholder="user name or application">
        <label class="acl-cb"><input type="checkbox" name="read"> Read</label>
        <label class="acl-cb"><input type="checkbox" name="write"> Write</label>
        <label class="acl-cb"><input type="checkbox" name="admin"> Admin</label>
        <button class="btn btn-sm btn-primary">Add</button>
      </form>
      <div id="acl-panel" data-action="{{ aname }}">{% with message='' %}{% include 'ui/broker/_acl.html' %}{% endwith %}</div>
    </div>
    <div class="tabpane" id="dtab-redact">
      <p class="hint" style="margin-top:0">Fields listed here are stripped from every payload <b>at reception</b> - before the event is stored or delivered - so sensitive data never lands in amebo. Use dot paths for nested fields (e.g. <code>card.cvv</code>).</p>
      <form class="acl-add" onsubmit="return dashRedactAdd(this)">
        <input name="field_path" placeholder="field path, e.g. card.cvv" style="flex:1;min-width:180px">
        <button class="btn btn-sm btn-primary">Redact</button>
      </form>
      <div id="redact-panel" data-action="{{ aname }}">{% with message='', paths=redactions %}{% include 'ui/broker/_redactions.html' %}{% endwith %}</div>
    </div>
  </div>
  <script>
    window.dashRedactAdd = function(form){
      var panel = document.getElementById('redact-panel'); var fp = form.field_path.value.trim();
      if (!fp) { form.field_path.focus(); return false; }
      var fd = new FormData(); fd.append('action', panel.dataset.action); fd.append('field_path', fp);
      dj.send('/dash/action/redact', { method: 'POST', target: '#redact-panel', body: fd });
      form.reset(); return false;
    };
    window.dashRedactRemove = function(fp){
      var panel = document.getElementById('redact-panel');
      var fd = new FormData(); fd.append('action', panel.dataset.action); fd.append('field_path', fp);
      dj.send('/dash/action/redact/remove', { method: 'POST', target: '#redact-panel', body: fd });
    };
  </script>
  <script>
    window.dgDrawerTab = function(btn, name){
      var root = btn.closest('.drawer');
      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 === 'dtab-' + name); });
      try { if (name === 'schema') ace.edit('schema-view').resize(); if (name === 'validate') ace.edit('payload-ide').resize(); } catch (e) {}
    };
    window.dgCopyAce = function(id, btn){
      navigator.clipboard.writeText(ace.edit(id).getValue());
      var t = btn.textContent; btn.textContent = 'Copied'; setTimeout(function(){ btn.textContent = t; }, 1200);
    };
    window.dgSchemaEdit = function(on){
      const sv = ace.edit('schema-view');
      if (on) sv.__original = sv.getValue();
      else if (sv.__original !== undefined) sv.setValue(sv.__original, -1);
      sv.setReadOnly(!on);
      document.getElementById('schema-edit-btn').hidden = on;
      document.getElementById('schema-cancel-btn').hidden = !on;
      document.getElementById('schema-save-btn').hidden = !on;
      document.getElementById('schema-edit-hint').hidden = !on;
      if (!on) document.getElementById('schema-edit-result').innerHTML = '';
      if (on) sv.focus();
    };
    window.dgSchemaSave = function(act){
      const fd = new FormData(); fd.append('action', act); fd.append('schema', ace.edit('schema-view').getValue());
      dj.send('/dash/action/schema', { method: 'POST', target: '#schema-edit-result', body: fd });
    };
    window.dgValidatePayload = function(act){
      var fd = new FormData(); fd.append('action', act); fd.append('payload', ace.edit('payload-ide').getValue());
      dj.send('/dash/action/validate', { method: 'POST', target: '#validate-result', body: fd });
    };
    (function(){
      var reg = (window.__ace = window.__ace || []);
      var sv = ace.edit('schema-view'); sv.session.setMode('ace/mode/json');
      sv.setOptions({ readOnly: true, fontSize: 14, showPrintMargin: false, wrap: true, tabSize: 2, useWorker: false });
      sv.clearSelection(); reg.push(sv);
      var pv = ace.edit('payload-ide'); pv.session.setMode('ace/mode/json');
      pv.setOptions({ fontSize: 14, showPrintMargin: false, tabSize: 2, useWorker: false });
      pv.clearSelection(); reg.push(pv);
      if (window.dgAceTheme) window.dgAceTheme(); else { var d = document.documentElement.getAttribute('data-theme') === 'dark'; sv.setTheme(d?'ace/theme/one_dark':'ace/theme/chrome'); pv.setTheme(d?'ace/theme/one_dark':'ace/theme/chrome'); }
    })();
    (function(){
      var panel = document.getElementById('acl-panel'); if (!panel || panel.__wired) return; panel.__wired = true;
      function send(url, fd){ fd.append('action', panel.dataset.action); dj.send(url, {method:'POST', target:'#acl-panel', body:fd}); }
      panel.addEventListener('change', function(e){
        var cb = e.target; if (!cb.matches || !cb.matches('input[data-perm]')) return;
        var row = cb.closest('.acl-row'); var fd = new FormData();
        fd.append('subject_type', row.dataset.stype); fd.append('subject_name', row.dataset.sname);
        ['read','write','admin'].forEach(function(p){ var x = row.querySelector('input[data-perm='+p+']'); fd.append(p, (x && x.checked) ? '1' : '0'); });
        send('/dash/action/acl', fd);
      });
      panel.addEventListener('click', function(e){
        var x = e.target.closest('.acl-x'); if (!x) return;
        var row = x.closest('.acl-row'); var fd = new FormData();
        fd.append('subject_type', row.dataset.stype); fd.append('subject_name', row.dataset.sname);
        send('/dash/action/acl/revoke', fd);
      });
    })();
    window.dashAclAdd = function(form){
      var panel = document.getElementById('acl-panel'); var fd = new FormData();
      var stype = form.subject_type.value;
      var sname = stype === '*' ? '*' : form.subject_name.value.trim();
      if (!sname){ form.subject_name.focus(); return false; }
      fd.append('action', panel.dataset.action); fd.append('subject_type', stype); fd.append('subject_name', sname);
      ['read','write','admin'].forEach(function(p){ fd.append(p, form[p].checked ? '1' : '0'); });
      dj.send('/dash/action/acl', {method:'POST', target:'#acl-panel', body:fd});
      form.reset(); return false;
    };
  </script>
</aside>
{%- endif %}