{%- import 'ui/kit.html' as kit -%}
{%- call kit.modal('New spell', 'wands') %}
<div class="spell-builder">
<form action="/dash/wands" method="post" onsubmit="return dashBuilderSubmit(this)">
  <div class="modal-body">
    <div class="field-row">
      <div class="field"><label>Spell name<span class="req">*</span></label><input name="spell" placeholder="forward-orders" pattern="[A-Za-z0-9][A-Za-z0-9._\-]{0,63}" title="letters, digits, dot, dash, underscore" required></div>
      <div class="field"><label>When (action)<span class="req">*</span></label><select class="b-action" name="action" required>{% for a in actions %}<option value="{{ a }}">{{ a }}</option>{% endfor %}</select></div>
    </div>
    <div class="tabs b-tabs" style="margin-top:12px"><button type="button" class="active" data-bmode="visual">Visual</button><button type="button" data-bmode="yaml">YAML</button></div>
    <div class="b-visual">
      <label class="hint" style="display:block;margin:2px 0 4px">Chain - runs top to bottom. Type <code>&#123;&#123;</code> in any value to pick an event field or an earlier step's output.</label>
      <div class="b-steps"></div>
      <button type="button" class="btn btn-sm b-add">+ Add step</button>
    </div>
    <div class="b-yaml-pane" hidden>
      <label class="hint" style="display:block;margin:2px 0 6px">Spellbook YAML - the <code>then:</code> chain. Switch back to Visual to sync it into the builder.</label>
      <div class="b-yaml-ide ide" style="height:300px"></div>
    </div>
    <input type="hidden" name="source">
    <p class="hint" style="margin-top:10px">Outbound requests pass the same network guard as webhooks, and a spell only runs on events its creator may read. Once a spell has run its definition is frozen.</p>
  </div>
  <div class="modal-foot"><button type="button" class="btn btn-ghost" onclick="document.getElementById('modal').innerHTML=''">Cancel</button><button class="btn btn-primary">Create spell</button></div>
</form>
</div>
<script>(function(){ var root = document.getElementById('modal').querySelector('.spell-builder'); if (window.dashBuilder) window.dashBuilder(root); })();</script>
{%- endcall %}