{% extends "base.html" %}
{% block title %}Chip visual builder{% endblock %}
{% block page_id %}chips{% endblock %}
{% block head %}
<style>
 .chip-build-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}
 .chip-build-grid{display:grid;grid-template-columns:230px minmax(360px,1fr) 300px;gap:12px}
 .chip-build-pane{background:var(--a-panel,#111e2c);border:1px solid #294057;border-radius:8px;padding:12px;min-width:0}
 .chip-build-pane h2{font-size:16px;margin:0 0 10px}.chip-build-pane label{display:block;margin:8px 0 4px}
 .chip-build-pane button,.chip-build-pane select,.chip-build-pane input,.chip-build-pane textarea{max-width:100%}
 .chip-build-pane select,.chip-build-pane input,.chip-build-pane textarea{width:100%;box-sizing:border-box;background:#0b1620;color:#deebf7;border:1px solid #38516a;padding:7px;border-radius:4px}
 .chip-tree button{display:block;width:100%;text-align:left;margin:3px 0}.chip-tree .chosen{outline:2px solid #54d2ed}
 .chip-build-scroll{position:relative;height:560px;overflow:auto;background:#09131f;border:1px solid #294057}
 .chip-build-graph{position:relative;min-width:100%;min-height:100%;background-image:radial-gradient(#293748 1px,transparent 1px);background-size:20px 20px}
 .chip-build-graph svg{position:absolute;inset:0;pointer-events:none}.chip-node{position:absolute;width:184px;border:1px solid #516b88;border-radius:7px;background:#17293b;color:#e3edf7;touch-action:none;cursor:move;text-align:left;z-index:1;padding:9px;box-sizing:border-box}
 .chip-node.selected{outline:2px solid #54d2ed}.chip-node strong,.chip-node small{display:block}.chip-node small{color:#a7bdd2;margin-top:5px}.chip-node.child{border-style:dashed;background:#1e2842}
 #chip-build-status{white-space:pre-wrap;overflow-wrap:anywhere}.chip-error{color:#ff9e9e}
 #chip-build-properties{font-family:Consolas,monospace;min-height:260px;font-size:12px}
 #chip-build-wires button{display:block;width:100%;text-align:left;margin:5px 0;font-size:12px}
 .chip-palette{max-height:210px;overflow:auto}.chip-palette button{display:block;width:100%;text-align:left;margin:4px 0}
 .chip-build-hint{color:#a7bdd2;font-size:13px}.chip-build-output{white-space:pre-wrap;max-height:170px;overflow:auto;font-family:Consolas,monospace;font-size:12px}
 @media(max-width:1100px){.chip-build-grid{grid-template-columns:190px minmax(300px,1fr)}.chip-build-inspector{grid-column:1/-1}}
 @media(max-width:700px){.chip-build-grid{display:block}.chip-build-pane{margin-bottom:10px}.chip-build-scroll{height:420px}}
</style>
{% endblock %}
{% block content %}
<div class="a-page-head"><h1 id="chip-build-title">Chip visual builder</h1><div class="a-sub">Edit the desktop chip library's modules, nested chips, wires and external ports.</div></div>
<div id="chip-build-root" data-owner="{{ 'true' if is_owner else 'false' }}" data-locked="{{ 'true' if locked else 'false' }}">
 <div class="chip-build-bar">
  <a class="a-btn" href="{{ aida_rel('chips') }}">Chip library</a>
  <button class="a-btn" id="chip-build-save" disabled>Save chip</button>
  <button class="a-btn" id="chip-build-undo" disabled>Undo</button>
  <button class="a-btn" id="chip-build-redo" disabled>Redo</button>
  <button class="a-btn" id="chip-build-export" disabled>Export draft</button>
  <button class="a-btn" id="chip-build-reload" disabled>Reload saved chip</button>
  <a class="a-btn" id="chip-build-run" href="{{ aida_rel('missions') }}" target="_blank" rel="noopener">Open task runner</a>
 </div>
 <p role="status" aria-live="polite" id="chip-build-status">Loading saved chip...</p>
 <div class="chip-build-grid" id="chip-build-editor" hidden>
  <aside class="chip-build-pane">
   <h2>Package hierarchy</h2><div id="chip-build-tree" class="chip-tree"></div>
   <label for="chip-build-search">Module palette</label><input id="chip-build-search" placeholder="Filter shared modules">
   <div id="chip-build-palette" class="chip-palette"></div>
   <label for="chip-build-library">Place a saved chip</label><select id="chip-build-library"></select><button class="a-btn" id="chip-build-place">Place selected chip</button>
   <button class="a-btn" id="chip-build-child">Add empty child package</button>
   <p class="chip-build-hint">Open a child package to edit its contents. Drag cards to arrange them. Changes stay in this draft until Save chip.</p>
  </aside>
  <section class="chip-build-pane">
   <h2 id="chip-build-path">Canvas</h2>
   <div class="chip-build-scroll"><div class="chip-build-graph" id="chip-build-graph"></div></div>
   <h2 style="margin-top:12px">Wire connections</h2>
   <label for="chip-build-source">Source output</label><select id="chip-build-source"></select>
   <label for="chip-build-dest">Destination input</label><select id="chip-build-dest"></select>
   <button class="a-btn" id="chip-build-connect">Connect ports</button>
   <div id="chip-build-wires"></div>
   <button class="a-btn" id="chip-build-promote" disabled>Review selected crossing</button>
   <p class="chip-build-hint" id="chip-build-promotion-plan">Save other draft changes, then select a wire crossing between child ICs to review its native ports.</p>
   <button class="a-btn" id="chip-build-promote-apply" disabled>Apply reviewed promotion</button>
  </section>
  <aside class="chip-build-pane chip-build-inspector">
   <h2 id="chip-build-selection">Package properties</h2>
   <label for="chip-build-properties">Selected object's complete properties</label><textarea id="chip-build-properties" spellcheck="false"></textarea>
   <button class="a-btn" id="chip-build-apply">Apply properties</button>
   <button class="a-btn" id="chip-build-remove">Remove selected object</button>
   <label for="chip-build-port-name">External port name</label><input id="chip-build-port-name" placeholder="request or response">
   <label for="chip-build-port-direction">External port direction</label><select id="chip-build-port-direction"><option value="input">Input (destination selected above)</option><option value="output">Output (source selected above)</option></select>
   <button class="a-btn" id="chip-build-port">Expose selected port</button>
   <p class="chip-build-hint">Package properties include external ports, global parameters, version and lineage. Module properties include provider/model settings and arbitrary configuration values.</p>
   <h2>Validation findings</h2><div id="chip-build-findings" class="chip-build-output"></div>
  </aside>
 </div>
</div>
{% endblock %}
{% block scripts %}<script src="{{ aida_rel('static/js/chip_builder.js') }}"></script>{% endblock %}