{%- import 'ui/kit.html' as kit -%}
{%- if spell is none %}
{%- call kit.drawer('wands', spell_name) %}<p class="hint">No such spell.</p>{% endcall %}
{%- else %}
{%- set su = principal and principal.superadmin %}
{%- call kit.drawer('spell (locked)' if locked else ('edit spell' if su else 'spell'), spell.spell) %}
{{ kit.kv([('when (action)', spell.action), ('status', 'enabled' if spell.enabled else 'disabled'), ('created by', spell.created_by or '-'), ('created', spell.timestamped|when)]) }}
{%- if su %}
<form action="/dash/wands/update" method="post" class="spell-edit" onsubmit="return amebeSpellSave(this)">
  <input type="hidden" name="spell" value="{{ spell.spell }}">
  <div class="field"><label>When (action)</label><input name="action" value="{{ spell.action }}" {{ 'readonly' if locked else '' }}></div>
  <div class="field"><label>Chain</label>
    <div class="tabs b-tabs spell-modes"><button type="button" class="active" data-emode="yaml">YAML</button><button type="button" data-emode="json">JSON</button></div>
    <div id="spell-edit-ide" class="ide" style="height:300px">{{ chain|tojson_attr }}</div><input type="hidden" name="source">
  </div>
  {%- if locked %}
  <div class="lock-note">This spell has run, so its definition is frozen and can no longer be edited (run history stays an honest audit trail). You can still enable, disable or delete it.</div>
  {%- endif %}
  <div class="drawer-actions">
    {%- if not locked %}<button class="btn btn-primary">Save spell</button>{% endif %}
    <button type="button" class="btn" onclick="amebeSpellToggle('{{ spell.spell }}')">{{ 'Disable' if spell.enabled else 'Enable' }}</button>
    <button type="button" class="btn btn-danger" onclick="if(!confirm('Delete this spell and its run history?'))return;var f=new FormData();f.append('ids','{{ spell.spell }}');dj.send('/dash/wands/delete-many',{method:'POST',target:'#list-wands',body:f});document.getElementById('drawer').innerHTML=''">Delete</button>
  </div>
</form>
{%- else %}
<p class="hint">Only a superadmin can view or change a spell's chain.</p>
{%- endif %}
<h3 style="font-size:13px;margin:20px 0 10px">Recent runs</h3>
{%- if not runs %}
<p class="hint">No runs yet. Publish a matching event to trigger this spell.</p>
{%- else %}
<table class="data spell-runs" style="border:1px solid var(--border)">
  <thead><tr><th>when</th><th>event</th><th>status</th><th>detail</th></tr></thead>
  <tbody>{% for r in runs %}
    <tr><td class="mono dim" title="{{ r.ts|when }}">{{ r.ts|ago }}</td><td class="mono">{{ r.event }}</td><td><span class="pill {{ r.status|pill_of }}">{{ r.status }}</span></td><td class="dim" style="white-space:normal">{{ r.detail }}</td></tr>
  {% endfor %}</tbody>
</table>
{%- endif %}
{%- if su %}
<script>
  (function(){ var ed = ace.edit('spell-edit-ide'); window.__eide = ed; var mode = 'yaml';
    var json = ed.getValue(); ed.session.setMode('ace/mode/yaml');
    ed.setOptions({ readOnly: {{ 'true' if locked else 'false' }}, fontSize: 14, showPrintMargin: false, tabSize: 2, useWorker: false });
    try { ed.setValue(window.chainToYaml(json), -1); } catch (e) { mode = 'json'; ed.session.setMode('ace/mode/json'); } ed.clearSelection();
    (window.__ace = window.__ace || []).push(ed);
    if (window.dgAceTheme) window.dgAceTheme();
    function asJson(){ return mode === 'yaml' ? window.yamlToChain(ed.getValue()) : ed.getValue(); }
    document.querySelectorAll('.spell-modes [data-emode]').forEach(function(b){ b.addEventListener('click', function(){
      var want = b.dataset.emode; if (want === mode) return;
      var src = asJson();
      if (want === 'json') { var pretty = src; try { pretty = JSON.stringify(JSON.parse(src), null, 2); } catch (e) {}
        ed.session.setMode('ace/mode/json'); ed.setValue(pretty, -1); }
      else { ed.session.setMode('ace/mode/yaml'); ed.setValue(window.chainToYaml(src), -1); }
      mode = want; ed.clearSelection();
      document.querySelectorAll('.spell-modes [data-emode]').forEach(function(x){ x.classList.toggle('active', x.dataset.emode === mode); });
    }); });
    window.amebeSpellSave = function(form){ form.source.value = asJson(); return dj.submit(form, '#list-wands'); };
  })();
</script>
{%- endif %}
{%- endcall %}
{%- endif %}