{% extends "network/base.html" %}
{% block title %}{{ topology_name }} — Canvas Editor{% endblock %}

{% block head %}
<!-- JointJS + dependencies -->
<!-- Vendored locally for air-gap / IL5-IL6 environments -->
<link rel="stylesheet" href="{{ url_for('static', filename='js/vendor/joint.css') }}"/>
<script src="{{ url_for('static', filename='js/vendor/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/vendor/lodash.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/vendor/backbone.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/vendor/joint.js') }}"></script>
<script src="{{ url_for('static', filename='js/vendor/dagre.min.js') }}"></script>
<style>
  body { overflow: hidden; }
  .main-content { padding: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
</style>
{% endblock %}

{% block content %}
<!-- Project Context Bar -->
{% if topo_projects %}
<div class="project-context-bar">
  <span class="pcb-label">Project:</span>
  {% for pp in topo_projects %}
  <a href="/network/projects/{{ pp.id }}" class="pcb-project">{{ pp.name }}</a>
  {% endfor %}
  <span style="margin-left:auto;">Quick switch:</span>
  <select onchange="if(this.value) window.location.href='/network/?project='+this.value">
    <option value="">—</option>
    {% for ap in all_projects %}
    <option value="{{ ap.id }}">{{ ap.name }} ({{ ap.status }})</option>
    {% endfor %}
  </select>
</div>
{% endif %}

<div class="canvas-layout">

  <!-- Toolbar -->
  <div class="canvas-toolbar">
    <div class="tb-group">
      <button class="tb-btn" onclick="newCanvas()" title="New">⊞ New</button>
      <button class="tb-btn" onclick="saveTopology()" title="Save (Ctrl+S)">💾 Save</button>
      <button class="tb-btn" onclick="saveAsTopology()" title="Save As (new copy)">💾 Save As</button>
      <button class="tb-btn" onclick="saveAsTemplate()" title="Save as reusable template">⊡ Save Template</button>
      <button class="tb-btn" onclick="undoAction()" title="Undo">↩ Undo</button>
      <button class="tb-btn" onclick="redoAction()" title="Redo">↪ Redo</button>
    </div>
    <div class="tb-group">
      <button class="tb-btn" onclick="openTemplatesPanel()" title="Templates">⊡ Templates</button>
      <button class="tb-btn tb-btn-snippets" onclick="openSnippetsPanel()" title="Enclave-in-a-Box — drop pre-built compliance-validated sub-topologies onto canvas" style="color:#a29bfe;">&#x229e; Snippets</button>
      <button class="tb-btn" onclick="openSimPanel()" title="Simulate">▶ Simulate</button>
      <button class="tb-btn tb-btn-danger" onclick="runOutageSimulation()" title="Simulate link outage">✕ Cut Link</button>
    </div>
    <div class="tb-group">
      <button class="tb-btn" onclick="zoomIn()" title="Zoom In">+ Zoom</button>
      <button class="tb-btn" onclick="zoomOut()" title="Zoom Out">- Zoom</button>
      <button class="tb-btn" onclick="zoomFit()" title="Fit All">⊞ Fit</button>
      <button class="tb-btn" onclick="zoomReset()" title="Reset Zoom">1:1</button>
    </div>
    <div class="tb-group">
      <div class="tb-export-wrap" id="export-dropdown-wrap">
        <button class="tb-btn" onclick="this.parentElement.classList.toggle('open')" title="Export topology in various formats">⬇ Export ▾</button>
        <div class="tb-export-menu">
          <button onclick="exportAs('drawio');this.closest('.tb-export-wrap').classList.remove('open')" title="Export draw.io XML">📐 draw.io</button>
          <button onclick="exportAs('svg');this.closest('.tb-export-wrap').classList.remove('open')" title="Export SVG">🖼 SVG</button>
          <button onclick="exportAs('vsdx');this.closest('.tb-export-wrap').classList.remove('open')" title="Export Visio (.vsdx)">📊 Visio</button>
          <button onclick="exportAs('csv');this.closest('.tb-export-wrap').classList.remove('open')" title="Export Ops CSVs">📋 Ops CSV</button>
          <button onclick="exportInventory('ansible');this.closest('.tb-export-wrap').classList.remove('open')" title="Export Ansible Inventory" style="color:#ff6b35;">⚙ Ansible</button>
          <button onclick="exportInventory('terraform');this.closest('.tb-export-wrap').classList.remove('open')" title="Export Terraform HCL" style="color:#7b42bc;">⚙ Terraform</button>
          <button onclick="showDeviceConfigModal();this.closest('.tb-export-wrap').classList.remove('open')" title="Device configs (IOS/EOS/JunOS)" style="color:#00c896;">⚙ Dev Configs</button>
          <button onclick="exportCablePlantReport();this.closest('.tb-export-wrap').classList.remove('open')" title="Cable plant report CSV" style="color:#a29bfe;">🔌 Cable Plant</button>
        </div>
      </div>
    </div>
    <div class="tb-group">
      <a class="tb-btn" id="tb-versions-link" href="#" title="Phase diagram / version history">Phases</a>
      <a class="tb-btn" id="tb-mc-link" href="#" title="Monte Carlo cascading simulation">Simulate MC</a>
      <a class="tb-btn" id="tb-compliance-link" href="#" title="Compliance audit (FISMA/STIG/ZTA)" style="color:#f39c12;">Compliance</a>
      <button class="tb-btn" id="tb-stig-import-btn" onclick="openStigImportDialog()" title="Import STIG Viewer .ckl or XCCDF results — match hostnames to canvas devices and color by compliance status" style="color:#e74c3c;">&#x1f6e1; STIG</button>
      <button class="tb-btn" id="tb-ato-btn" onclick="generateAtoPackage()" title="Generate ATO package (boundary diagram, data flow, PPS matrix, STIG checklist)" style="color:#e74c3c;">&#x1f4cb; ATO Package</button>
      <button class="tb-btn" id="tb-pps-btn" onclick="openPpsPanel()" title="PPS Matrix Generator — select enclave or device pair, auto-generate ports/protocols/services matrix" style="color:#00d4ff;">&#x1f4ca; PPS Matrix</button>
      <button class="tb-btn" onclick="openScorecard()" title="Design Scorecard — check design completeness (routing, redundancy, security)" style="color:#27ae60;">&#x2705; Scorecard</button>
      <button class="tb-btn" onclick="openTechDebt()" title="Tech Debt — EOL/EOS analysis + lifecycle risk" style="color:#e67e22;">&#x23f3; Tech Debt</button>
      <button class="tb-btn" onclick="openIpv6Readiness()" title="IPv6 Readiness — device capability + migration plan" style="color:#3498db;">v6 IPv6</button>
    </div>
    <div class="tb-group">
      <button class="tb-btn tb-btn-fence" id="tb-fence-btn" onclick="toggleFenceMode()" title="Security Boundary Auto-Fencing — click to toggle, then click-drag a rectangle around devices to create enclave boundary">⬡ Fence <span id="fence-indicator" style="font-size:9px;opacity:0.6;">OFF</span></button>
      <div class="tb-dropdown-wrap">
        <button class="tb-btn tb-btn-heatmap" id="tb-heatmap-btn" onclick="document.getElementById('heatmap-dropdown').classList.toggle('hidden')" title="Heatmap Overlay — click to select metric, colors nodes/links by value">🌡 Heatmap ▾</button>
        <div class="tb-dropdown hidden" id="heatmap-dropdown">
          <button class="tb-dropdown-item" id="hm-opt-bandwidth" onclick="toggleHeatmap('bandwidth');document.getElementById('heatmap-dropdown').classList.add('hidden')">&#x1f4ca; Bandwidth Utilization</button>
          <button class="tb-dropdown-item" id="hm-opt-vuln" onclick="toggleHeatmap('vuln');document.getElementById('heatmap-dropdown').classList.add('hidden')">&#x26a0; Vulnerability Severity</button>
          <button class="tb-dropdown-item" id="hm-opt-stig" onclick="toggleHeatmap('stig');document.getElementById('heatmap-dropdown').classList.add('hidden')">&#x1f6e1; STIG Compliance %</button>
          <button class="tb-dropdown-item" id="hm-opt-age" onclick="toggleHeatmap('age');document.getElementById('heatmap-dropdown').classList.add('hidden')">&#x23f3; Equipment Age</button>
          <button class="tb-dropdown-item" id="hm-opt-clear" onclick="clearHeatmap();document.getElementById('heatmap-dropdown').classList.add('hidden')" style="color:#e74c3c;">✕ Clear Heatmap</button>
        </div>
      </div>
      <button class="tb-btn" onclick="toggleTopologyLegend()" title="Topology Legend — show/hide legend of all node types and protocols on the canvas">&#x1f5fa; Legend</button>
      <button class="tb-btn" onclick="exportCanvasPDF()" title="Export PDF — opens print-ready canvas in new tab for Print to PDF">&#x1f4c4; Export PDF</button>
      <button class="tb-btn tb-btn-fips" id="tb-fips-btn" onclick="toggleFipsOverlay()" title="FIPS 140 Encryption Coverage — toggle to highlight protected (green) vs unprotected (red dashed) links">🔒 FIPS <span id="fips-indicator" style="font-size:9px;opacity:0.6;">OFF</span></button>
      <button class="tb-btn" id="tb-fips-report-btn" onclick="exportFipsReport()" title="Export FIPS 140 Encryption Coverage Report for ISSM" style="color:#00d4ff;">📄 FIPS Report</button>
      <button class="tb-btn tb-btn-ai" onclick="ncChatToggle()" title="Network Assistant — chat to generate topologies">✦ Chat</button>
      <button class="tb-btn" onclick="toggleRackView()" title="Rack Elevation View — shows rack layout for selected device">&#x229e; Rack</button>
      <button class="tb-btn" id="tb-netbox-btn" onclick="netboxToggle()" title="NetBox IPAM — pull devices, IPs, VLANs, racks, circuits from NetBox source of truth" style="color:#9b59b6;">⬡ NetBox</button>
      <button class="tb-btn" id="tb-ai-review-btn" onclick="openAiReviewPanel()" title="AI Topology Reviewer — LLM analysis of SPOF, redundancy gaps, STIG violations, and suggestions" style="color:#00d4ff;">&#x1f50d; AI Review</button>
      <button class="tb-btn" id="tb-cr-btn" onclick="toggleCrMarkupMode()" title="Change Request Markup Mode — mark proposed adds (green), removes (red), and modifies (yellow) for CAB review" style="color:#8e44ad;">&#x270f; CR Markup</button>
    </div>
    <div class="tb-group tb-banner-group">
      <input type="text" id="banner-text-input" class="tb-banner-input" placeholder="Classification banner..." oninput="onBannerTextChange()" title="Classification banner text (e.g., CUI // SP-CTI, SECRET // NOFORN)"/>
    </div>
    <div class="tb-center">
      <span class="topology-name-display" id="topo-name-display">{{ topology_name }}</span>
    </div>
    <div class="tb-status" id="tb-status">Ready</div>
  </div>

  <!-- Body -->
  <div class="canvas-body">

    <!-- Left Palette -->
    <div class="palette" id="palette">
      <div class="palette-header">Object Library
        <button class="palette-add-btn" onclick="openCustomDeviceDialog()" title="Create custom device type">+</button>
      </div>
      <div style="padding:4px 8px;">
        <input type="text" id="palette-search" placeholder="Filter objects..." style="width:100%;padding:4px 8px;font-size:11px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);outline:none;"/>
      </div>

      <div class="palette-section">
        <div class="palette-cat">Physical</div>
        <div class="palette-items">
          <div class="palette-item" draggable="true" data-type="router" ondragstart="onDragStart(event)" title="Layer 3 router — IP routing, BGP/OSPF/EIGRP">
            <div class="pi-icon router-icon">R</div><span>Router</span>
          </div>
          <div class="palette-item" draggable="true" data-type="switch-l2" ondragstart="onDragStart(event)" title="Layer 2 switch — VLANs, STP, MAC forwarding">
            <div class="pi-icon switch-icon">S2</div><span>Switch L2</span>
          </div>
          <div class="palette-item" draggable="true" data-type="switch-l3" ondragstart="onDragStart(event)" title="Layer 3 switch — routing + switching, inter-VLAN">
            <div class="pi-icon switch-icon">S3</div><span>Switch L3</span>
          </div>
          <div class="palette-item" draggable="true" data-type="firewall" ondragstart="onDragStart(event)" title="Firewall — stateful packet inspection, ACLs, NAT">
            <div class="pi-icon fw-icon">FW</div><span>Firewall</span>
          </div>
          <div class="palette-item" draggable="true" data-type="load-balancer" ondragstart="onDragStart(event)" title="Load Balancer — traffic distribution, VIPs, health checks">
            <div class="pi-icon lb-icon">LB</div><span>Load Balancer</span>
          </div>
          <div class="palette-item" draggable="true" data-type="wap" ondragstart="onDragStart(event)" title="Wireless Access Point — 802.11ax/be, PoE powered">
            <div class="pi-icon wap-icon">AP</div><span>WAP</span>
          </div>
          <div class="palette-item" draggable="true" data-type="server" ondragstart="onDragStart(event)" title="Server — compute, storage, application host">
            <div class="pi-icon srv-icon">SRV</div><span>Server</span>
          </div>
          <div class="palette-item" draggable="true" data-type="patch-panel" ondragstart="onDragStart(event)" title="Copper patch panel — structured cabling termination">
            <div class="pi-icon pp-icon">PP</div><span>Patch Panel</span>
          </div>
        </div>
      </div>

      <div class="palette-section">
        <div class="palette-cat">Physical Media</div>
        <div class="palette-items">
          <div class="palette-item" draggable="true" data-type="media-ge" ondragstart="onDragStart(event)" title="1 Gigabit Ethernet — 802.3ab copper / 802.3z fiber">
            <div class="pi-icon ge-icon">GE</div><span>GbE</span>
          </div>
          <div class="palette-item" draggable="true" data-type="media-10ge" ondragstart="onDragStart(event)" title="10 Gigabit Ethernet — 802.3ae, SFP+ or XFP">
            <div class="pi-icon ge-icon">10G</div><span>10GbE</span>
          </div>
          <div class="palette-item" draggable="true" data-type="media-25ge" ondragstart="onDragStart(event)" title="25 Gigabit Ethernet — 802.3by, SFP28">
            <div class="pi-icon bw-icon">25G</div><span>25GbE</span>
          </div>
          <div class="palette-item" draggable="true" data-type="media-40ge" ondragstart="onDragStart(event)" title="40 Gigabit Ethernet — 802.3ba, QSFP+">
            <div class="pi-icon bw-icon">40G</div><span>40GbE</span>
          </div>
          <div class="palette-item" draggable="true" data-type="media-100ge" ondragstart="onDragStart(event)" title="100 Gigabit Ethernet — 802.3bm, QSFP28">
            <div class="pi-icon bw100-icon">100G</div><span>100GbE</span>
          </div>
          <div class="palette-item" draggable="true" data-type="media-400ge" ondragstart="onDragStart(event)" title="400 Gigabit Ethernet — 802.3bs, QSFP-DD or OSFP">
            <div class="pi-icon bw400-icon">400G</div><span>400GbE</span>
          </div>
          <div class="palette-item" draggable="true" data-type="sfp" ondragstart="onDragStart(event)" title="Small Form-factor Pluggable — 1GbE, 850nm/1310nm">
            <div class="pi-icon sfp-icon">SFP</div><span>SFP</span>
          </div>
          <div class="palette-item" draggable="true" data-type="sfp-plus" ondragstart="onDragStart(event)" title="Enhanced SFP — 10GbE, SR/LR/ER">
            <div class="pi-icon sfp-icon">SF+</div><span>SFP+</span>
          </div>
          <div class="palette-item" draggable="true" data-type="qsfp" ondragstart="onDragStart(event)" title="Quad SFP — 100GbE, SR4/LR4/CWDM4">
            <div class="pi-icon qsfp-icon">QSF</div><span>QSFP28</span>
          </div>
          <div class="palette-item" draggable="true" data-type="qsfp-dd" ondragstart="onDragStart(event)" title="QSFP Double Density — 400GbE, DR4/FR4">
            <div class="pi-icon qsfp-icon">QDD</div><span>QSFP-DD</span>
          </div>
          <div class="palette-item" draggable="true" data-type="media-fiber" ondragstart="onDragStart(event)" title="Single-mode or multi-mode fiber optic cable">
            <div class="pi-icon fiber-icon">FO</div><span>Fiber</span>
          </div>
          <div class="palette-item" draggable="true" data-type="media-optical" ondragstart="onDragStart(event)" title="Dense Wavelength Division Multiplexing transport">
            <div class="pi-icon optical-icon">OPT</div><span>Optical/DWDM</span>
          </div>
          <div class="palette-item" draggable="true" data-type="media-converter" ondragstart="onDragStart(event)" title="Copper to fiber media converter">
            <div class="pi-icon mc-icon">MC</div><span>Media Conv.</span>
          </div>
        </div>
      </div>

      <div class="palette-section">
        <div class="palette-cat">Encryption</div>
        <div class="palette-items">
          <div class="palette-item" draggable="true" data-type="macsec" ondragstart="onDragStart(event)">
            <div class="pi-icon macsec-icon">MAC</div><span>MACsec</span>
          </div>
          <div class="palette-item" draggable="true" data-type="qkd-device" ondragstart="onDragStart(event)">
            <div class="pi-icon qkd-icon">QKD</div><span>QKD Device</span>
          </div>
          <div class="palette-item" draggable="true" data-type="tls-terminator" ondragstart="onDragStart(event)">
            <div class="pi-icon tls-icon">TLS</div><span>TLS Offload</span>
          </div>
          <div class="palette-item" draggable="true" data-type="fips-140-l1" ondragstart="onDragStart(event)">
            <div class="pi-icon fips1-icon">F1</div><span>FIPS 140 L1</span>
          </div>
          <div class="palette-item" draggable="true" data-type="fips-140-l2" ondragstart="onDragStart(event)">
            <div class="pi-icon fips2-icon">F2</div><span>FIPS 140 L2</span>
          </div>
          <div class="palette-item" draggable="true" data-type="fips-140-l3" ondragstart="onDragStart(event)">
            <div class="pi-icon fips3-icon">F3</div><span>FIPS 140 L3</span>
          </div>
          <div class="palette-item" draggable="true" data-type="fips-140-l4" ondragstart="onDragStart(event)">
            <div class="pi-icon fips4-icon">F4</div><span>FIPS 140 L4</span>
          </div>
          <div class="palette-item" draggable="true" data-type="hsm" ondragstart="onDragStart(event)">
            <div class="pi-icon hsm-icon">HSM</div><span>HSM</span>
          </div>
          <div class="palette-item" draggable="true" data-type="type1-encryptor" ondragstart="onDragStart(event)" title="NSA Type 1 encryptor — generic HAIPE device">
            <div class="pi-icon type1-icon">T1</div><span>Type 1 (NSA)</span>
          </div>
          <div class="palette-item" draggable="true" data-type="kg-175d" ondragstart="onDragStart(event)" title="TACLANE-Micro — 2 Mbps to 2 Gbps HAIPE, most deployed NSA encryptor">
            <div class="pi-icon kg-icon">175D</div><span>KG-175D</span>
          </div>
          <div class="palette-item" draggable="true" data-type="kg-175g" ondragstart="onDragStart(event)" title="TACLANE-Flex — up to 10 Gbps, next-gen multi-mode tactical HAIPE">
            <div class="pi-icon kg-icon">175G</div><span>KG-175G</span>
          </div>
          <div class="palette-item" draggable="true" data-type="kg-250" ondragstart="onDragStart(event)" title="TACLANE-100G — 100 Gbps HAIPE for data center and backbone">
            <div class="pi-icon kg-icon">250</div><span>KG-250</span>
          </div>
          <div class="palette-item" draggable="true" data-type="kg-340" ondragstart="onDragStart(event)" title="KG-340 — 10 Gbps high-assurance IP network encryptor">
            <div class="pi-icon kg-icon">340</div><span>KG-340</span>
          </div>
          <div class="palette-item" draggable="true" data-type="kg-245x" ondragstart="onDragStart(event)" title="TACLANE-FLEX ECO — 1 Gbps low-SWaP tactical encryptor">
            <div class="pi-icon kg-icon">245X</div><span>KG-245X</span>
          </div>
          <div class="palette-item" draggable="true" data-type="kg-255" ondragstart="onDragStart(event)" title="KG-255 — 400 Gbps optical backbone encryptor (emerging)">
            <div class="pi-icon kg-icon">255</div><span>KG-255</span>
          </div>
        </div>
      </div>

      <div class="palette-section">
        <div class="palette-cat">Endpoints</div>
        <div class="palette-items">
          <div class="palette-item" draggable="true" data-type="endpoint-pc" ondragstart="onDragStart(event)">
            <div class="pi-icon pc-icon">PC</div><span>Workstation</span>
          </div>
          <div class="palette-item" draggable="true" data-type="endpoint-phone" ondragstart="onDragStart(event)">
            <div class="pi-icon phone-icon">PH</div><span>IP Phone</span>
          </div>
          <div class="palette-item" draggable="true" data-type="endpoint-iot" ondragstart="onDragStart(event)">
            <div class="pi-icon iot-icon">IoT</div><span>IoT Device</span>
          </div>
          <div class="palette-item" draggable="true" data-type="endpoint-camera" ondragstart="onDragStart(event)">
            <div class="pi-icon cam-icon">CAM</div><span>IP Camera</span>
          </div>
        </div>
      </div>

      <div class="palette-section">
        <div class="palette-cat">Controllers</div>
        <div class="palette-items">
          <div class="palette-item" draggable="true" data-type="wlc" ondragstart="onDragStart(event)">
            <div class="pi-icon wlc-icon">WLC</div><span>WLC</span>
          </div>
          <div class="palette-item" draggable="true" data-type="sdwan-edge" ondragstart="onDragStart(event)">
            <div class="pi-icon sdw-icon">SDW</div><span>SD-WAN Edge</span>
          </div>
          <div class="palette-item" draggable="true" data-type="network-tap" ondragstart="onDragStart(event)">
            <div class="pi-icon tap-icon">TAP</div><span>Network TAP</span>
          </div>
          <div class="palette-item" draggable="true" data-type="siem" ondragstart="onDragStart(event)">
            <div class="pi-icon siem-icon">SIM</div><span>SIEM</span>
          </div>
        </div>
      </div>

      <div class="palette-section">
        <div class="palette-cat">Optical / DWDM</div>
        <div class="palette-items">
          <div class="palette-item" draggable="true" data-type="roadm" ondragstart="onDragStart(event)">
            <div class="pi-icon roadm-icon">RDM</div><span>ROADM</span>
          </div>
          <div class="palette-item" draggable="true" data-type="oadm" ondragstart="onDragStart(event)">
            <div class="pi-icon oadm-icon">OAD</div><span>OADM</span>
          </div>
          <div class="palette-item" draggable="true" data-type="edfa" ondragstart="onDragStart(event)">
            <div class="pi-icon edfa-icon">AMP</div><span>EDFA Amp</span>
          </div>
          <div class="palette-item" draggable="true" data-type="transponder" ondragstart="onDragStart(event)">
            <div class="pi-icon txp-icon">TXP</div><span>Transponder</span>
          </div>
          <div class="palette-item" draggable="true" data-type="olt" ondragstart="onDragStart(event)">
            <div class="pi-icon olt-icon">OLT</div><span>OLT</span>
          </div>
          <div class="palette-item" draggable="true" data-type="odf" ondragstart="onDragStart(event)">
            <div class="pi-icon odf-icon">ODF</div><span>ODF</span>
          </div>
          <div class="palette-item" draggable="true" data-type="patch-panel-fiber" ondragstart="onDragStart(event)">
            <div class="pi-icon fpp-icon">FPP</div><span>Fiber Patch</span>
          </div>
        </div>
      </div>

      <div class="palette-section">
        <div class="palette-cat">Carrier / SP</div>
        <div class="palette-items">
          <div class="palette-item" draggable="true" data-type="pop" ondragstart="onDragStart(event)">
            <div class="pi-icon pop-icon">POP</div><span>POP</span>
          </div>
          <div class="palette-item" draggable="true" data-type="mpls-pe" ondragstart="onDragStart(event)">
            <div class="pi-icon pe-icon">PE</div><span>MPLS PE</span>
          </div>
          <div class="palette-item" draggable="true" data-type="mpls-p" ondragstart="onDragStart(event)">
            <div class="pi-icon p-icon">P</div><span>MPLS P</span>
          </div>
          <div class="palette-item" draggable="true" data-type="route-reflector" ondragstart="onDragStart(event)">
            <div class="pi-icon rr-icon">RR</div><span>Route Reflector</span>
          </div>
          <div class="palette-item" draggable="true" data-type="sonet-adm" ondragstart="onDragStart(event)">
            <div class="pi-icon adm-icon">ADM</div><span>SONET ADM</span>
          </div>
        </div>
      </div>

      <div class="palette-section">
        <div class="palette-cat">Colocation / Facility</div>
        <div class="palette-items">
          <div class="palette-item" draggable="true" data-type="meet-me-room" ondragstart="onDragStart(event)" title="Carrier-neutral meet-me room — physical handoff between customer and CSP/carrier">
            <div class="pi-icon mmr-icon">MMR</div><span>Meet-Me Room</span>
          </div>
          <div class="palette-item" draggable="true" data-type="cross-connect" ondragstart="onDragStart(event)" title="Physical cross-connect cable between racks/cages in a colocation facility">
            <div class="pi-icon xx-icon">XX</div><span>Cross-Connect</span>
          </div>
          <div class="palette-item" draggable="true" data-type="demarc" ondragstart="onDragStart(event)" title="Demarcation point — boundary between carrier and customer responsibility">
            <div class="pi-icon dm-icon">DM</div><span>Demarc</span>
          </div>
          <div class="palette-item" draggable="true" data-type="cage" ondragstart="onDragStart(event)" title="Colocation cage or private suite">
            <div class="pi-icon cage-icon">CGE</div><span>Cage/Suite</span>
          </div>
          <div class="palette-item" draggable="true" data-type="cabinet" ondragstart="onDragStart(event)" title="Equipment cabinet/rack in colocation facility">
            <div class="pi-icon cab-icon">CAB</div><span>Cabinet</span>
          </div>
        </div>
      </div>

      <div class="palette-section">
        <div class="palette-cat">Drawing Shapes</div>
        <div class="palette-items">
          <div class="palette-item" draggable="true" data-type="draw-rect" ondragstart="onDragStart(event)" title="Rectangle — basic box shape">
            <div class="pi-icon draw-rect-icon">▬</div><span>Rectangle</span>
          </div>
          <div class="palette-item" draggable="true" data-type="draw-rounded-rect" ondragstart="onDragStart(event)" title="Rounded rectangle — soft corners">
            <div class="pi-icon draw-rrect-icon">▢</div><span>Rounded Rect</span>
          </div>
          <div class="palette-item" draggable="true" data-type="draw-circle" ondragstart="onDragStart(event)" title="Circle">
            <div class="pi-icon draw-circle-icon">●</div><span>Circle</span>
          </div>
          <div class="palette-item" draggable="true" data-type="draw-ellipse" ondragstart="onDragStart(event)" title="Ellipse — oval shape">
            <div class="pi-icon draw-ellipse-icon">⬭</div><span>Ellipse</span>
          </div>
          <div class="palette-item" draggable="true" data-type="draw-diamond" ondragstart="onDragStart(event)" title="Diamond — decision/zone marker">
            <div class="pi-icon draw-diamond-icon">◆</div><span>Diamond</span>
          </div>
          <div class="palette-item" draggable="true" data-type="draw-triangle" ondragstart="onDragStart(event)" title="Triangle">
            <div class="pi-icon draw-tri-icon">▲</div><span>Triangle</span>
          </div>
          <div class="palette-item" draggable="true" data-type="draw-hexagon" ondragstart="onDragStart(event)" title="Hexagon — zone boundary">
            <div class="pi-icon draw-hex-icon">⬡</div><span>Hexagon</span>
          </div>
          <div class="palette-item" draggable="true" data-type="draw-star" ondragstart="onDragStart(event)" title="Star — highlight / key point">
            <div class="pi-icon draw-star-icon">★</div><span>Star</span>
          </div>
          <div class="palette-item" draggable="true" data-type="draw-line-h" ondragstart="onDragStart(event)" title="Horizontal line divider">
            <div class="pi-icon draw-line-icon">―</div><span>H-Line</span>
          </div>
          <div class="palette-item" draggable="true" data-type="draw-line-v" ondragstart="onDragStart(event)" title="Vertical line divider">
            <div class="pi-icon draw-line-icon">│</div><span>V-Line</span>
          </div>
          <div class="palette-item" draggable="true" data-type="draw-arrow" ondragstart="onDragStart(event)" title="Arrow — directional indicator">
            <div class="pi-icon draw-arrow-icon">→</div><span>Arrow</span>
          </div>
        </div>
      </div>

      <div class="palette-section">
        <div class="palette-cat">Annotation / Text</div>
        <div class="palette-items">
          <div class="palette-item" draggable="true" data-type="annotation" ondragstart="onDragStart(event)">
            <div class="pi-icon note-icon">...</div><span>Note</span>
          </div>
          <div class="palette-item" draggable="true" data-type="group-site" ondragstart="onDragStart(event)">
            <div class="pi-icon group-icon">GRP</div><span>Site Group</span>
          </div>
          <div class="palette-item" draggable="true" data-type="text-label" ondragstart="onDragStart(event)" title="Free text label — double-click to edit">
            <div class="pi-icon text-label-icon">T</div><span>Text Label</span>
          </div>
          <div class="palette-item" draggable="true" data-type="text-heading" ondragstart="onDragStart(event)" title="Large heading text — section title">
            <div class="pi-icon text-heading-icon">H</div><span>Heading</span>
          </div>
          <div class="palette-item" draggable="true" data-type="text-badge" ondragstart="onDragStart(event)" title="Badge label — pill-shaped tag">
            <div class="pi-icon text-badge-icon">B</div><span>Badge</span>
          </div>
        </div>
      </div>

      <div class="palette-section">
        <div class="palette-cat">Logical</div>
        <div class="palette-items">
          <div class="palette-item" draggable="true" data-type="vrf" ondragstart="onDragStart(event)">
            <div class="pi-icon vrf-icon">VRF</div><span>VRF</span>
          </div>
          <div class="palette-item" draggable="true" data-type="vlan" ondragstart="onDragStart(event)">
            <div class="pi-icon vlan-icon">VLAN</div><span>VLAN</span>
          </div>
          <div class="palette-item" draggable="true" data-type="subnet" ondragstart="onDragStart(event)">
            <div class="pi-icon sub-icon">⊂</div><span>Subnet</span>
          </div>
          <div class="palette-item" draggable="true" data-type="security-zone" ondragstart="onDragStart(event)">
            <div class="pi-icon zone-icon">Z</div><span>Sec Zone</span>
          </div>
          <div class="palette-item" draggable="true" data-type="gre-tunnel" ondragstart="onDragStart(event)">
            <div class="pi-icon tun-icon">GRE</div><span>GRE Tunnel</span>
          </div>
          <div class="palette-item" draggable="true" data-type="ipsec-tunnel" ondragstart="onDragStart(event)">
            <div class="pi-icon tun-icon">IPS</div><span>IPSec</span>
          </div>
          <div class="palette-item" draggable="true" data-type="mpls-lsp" ondragstart="onDragStart(event)">
            <div class="pi-icon mpls-icon">LSP</div><span>MPLS LSP</span>
          </div>
        </div>
      </div>

      <div class="palette-section">
        <div class="palette-cat">Layout Tools</div>
        <div class="palette-items">
          <div class="palette-item layout-item" draggable="false" onclick="autoLayout('TB')" style="cursor:pointer;" title="Auto-layout: top-to-bottom (dagre) — click to rearrange all nodes vertically">
            <div class="pi-icon" style="background:var(--accent);color:#f39c12;">⇩</div><span>Layout TB</span>
          </div>
          <div class="palette-item layout-item" draggable="false" onclick="autoLayout('LR')" style="cursor:pointer;" title="Auto-layout: left-to-right (dagre) — click to rearrange all nodes horizontally">
            <div class="pi-icon" style="background:var(--accent);color:#f39c12;">⇨</div><span>Layout LR</span>
          </div>
        </div>
      </div>

      <!-- Cloud Networking — dynamically loaded from /api/cloud-objects -->
      <div id="cloud-palette-container"></div>
      <div class="palette-section">
        <div class="palette-cat">Generic Cloud</div>
        <div class="palette-items">
          <div class="palette-item" draggable="true" data-type="cloud" ondragstart="onDragStart(event)">
            <div class="pi-icon cloud-icon">☁</div><span>Cloud</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Canvas Area -->
    <div class="canvas-area" id="canvas-drop-zone"
         ondragover="event.preventDefault()"
         ondrop="onDrop(event)">
      <div id="canvas-container"></div>

      <!-- Heatmap Legend (floating, shown when overlay active) -->
      <div class="heatmap-legend" id="heatmap-legend">
        <span class="heatmap-legend-title" id="heatmap-legend-title">Bandwidth</span>
        <div class="heatmap-legend-bar">
          <span class="heatmap-legend-label" id="heatmap-legend-lo">Low</span>
          <div class="heatmap-legend-gradient"></div>
          <span class="heatmap-legend-label" id="heatmap-legend-hi">High</span>
        </div>
        <button class="heatmap-legend-close" onclick="clearHeatmapOverlay()" title="Clear overlay">&times;</button>
      </div>

      <!-- Heatmap Tooltip (follows cursor on hover) -->
      <div id="heatmap-tooltip" style="display:none;position:fixed;z-index:300;pointer-events:none;
           background:rgba(22,33,62,0.95);border:1px solid #e67e22;border-radius:6px;padding:6px 10px;
           font-size:11px;color:#ecf0f1;box-shadow:0 4px 12px rgba(0,0,0,0.5);white-space:nowrap;"></div>
    </div>

    <!-- Right Config Panel -->
    <div class="config-panel" id="config-panel">
      <div class="config-header">Properties</div>
      <div id="config-empty" class="config-empty">
        <div class="empty-icon">⬡</div>
        <p>Select an object to configure</p>
      </div>
      <div id="config-form" class="hidden">
        <div class="form-group">
          <label>Type</label>
          <input type="text" id="cfg-type" class="form-control" readonly/>
        </div>
        <div class="form-group">
          <label>Label</label>
          <input type="text" id="cfg-label" class="form-control" oninput="updateSelectedLabel(this.value)"/>
        </div>
        <div class="form-group">
          <label>IPv4 Address</label>
          <input type="text" id="cfg-ip" class="form-control" placeholder="e.g. 10.0.0.1/24" oninput="updateConfig('ip', this.value)"/>
        </div>
        <div class="form-group">
          <label>IPv6 Address</label>
          <input type="text" id="cfg-ipv6" class="form-control" placeholder="e.g. 2001:db8::1/64" oninput="updateConfig('ipv6', this.value)"/>
        </div>
        <div class="form-group">
          <label>IPv6 Link-Local</label>
          <input type="text" id="cfg-ipv6-ll" class="form-control" placeholder="e.g. fe80::1" oninput="updateConfig('ipv6_link_local', this.value)"/>
        </div>
        <div class="form-group">
          <label>Address Family</label>
          <select id="cfg-addr-family" class="form-control" onchange="updateConfig('address_family', this.value)">
            <option value="">— Not Set —</option>
            <option value="ipv4">IPv4 Only</option>
            <option value="ipv6">IPv6 Only</option>
            <option value="dual-stack">Dual-Stack (IPv4 + IPv6)</option>
          </select>
        </div>
        <div class="form-group">
          <label>IPv6 Capable</label>
          <select id="cfg-ipv6-capable" class="form-control" onchange="updateConfig('ipv6_capable', this.value)">
            <option value="">— Unknown —</option>
            <option value="yes">Yes — Hardware/software supports IPv6</option>
            <option value="no">No — Requires upgrade for IPv6</option>
            <option value="partial">Partial — Limited IPv6 support</option>
          </select>
        </div>
        <div class="form-group">
          <label>Protocol</label>
          <select id="cfg-protocol" class="form-control" onchange="updateConfig('protocol', this.value)">
            <option value="">— None —</option>
            <option value="OSPF">OSPF</option>
            <option value="BGP">BGP</option>
            <option value="EIGRP">EIGRP</option>
            <option value="IS-IS">IS-IS</option>
            <option value="RIP">RIP</option>
            <option value="HSRP">HSRP</option>
            <option value="VRRP">VRRP</option>
            <option value="GLBP">GLBP</option>
          </select>
        </div>
        <div class="form-group">
          <label>MTU</label>
          <input type="number" id="cfg-mtu" class="form-control" placeholder="1500" oninput="updateConfig('mtu', this.value)"/>
        </div>
        <div class="form-group">
          <label>VLAN ID</label>
          <input type="number" id="cfg-vlan" class="form-control" placeholder="e.g. 100" oninput="updateConfig('vlan', this.value)"/>
        </div>
        <div class="form-group">
          <label>VRF</label>
          <input type="text" id="cfg-vrf" class="form-control" placeholder="e.g. MGMT" oninput="updateConfig('vrf', this.value)"/>
        </div>
        <div class="form-group">
          <label>ASN</label>
          <input type="number" id="cfg-asn" class="form-control" placeholder="e.g. 65001" oninput="updateConfig('asn', this.value)"/>
        </div>
        <!-- BGP Attributes -->
        <div class="form-group cfg-section-header">BGP Attributes</div>
        <div class="form-group">
          <label>LOCAL_PREF</label>
          <input type="number" id="cfg-local-pref" class="form-control" placeholder="100 (default)" oninput="updateConfig('local_pref', this.value)"/>
        </div>
        <div class="form-group">
          <label>MED</label>
          <input type="number" id="cfg-med" class="form-control" placeholder="0" oninput="updateConfig('med', this.value)"/>
        </div>
        <div class="form-group">
          <label>Weight</label>
          <input type="number" id="cfg-weight" class="form-control" placeholder="0 (Cisco)" oninput="updateConfig('weight', this.value)"/>
        </div>
        <div class="form-group">
          <label>Community</label>
          <input type="text" id="cfg-community" class="form-control" placeholder="e.g. 65001:100" oninput="updateConfig('community', this.value)"/>
        </div>
        <!-- OSPF Attributes -->
        <div class="form-group cfg-section-header">OSPF Attributes</div>
        <div class="form-group">
          <label>OSPF Area</label>
          <input type="text" id="cfg-ospf-area" class="form-control" placeholder="0 (backbone)" oninput="updateConfig('ospf_area', this.value)"/>
        </div>
        <div class="form-group">
          <label>OSPF Cost</label>
          <input type="number" id="cfg-ospf-cost" class="form-control" placeholder="auto (ref_bw/bw)" oninput="updateConfig('ospf_cost', this.value)"/>
        </div>
        <!-- Device Info -->
        <div class="form-group cfg-section-header">Device Info</div>
        <div class="form-group">
          <label>Hostname</label>
          <input type="text" id="cfg-hostname" class="form-control" placeholder="e.g. rtr-core-01" oninput="updateConfig('hostname', this.value)"/>
        </div>
        <div class="form-group">
          <label>OS / Config Template</label>
          <select id="cfg-os" class="form-control" onchange="updateConfig('os', this.value)">
            <option value="">— Auto (by device type) —</option>
            <option value="ios_router">Cisco IOS (Router / Firewall)</option>
            <option value="ios_switch">Cisco IOS (Switch)</option>
            <option value="eos">Arista EOS</option>
            <option value="junos">Juniper JunOS</option>
          </select>
        </div>
        <div class="form-group">
          <label>Vendor / Model</label>
          <input type="text" id="cfg-model" class="form-control" placeholder="e.g. Cisco C9300-48T" oninput="updateConfig('model', this.value)"/>
        </div>
        <div class="form-group">
          <label>Serial Number</label>
          <input type="text" id="cfg-serial" class="form-control" placeholder="e.g. FOC2334N1AB" oninput="updateConfig('serial', this.value)"/>
        </div>
        <div class="form-group">
          <label>Asset Tag</label>
          <input type="text" id="cfg-asset-tag" class="form-control" placeholder="e.g. IT-NET-0042" oninput="updateConfig('asset_tag', this.value)"/>
        </div>
        <!-- Lifecycle & Tech Debt -->
        <div class="form-group cfg-section-header">Lifecycle &amp; Tech Debt</div>
        <div class="form-group">
          <label>Install Date</label>
          <input type="date" id="cfg-install-date" class="form-control" oninput="updateConfig('install_date', this.value)"/>
        </div>
        <div class="form-group">
          <label>End of Sale (EOS)</label>
          <input type="date" id="cfg-eos-date" class="form-control" oninput="updateConfig('eos_date', this.value)"/>
        </div>
        <div class="form-group">
          <label>End of Life (EOL)</label>
          <input type="date" id="cfg-eol-date" class="form-control" oninput="updateConfig('eol_date', this.value)"/>
        </div>
        <div class="form-group">
          <label>End of Support (EoSup)</label>
          <input type="date" id="cfg-eosup-date" class="form-control" oninput="updateConfig('eosup_date', this.value)"/>
        </div>
        <div class="form-group">
          <label>Software / Firmware Version</label>
          <input type="text" id="cfg-sw-version" class="form-control" placeholder="e.g. IOS-XE 17.9.4a" oninput="updateConfig('sw_version', this.value)"/>
        </div>
        <div class="form-group">
          <label>Hardware Revision</label>
          <input type="text" id="cfg-hw-revision" class="form-control" placeholder="e.g. V02" oninput="updateConfig('hw_revision', this.value)"/>
        </div>
        <!-- Slot / Port -->
        <div class="form-group cfg-section-header">Slot / Port</div>
        <div class="form-group">
          <label>Slot</label>
          <input type="text" id="cfg-slot" class="form-control" placeholder="e.g. 0, 1/0" oninput="updateConfig('slot', this.value)"/>
        </div>
        <div class="form-group">
          <label>Port</label>
          <input type="text" id="cfg-port" class="form-control" placeholder="e.g. Gi0/0/1, Te1/1" oninput="updateConfig('port', this.value)"/>
        </div>
        <div class="form-group">
          <label>Port Type</label>
          <select id="cfg-port-type" class="form-control" onchange="updateConfig('port_type', this.value)">
            <option value="">— Select —</option>
            <option value="GE">GbE (1G)</option>
            <option value="10GE">10GbE</option>
            <option value="25GE">25GbE</option>
            <option value="40GE">40GbE</option>
            <option value="100GE">100GbE</option>
            <option value="400GE">400GbE</option>
            <option value="SM-Fiber">SM Fiber</option>
            <option value="MM-Fiber">MM Fiber</option>
            <option value="Cat6A">Cat6A Copper</option>
            <option value="Coax">Coaxial</option>
            <option value="Console">Console</option>
          </select>
        </div>
        <div class="form-group">
          <label>Bandwidth</label>
          <input type="text" id="cfg-bandwidth" class="form-control" placeholder="e.g. 10Gbps" oninput="updateConfig('bandwidth', this.value)"/>
        </div>
        <!-- Location -->
        <div class="form-group cfg-section-header">Location</div>
        <div class="form-group">
          <label>Site</label>
          <input type="text" id="cfg-site" class="form-control" placeholder="e.g. DC-East-1" oninput="updateConfig('site', this.value)"/>
        </div>
        <div class="form-group">
          <label>Building / Floor / Room</label>
          <input type="text" id="cfg-location" class="form-control" placeholder="e.g. Bldg-A / Floor-2 / MDF" oninput="updateConfig('location', this.value)"/>
        </div>
        <div class="form-group">
          <label>Rack / U-Position</label>
          <input type="text" id="cfg-rack" class="form-control" placeholder="e.g. Rack-12 / U22-U24" oninput="updateConfig('rack', this.value)"/>
        </div>
        <!-- Peering -->
        <div class="form-group cfg-section-header">Peering</div>
        <div class="form-group">
          <label>Peer ASN</label>
          <input type="number" id="cfg-peer-asn" class="form-control" placeholder="e.g. 15169" oninput="updateConfig('peer_asn', this.value)"/>
        </div>
        <div class="form-group">
          <label>Peer IP</label>
          <input type="text" id="cfg-peer-ip" class="form-control" placeholder="e.g. 2001:db8::1" oninput="updateConfig('peer_ip', this.value)"/>
        </div>
        <div class="form-group">
          <label>Peering Type</label>
          <select id="cfg-peering-type" class="form-control" onchange="updateConfig('peering_type', this.value)">
            <option value="">— None —</option>
            <option value="transit">Transit</option>
            <option value="peer">Peer (Settlement-Free)</option>
            <option value="customer">Customer</option>
            <option value="private">Private Peering</option>
            <option value="ixp">IXP / Public Peering</option>
          </select>
        </div>
        <!-- Linked Records -->
        <div class="form-group cfg-section-header">Linked Records</div>
        <div class="form-group">
          <label>Project</label>
          <select id="cfg-project-id" class="form-control" onchange="updateConfig('project_id', this.value)">
            <option value="">— None —</option>
          </select>
        </div>
        <div class="form-group">
          <label>Circuit</label>
          <select id="cfg-circuit-id" class="form-control" onchange="updateConfig('circuit_id', this.value)">
            <option value="">— None —</option>
          </select>
        </div>
        <div class="form-group">
          <label>Customer</label>
          <select id="cfg-customer-id" class="form-control" onchange="updateConfig('customer_id', this.value)">
            <option value="">— None —</option>
          </select>
        </div>
        <div class="form-group">
          <label>IPAM Block</label>
          <select id="cfg-ipam-id" class="form-control" onchange="updateConfig('ipam_block_id', this.value)">
            <option value="">— None —</option>
          </select>
        </div>
        <div class="form-group">
          <label>Cable</label>
          <select id="cfg-cable-id" class="form-control" onchange="updateConfig('cable_id', this.value)">
            <option value="">— None —</option>
          </select>
        </div>
        <div class="form-group">
          <label>Cross-Connect</label>
          <select id="cfg-xconn-id" class="form-control" onchange="updateConfig('xconn_id', this.value)">
            <option value="">— None —</option>
          </select>
        </div>
        <div class="form-group">
          <label>Label Rotation</label>
          <div style="display:flex;align-items:center;gap:8px;">
            <input type="range" id="cfg-rotation" min="-90" max="90" step="15" value="0" style="flex:1;" oninput="applyRotation(this.value)"/>
            <span id="cfg-rotation-val" style="font-size:11px;color:var(--text-dim);min-width:30px;">0°</span>
          </div>
          <div style="display:flex;gap:4px;margin-top:4px;">
            <button class="nc-chat-btn-sm" onclick="applyRotation(0)">0°</button>
            <button class="nc-chat-btn-sm" onclick="applyRotation(-45)">-45°</button>
            <button class="nc-chat-btn-sm" onclick="applyRotation(-90)">-90°</button>
            <button class="nc-chat-btn-sm" onclick="applyRotation(45)">45°</button>
            <button class="nc-chat-btn-sm" onclick="applyRotation(90)">90°</button>
          </div>
        </div>
        <div class="form-group">
          <label>Notes</label>
          <textarea id="cfg-notes" class="form-control" rows="3" oninput="updateConfig('notes', this.value)"></textarea>
        </div>
        <!-- Color Palette -->
        <div class="form-group cfg-section-header">Colors</div>
        <div class="form-group">
          <label>Fill Color</label>
          <div class="color-swatches" id="fill-colors"></div>
        </div>
        <div class="form-group">
          <label>Border Color</label>
          <div class="color-swatches" id="stroke-colors"></div>
        </div>
        <div class="form-group">
          <label>Text Color</label>
          <div class="color-swatches" id="text-colors"></div>
        </div>
        <div class="form-actions">
          <button class="btn btn-danger-sm" onclick="deleteSelected()">Delete Object</button>
        </div>
      </div>
      <!-- Link Config Panel (shown when a link/edge is selected) -->
      <div id="link-config-form" class="hidden">
        <div class="config-header">Link Properties</div>
        <div class="form-group cfg-section-header">Routing</div>
        <div class="form-group">
          <label>Protocol</label>
          <select id="lcfg-protocol" class="form-control" onchange="updateLinkConfig('protocol', this.value)">
            <option value="">— None —</option>
            <option value="OSPF">OSPF</option>
            <option value="BGP">BGP</option>
            <option value="EIGRP">EIGRP</option>
            <option value="IS-IS">IS-IS</option>
            <option value="RIP">RIP</option>
            <option value="HSRP">HSRP</option>
            <option value="VRRP">VRRP</option>
            <option value="GLBP">GLBP</option>
            <option value="static">Static</option>
          </select>
        </div>
        <div class="form-group cfg-section-header">Interface</div>
        <div class="form-group">
          <label>Link IP (CIDR)</label>
          <input type="text" id="lcfg-ip" class="form-control" placeholder="e.g. 10.0.0.0/30" oninput="updateLinkConfig('ip', this.value)"/>
        </div>
        <div class="form-group">
          <label>VLAN ID</label>
          <input type="number" id="lcfg-vlan" class="form-control" placeholder="e.g. 100" oninput="updateLinkConfig('vlan', this.value)"/>
        </div>
        <div class="form-group">
          <label>VRF</label>
          <input type="text" id="lcfg-vrf" class="form-control" placeholder="e.g. MGMT" oninput="updateLinkConfig('vrf', this.value)"/>
        </div>
        <div class="form-group">
          <label>MTU</label>
          <input type="number" id="lcfg-mtu" class="form-control" placeholder="1500" oninput="updateLinkConfig('mtu', this.value)"/>
        </div>
        <div class="form-group" style="display:flex;align-items:center;gap:8px;">
          <input type="checkbox" id="lcfg-trunk" onchange="updateLinkConfig('trunk', this.checked)" style="width:16px;height:16px;"/>
          <label for="lcfg-trunk" style="margin:0;cursor:pointer;">Trunk (802.1Q)</label>
        </div>
        <div class="form-actions">
          <button class="btn btn-danger-sm" onclick="deleteSelected()">Delete Link</button>
        </div>
      </div>
      <!-- Security Boundaries panel -->
      <div class="boundary-panel">
        <div class="boundary-panel-header">Security Boundaries</div>
        <div id="boundary-list">
          <div class="boundary-empty">No boundaries defined. Use fence tool to create.</div>
        </div>
      </div>
    </div>

  </div><!-- end canvas-body -->

  <!-- Status Bar -->
  <div class="canvas-statusbar">
    <span id="sb-objects">Objects: 0</span>
    <span id="sb-links">Links: 0</span>
    <span id="sb-saved">Not saved</span>
    <span id="sb-zoom">Zoom: 100%</span>
  </div>

</div><!-- end canvas-layout -->

<!-- Security Boundary Fence Dialog -->
<div id="fence-overlay" class="fence-overlay hidden">
  <div class="fence-dialog">
    <h3>⬡ Create Security Boundary</h3>
    <label>Selected Devices (<span id="fence-node-count">0</span>)</label>
    <div id="fence-node-list" class="fence-node-list"></div>
    <label>Classification Level</label>
    <select id="fence-classification">
      <option value="CUI" selected>CUI — Controlled Unclassified</option>
      <option value="SECRET">SECRET</option>
      <option value="TOP SECRET">TOP SECRET</option>
      <option value="PUBLIC">PUBLIC</option>
    </select>
    <label>Boundary Label (optional)</label>
    <input type="text" id="fence-label" placeholder="e.g., CUI Enclave, SECRET VLAN, Server Farm"/>
    <label>Notes</label>
    <textarea id="fence-notes" placeholder="Boundary justification or description..."></textarea>
    <div class="fence-actions">
      <button class="fence-btn-cancel" onclick="closeFenceDialog()">Cancel</button>
      <button class="fence-btn-create" onclick="createBoundaryFromFence()">Create Boundary</button>
    </div>
  </div>
</div>

<!-- Simulation Overlay -->
<div id="sim-overlay" class="sim-overlay hidden">
  <div class="sim-panel">
    <div class="sim-panel-header">
      <h3>Simulation</h3>
      <button class="close-btn" onclick="closeSimPanel()">✕</button>
    </div>
    <div class="form-group">
      <label>Type</label>
      <select id="sp-sim-type" class="form-control" onchange="onSimTypeChange(this.value)">
        <option value="ping">Ping</option>
        <option value="traceroute">Traceroute</option>
        <option value="spof">SPOF Analysis</option>
        <option value="failover">Failover / Resilience</option>
        <option value="load">Load Heatmap</option>
        <option value="bgp_bestpath">BGP Best Path Selection</option>
        <option value="bgp_propagation">BGP Route Propagation</option>
        <option value="ospf_spf">OSPF SPF (Shortest Path First)</option>
        <option value="ospf_cost">OSPF Cost Analysis</option>
        <option value="jumbo_mtu">Jumbo Frame / MTU Path Check</option>
        <option value="dwdm_optical">DWDM / Optical Quality</option>
        <option value="fiber_budget">Fiber Power Budget</option>
        <option value="blast_radius">Blast Radius (Zero Trust)</option>
      </select>
      <!-- Extra params for routing sims -->
      <div id="sim-extra-params" class="hidden" style="margin-top:8px;">
        <div class="form-group" id="sim-prefix-group" style="display:none;">
          <label>Prefix / Destination</label>
          <input type="text" id="sp-prefix" class="form-control" placeholder="10.0.0.0/24"/>
        </div>
        <div class="form-group" id="sim-mtu-group" style="display:none;">
          <label>Desired MTU</label>
          <input type="number" id="sp-mtu-size" class="form-control" value="9000" placeholder="9000 (jumbo)"/>
        </div>
        <div class="form-group" id="sim-blast-group" style="display:none;">
          <label>Max Hops</label>
          <input type="number" id="sp-max-hops" class="form-control" value="3" min="1" max="10" placeholder="3"/>
          <small style="color:#888;">Click a device first, then Run to simulate compromise</small>
        </div>
      </div>
    </div>
    <button class="btn btn-primary" onclick="runSimulation()">Run</button>
    <div id="sim-output" class="sim-output"></div>
  </div>
</div>

<!-- Blast Radius Context Menu -->
<div id="blast-ctx-menu" style="
  display:none;position:fixed;z-index:9999;
  background:#1a1a2e;border:1px solid #e94560;border-radius:6px;
  box-shadow:0 4px 20px rgba(233,69,96,0.4);min-width:240px;overflow:hidden;">
  <div style="padding:8px 14px;background:#12122a;border-bottom:1px solid #2a2a4a;
    font-size:11px;color:#7a8cb0;text-transform:uppercase;letter-spacing:1px;">Simulation</div>
  <div id="blast-ctx-device-name" style="padding:8px 14px 4px;font-size:12px;color:#e94560;font-weight:600;"></div>
  <button onclick="triggerBlastRadiusFromContext()" class="ctx-menu-btn">
    &#x1F4A5; What if compromised?
    <span class="ctx-menu-sub">Blast radius — animated hop-by-hop propagation</span>
  </button>
  <button onclick="triggerBlastRadiusFromContext(5)" class="ctx-menu-btn">
    &#x1F6E1; Deep blast (5 hops)
    <span class="ctx-menu-sub">Extended reachability analysis</span>
  </button>
  <div style="border-top:1px solid #2a2a4a;margin:0;"></div>
  <button onclick="triggerFailoverFromContext()" class="ctx-menu-btn">
    &#x26A0; What if this device fails?
    <span class="ctx-menu-sub">Failover — shows redundant paths and impact</span>
  </button>
  <button onclick="triggerSpofFromContext()" class="ctx-menu-btn">
    &#x1F50D; SPOF analysis
    <span class="ctx-menu-sub">Single points of failure in the topology</span>
  </button>
</div>

<!-- Link Capture Context Menu -->
<div id="link-ctx-menu" style="
  display:none;position:fixed;z-index:9999;
  background:#1a1a2e;border:1px solid #2ecc71;border-radius:6px;
  box-shadow:0 4px 20px rgba(46,204,113,0.35);min-width:220px;overflow:hidden;">
  <div style="padding:8px 14px;background:#12122a;border-bottom:1px solid #2a2a4a;
    font-size:11px;color:#7a8cb0;text-transform:uppercase;letter-spacing:1px;">Link Capture</div>
  <div id="link-ctx-link-label" style="padding:8px 14px 4px;font-size:12px;color:#2ecc71;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;"></div>
  <button onclick="startLinkCapture()" class="ctx-menu-btn" id="link-ctx-start-btn">
    &#x1F4E1; Start Capture
    <span class="ctx-menu-sub">Stream packets to PCAP viewer</span>
  </button>
  <button onclick="showCaptures()" class="ctx-menu-btn">
    &#x1F4C2; View Captures
    <span class="ctx-menu-sub">List past captures on this link</span>
  </button>
</div>

<!-- Packet Capture Viewer Modal -->
<div id="capture-overlay" class="sim-overlay hidden">
  <div class="sim-panel" style="max-width:560px;max-height:80vh;display:flex;flex-direction:column;">
    <div class="sim-panel-header">
      <h3>&#x1F4E1; Packet Capture</h3>
      <button class="close-btn" onclick="closeCapturePanel()">&#x2715;</button>
    </div>

    <!-- Active capture status -->
    <div id="cap-status-section" style="padding:12px 16px;border-bottom:1px solid #2a2a4a;">
      <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">
        <span id="cap-status-badge" style="font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600;"></span>
        <span id="cap-link-label" style="font-size:13px;color:#cdd6f4;"></span>
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:11px;color:#7a8cb0;">
        <div>Size: <span id="cap-size" style="color:#cdd6f4;">—</span></div>
        <div>SHA256: <span id="cap-sha" style="color:#cdd6f4;font-family:monospace;font-size:10px;" title=""></span></div>
        <div>Expires: <span id="cap-expiry" style="color:#cdd6f4;">—</span></div>
        <div>ID: <span id="cap-id-display" style="color:#cdd6f4;font-family:monospace;font-size:10px;"></span></div>
      </div>
      <div id="cap-spinner" style="display:none;margin-top:8px;font-size:12px;color:#f39c12;">
        &#x23F3; Capturing packets… <span id="cap-elapsed">0</span>s
      </div>
    </div>

    <!-- Actions -->
    <div style="padding:12px 16px;display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid #2a2a4a;">
      <button id="cap-stop-btn" onclick="stopCurrentCapture()" style="
        display:none;padding:6px 14px;background:#e74c3c;border:none;border-radius:4px;
        color:#fff;font-size:12px;cursor:pointer;">&#x23F9; Stop Capture</button>
      <button id="cap-download-btn" onclick="downloadCurrentCapture()" style="
        display:none;padding:6px 14px;background:#2ecc71;border:none;border-radius:4px;
        color:#1a1a2e;font-size:12px;font-weight:600;cursor:pointer;">&#x2B07; Download .pcap</button>
      <button onclick="startLinkCaptureFromPanel()" id="cap-new-btn" style="
        padding:6px 14px;background:#3498db;border:none;border-radius:4px;
        color:#fff;font-size:12px;cursor:pointer;">&#x25B6; New Capture</button>
    </div>

    <!-- Capture history for this link -->
    <div style="padding:8px 16px 4px;font-size:11px;color:#7a8cb0;text-transform:uppercase;letter-spacing:1px;">
      Link Capture History</div>
    <div id="cap-history-list" style="overflow-y:auto;flex:1;padding:0 8px 8px;">
      <div style="color:#7a8cb0;font-size:12px;text-align:center;padding:16px;">No captures yet.</div>
    </div>
  </div>
</div>

<!-- Templates Overlay -->
<div id="tpl-overlay" class="sim-overlay hidden">
  <div class="sim-panel tpl-panel">
    <div class="sim-panel-header">
      <h3>Load Template</h3>
      <button class="close-btn" onclick="closeTplPanel()">✕</button>
    </div>
    <div id="tpl-list" class="tpl-list-panel"></div>
  </div>
</div>
<!-- Enclave-in-a-Box Snippets Overlay -->
<div id="snippets-overlay" class="sim-overlay hidden">
  <div class="sim-panel" style="max-width:640px;max-height:80vh;display:flex;flex-direction:column;">
    <div class="sim-panel-header">
      <h3>&#x229e; Enclave-in-a-Box Snippets</h3>
      <button class="close-btn" onclick="closeSnippetsPanel()">&#x2715;</button>
    </div>
    <p style="font-size:11px;color:var(--text-dim);margin:0 0 10px 0;padding:0 4px;">
      Pre-built compliance-validated sub-topologies. All STIG baselines, FIPS mode, and
      NIST controls are pre-populated. Click <strong>Insert onto Canvas</strong> to place
      at the current canvas center.
    </p>
    <div id="snippets-list" style="overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:10px;padding:4px;">
      <div style="color:var(--text-dim);font-size:12px;text-align:center;padding:20px;">Loading snippets…</div>
    </div>
  </div>
</div>

<!-- Snippet Integration Guide Overlay -->
<div id="integration-guide-overlay" class="sim-overlay hidden">
  <div class="sim-panel" style="max-width:480px;max-height:80vh;display:flex;flex-direction:column;">
    <div class="sim-panel-header">
      <h3>&#x1f517; Integration Guide</h3>
      <button class="close-btn" onclick="closeIntegrationGuide()">&#x2715;</button>
    </div>
    <div id="integration-guide-content" style="overflow-y:auto;flex:1;padding:4px;display:flex;flex-direction:column;gap:10px;">
    </div>
    <div style="padding:8px 4px 0;border-top:1px solid var(--border,#2a3a5e);margin-top:8px;">
      <button class="btn btn-sm" style="width:100%;background:transparent;border:1px solid var(--border,#2a3a5e);color:var(--text-dim,#7a8cb0);"
        onclick="closeIntegrationGuide()">Done — I'll connect manually</button>
    </div>
  </div>
</div>

<!-- Custom Device Dialog -->
<div id="custom-device-overlay" class="sim-overlay hidden">
  <div class="sim-panel" style="max-width:380px;">
    <div class="sim-panel-header">
      <h3>Create Custom Device</h3>
      <button class="close-btn" onclick="closeCustomDeviceDialog()">✕</button>
    </div>
    <div class="form-group">
      <label>Type ID</label>
      <input type="text" id="cd-type-id" class="form-control" placeholder="e.g. my-device (lowercase, hyphens)"/>
    </div>
    <div class="form-group">
      <label>Display Name</label>
      <input type="text" id="cd-label" class="form-control" placeholder="e.g. My Custom Device"/>
    </div>
    <div class="form-group">
      <label>Symbol (2-3 chars)</label>
      <input type="text" id="cd-symbol" class="form-control" placeholder="e.g. MCD" maxlength="4"/>
    </div>
    <div class="form-group">
      <label>Fill Color</label>
      <input type="color" id="cd-fill" class="form-control" value="#1a1a2e" style="height:32px;padding:2px;"/>
    </div>
    <div class="form-group">
      <label>Border Color</label>
      <input type="color" id="cd-stroke" class="form-control" value="#7a8cb0" style="height:32px;padding:2px;"/>
    </div>
    <div class="form-group">
      <label>Bandwidth (optional)</label>
      <input type="text" id="cd-bandwidth" class="form-control" placeholder="e.g. 800GbE, 1.6TbE"/>
    </div>
    <div class="form-group">
      <label>Preview</label>
      <div id="cd-preview" style="background:#12122a;border-radius:6px;padding:10px;text-align:center;min-height:60px;display:flex;align-items:center;justify-content:center;"></div>
    </div>
    <button class="btn btn-primary" onclick="createCustomDevice()" style="width:100%;">Add to Palette</button>
  </div>
</div>
<!-- AI Topology Generator Dialog (legacy — still works) -->
<div id="ai-generate-overlay" class="sim-overlay hidden">
  <div class="sim-panel" style="max-width:520px;">
    <div class="sim-panel-header">
      <h3>AI Topology Generator</h3>
      <button class="close-btn" onclick="closeAiGenerateDialog()">✕</button>
    </div>
    <div class="form-group">
      <label>Describe your network</label>
      <textarea id="ai-gen-description" class="form-control" rows="5" placeholder="Example: A 3-tier campus network with redundant core switches, distribution layer per building, access switches with PoE WAPs, a DMZ with dual firewalls, and a data center spine-leaf fabric connected via 10GbE"></textarea>
    </div>
    <div class="form-group" style="display:flex;gap:8px;">
      <button class="btn btn-primary" id="ai-gen-btn" onclick="runAiGenerate()" style="flex:1;">Generate Topology</button>
      <button class="btn btn-secondary" onclick="closeAiGenerateDialog()">Cancel</button>
    </div>
    <div id="ai-gen-status" class="sim-output" style="display:none;"></div>
  </div>
</div>
<!-- CR Markup Mode Panel (slide-out left) -->
<div id="nc-cr-panel" class="nc-cr-panel hidden">
  <div class="nc-cr-header">
    <span class="nc-cr-title">Change Request Markup</span>
    <div style="display:flex;gap:6px;align-items:center;">
      <a id="cr-full-page-link" href="#" target="_blank" style="font-size:11px;color:var(--text-dim);text-decoration:none;" title="Open full CR editor">Full Editor</a>
      <button class="close-btn" onclick="toggleCrMarkupMode()" title="Close">&#x2715;</button>
    </div>
  </div>
  <div class="nc-cr-body">
    <!-- CR selector -->
    <div class="cr-select-row">
      <select id="cr-select" onchange="crSelectChanged()">
        <option value="">— Select Change Request —</option>
      </select>
      <button onclick="crCreateNew()" title="Create new CR">+ New</button>
    </div>

    <!-- Active CR info -->
    <div id="cr-active-info" class="hidden" style="margin-bottom:10px;padding:8px;background:var(--bg3);border-radius:6px;font-size:12px;">
      <div style="display:flex;align-items:center;justify-content:space-between;">
        <strong id="cr-active-title"></strong>
        <span id="cr-active-status" class="cr-status-badge cr-status-draft"></span>
      </div>
      <div id="cr-active-desc" style="color:var(--text-dim);margin-top:4px;font-size:11px;"></div>
    </div>

    <!-- Action mode selector -->
    <div id="cr-action-section" class="hidden">
      <div style="font-size:11px;color:var(--text-dim);margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;">Click an element on the canvas to mark it:</div>
      <div class="cr-action-bar">
        <button class="cr-action-btn cr-add" id="cr-btn-add" onclick="crSetAction('add')" title="Mark element for addition (green)">&#x2795; Add</button>
        <button class="cr-action-btn cr-remove" id="cr-btn-remove" onclick="crSetAction('remove')" title="Mark element for removal (red)">&#x2796; Remove</button>
        <button class="cr-action-btn cr-modify" id="cr-btn-modify" onclick="crSetAction('modify')" title="Mark element for modification (yellow)">&#x270f; Modify</button>
        <button class="cr-action-btn cr-clear" onclick="crSetAction(null)" title="Exit markup selection">&#x2715; Clear</button>
      </div>
    </div>

    <!-- Markup items list -->
    <div id="cr-items-section" class="cr-items-section hidden">
      <div style="display:flex;align-items:center;justify-content:space-between;">
        <h4>Marked Changes (<span id="cr-items-count">0</span>)</h4>
      </div>
      <div id="cr-items-list"></div>
      <button class="cr-gen-btn" id="cr-gen-btn" onclick="crGenerateDocument()" title="Generate CAB review document with diffs">Generate CAB Document</button>
    </div>

    <!-- Document preview (inline) -->
    <div id="cr-doc-preview" class="hidden" style="margin-top:12px;">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
        <h4 style="margin:0;font-size:11px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-dim);">CAB Document Preview</h4>
        <button style="font-size:11px;padding:2px 8px;border:1px solid var(--border);background:transparent;color:var(--text-dim);border-radius:4px;cursor:pointer;" onclick="crCopyDocument()" title="Copy document markdown">Copy</button>
      </div>
      <div id="cr-doc-body" style="font-family:var(--font-mono);font-size:11px;line-height:1.5;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:10px;max-height:300px;overflow-y:auto;white-space:pre-wrap;color:var(--text);"></div>
    </div>
  </div>
  <div class="nc-cr-footer">
    <span id="cr-footer-status">Select or create a Change Request to begin markup.</span>
  </div>
</div>

<!-- Justification dialog (floating, shown when marking an element) -->
<div id="cr-just-dialog" class="cr-just-dialog hidden" style="top:50%;left:50%;transform:translate(-50%,-50%);">
  <h4 id="cr-just-title">Mark Element</h4>
  <div id="cr-just-entity" style="font-size:12px;color:var(--text-dim);margin-bottom:8px;"></div>
  <label style="font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px;">Justification (optional):</label>
  <textarea id="cr-just-text" placeholder="Why is this change needed?"></textarea>
  <div id="cr-just-modify-fields" class="hidden" style="margin-top:8px;">
    <label style="font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px;">After-state JSON (proposed changes):</label>
    <textarea id="cr-just-after" style="height:50px;" placeholder='e.g. {"ip":"10.0.0.2/24","protocol":"BGP"}'></textarea>
  </div>
  <div class="cj-actions">
    <button class="cj-btn" onclick="crJustCancel()">Cancel</button>
    <button class="cj-btn cj-btn-primary" onclick="crJustConfirm()">Mark</button>
  </div>
</div>

<!-- Embedded Chat Panel (slide-out) -->
<div id="nc-chat-panel" class="nc-chat-panel hidden">
  <div class="nc-chat-header">
    <span class="nc-chat-title">Network Assistant</span>
    <div class="nc-chat-header-actions">
      <button class="nc-chat-btn-sm" onclick="ncChatClear()" title="Clear chat">Clear</button>
      <button class="close-btn" onclick="ncChatClose()">✕</button>
    </div>
  </div>
  <div class="nc-chat-messages" id="nc-chat-messages">
    <div class="nc-chat-welcome">
      <div style="font-size:20px;margin-bottom:6px;">✦</div>
      <p>Describe a network topology and I'll generate it on the canvas.</p>
      <p style="color:var(--text-dim);font-size:11px;">Try: "3-tier campus with DMZ" or "MPLS L3VPN with dual PE routers"</p>
    </div>
  </div>
  <div class="nc-chat-input-area">
    <textarea id="nc-chat-input" class="nc-chat-input" rows="2" placeholder="Describe your network..." onkeydown="ncChatKeydown(event)"></textarea>
    <button class="nc-chat-send-btn" id="nc-chat-send-btn" onclick="ncChatSend()">Send</button>
  </div>
</div>
<!-- Rack Elevation View Panel -->
<div id="nc-rack-panel" class="nc-rack-panel hidden">
  <div class="nc-rack-header">
    <span class="nc-rack-title">Rack Elevation</span>
    <div class="nc-rack-header-actions">
      <select id="rack-u-size" class="nc-rack-select" onchange="renderRackView()">
        <option value="48">48U</option>
        <option value="42" selected>42U</option>
        <option value="40">40U</option>
        <option value="24">24U</option>
        <option value="12">12U</option>
      </select>
      <button class="nc-chat-btn-sm" onclick="exportRackSVG()" title="Export rack as SVG">Export</button>
      <button class="close-btn" onclick="closeRackView()">&#x2715;</button>
    </div>
  </div>
  <div class="nc-rack-info" id="rack-info">
    <span id="rack-site-label">No rack selected</span>
  </div>
  <div class="nc-rack-body" id="nc-rack-body">
    <svg id="rack-svg" width="300" height="900"></svg>
  </div>
  <div class="nc-rack-stats" id="rack-stats">
    <span id="rack-stat-used">Used: 0U</span>
    <span id="rack-stat-free">Free: 42U</span>
    <span id="rack-stat-power">Devices: 0</span>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  const TOPOLOGY_ID = "{{ topology_id }}";
  const TOPOLOGY_NAME = "{{ topology_name }}";

  // Set links based on topology ID
  if (TOPOLOGY_ID && TOPOLOGY_ID !== 'new') {
    document.getElementById('tb-versions-link').href = NC_BASE + '/versions/' + TOPOLOGY_ID;
    document.getElementById('tb-mc-link').href = NC_BASE + '/montecarlo/' + TOPOLOGY_ID;
    document.getElementById('tb-compliance-link').href = NC_BASE + '/compliance/' + TOPOLOGY_ID;
  }

  function saveAsTopology() {
    const name = prompt('Save as new topology name:', TOPOLOGY_NAME + ' (copy)');
    if (!name) return;
    fetch(NC_BASE + '/api/topologies/' + TOPOLOGY_ID + '/save-as', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({name: name})
    }).then(r => r.json()).then(d => {
      if (d.redirect) { alert('Saved as: ' + d.name); window.location = d.redirect; }
      else alert('Error: ' + (d.error || 'Unknown'));
    });
  }

  function saveAsTemplate() {
    const name = prompt('Template name:', TOPOLOGY_NAME);
    if (!name) return;
    const category = prompt('Category (e.g. Custom, Campus LAN, Data Center):', 'Custom');
    if (category === null) return;
    fetch(NC_BASE + '/api/topologies/' + TOPOLOGY_ID + '/save-as-template', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({name: name, category: category})
    }).then(r => r.json()).then(d => {
      if (d.id) alert('Saved as template: ' + d.name + ' (ID: ' + d.id + ')');
      else alert('Error: ' + (d.error || 'Unknown'));
    });
  }

  // ── ATO Package Auto-Generator ─────────────────────────────────────────
  // ── Scorecard / Tech Debt / IPv6 Readiness overlays ──────────────────────
  async function openScorecard() {
    if (TOPOLOGY_ID === 'new') { alert('Save the topology first.'); return; }
    const d = await fetch(NC_BASE + '/api/design-scorecard/' + TOPOLOGY_ID).then(r => r.json());
    if (d.error) { alert(d.error); return; }
    let html = '<h3 style="color:#27ae60;">Design Scorecard — ' + d.overall_score + '%</h3>';
    html += '<div style="display:flex;gap:8px;margin-bottom:12px;">';
    Object.entries(d.categories || {}).forEach(([cat, v]) => {
      const color = v.pct >= 80 ? '#27ae60' : v.pct >= 50 ? '#f39c12' : '#e74c3c';
      html += '<div style="flex:1;text-align:center;padding:8px;background:#0f2040;border-radius:6px;border-top:3px solid ' + color + ';"><div style="font-size:20px;font-weight:700;color:' + color + ';">' + v.pct + '%</div><div style="font-size:10px;color:#7a8cb0;text-transform:capitalize;">' + cat.replace(/_/g,' ') + '</div></div>';
    });
    html += '</div><table style="width:100%;font-size:11px;color:#eaeaea;border-collapse:collapse;"><thead><tr><th style="text-align:left;padding:4px;border-bottom:1px solid #1e3a6e;">Check</th><th style="padding:4px;border-bottom:1px solid #1e3a6e;">Status</th><th style="text-align:left;padding:4px;border-bottom:1px solid #1e3a6e;">Detail</th></tr></thead><tbody>';
    (d.checks || []).forEach(c => {
      html += '<tr><td style="padding:3px 4px;">' + c.name + '</td><td style="padding:3px 4px;text-align:center;">' + (c.passed ? '<span style="color:#27ae60;">PASS</span>' : '<span style="color:#e74c3c;">FAIL</span>') + '</td><td style="padding:3px 4px;color:#7a8cb0;">' + (c.detail || '') + '</td></tr>';
    });
    html += '</tbody></table>';
    _showInfoOverlay(html);
  }

  async function openTechDebt() {
    if (TOPOLOGY_ID === 'new') { alert('Save the topology first.'); return; }
    const d = await fetch(NC_BASE + '/api/tech-debt/' + TOPOLOGY_ID).then(r => r.json());
    if (d.error) { alert(d.error); return; }
    const s = d.summary || {};
    let html = '<h3 style="color:#e67e22;">Tech Debt Analysis — Score: ' + s.tech_debt_score + '</h3>';
    html += '<div style="display:flex;gap:12px;margin-bottom:12px;font-size:12px;">';
    html += '<span style="color:#e74c3c;">Past EOL: ' + s.past_eol + '</span>';
    html += '<span style="color:#f39c12;">Past EOS: ' + s.past_eos + '</span>';
    html += '<span style="color:#3498db;">Approaching: ' + s.approaching_eol_12mo + '</span>';
    html += '<span style="color:#7a8cb0;">No data: ' + s.no_lifecycle_data + '</span>';
    html += '</div>';
    (d.devices || []).forEach(dev => {
      if (dev.issues.length === 0) return;
      const color = dev.risk_level === 'critical' ? '#e74c3c' : dev.risk_level === 'high' ? '#f39c12' : '#7a8cb0';
      html += '<div style="padding:4px 0;border-bottom:1px solid #1e3a6e;font-size:11px;"><strong style="color:' + color + ';">' + dev.label + '</strong> (' + dev.type + ') — ' + dev.issues.join('; ') + '</div>';
    });
    if (d.devices.every(dev => dev.issues.length === 0)) html += '<div style="color:#27ae60;font-size:12px;">No tech debt issues detected. Configure EOL/EOS dates in device properties for tracking.</div>';
    _showInfoOverlay(html);
  }

  async function openIpv6Readiness() {
    if (TOPOLOGY_ID === 'new') { alert('Save the topology first.'); return; }
    const d = await fetch(NC_BASE + '/api/ipv6-readiness/' + TOPOLOGY_ID).then(r => r.json());
    if (d.error) { alert(d.error); return; }
    const s = d.summary || {};
    let html = '<h3 style="color:#3498db;">IPv6 Readiness — ' + s.readiness_pct + '% Ready</h3>';
    html += '<div style="display:flex;gap:12px;margin-bottom:12px;font-size:12px;">';
    html += '<span style="color:#27ae60;">Capable: ' + s.capable_yes + '</span>';
    html += '<span style="color:#e74c3c;">Not capable: ' + s.capable_no + '</span>';
    html += '<span style="color:#f39c12;">Partial: ' + s.capable_partial + '</span>';
    html += '<span style="color:#7a8cb0;">Unknown: ' + s.capable_unknown + '</span>';
    html += '<span style="color:#3498db;">Dual-stack: ' + s.dual_stack_count + '</span>';
    html += '</div>';
    html += '<div style="padding:8px;background:#0f2040;border-radius:6px;font-size:12px;margin-bottom:12px;"><strong>Recommendation:</strong> ' + (d.recommendation || 'N/A') + '</div>';
    (d.devices || []).forEach(dev => {
      if (dev.issues.length === 0) return;
      html += '<div style="padding:3px 0;border-bottom:1px solid #1e3a6e;font-size:11px;"><strong>' + dev.label + '</strong> — ' + dev.issues.join('; ') + '</div>';
    });
    _showInfoOverlay(html);
  }

  function _showInfoOverlay(html) {
    let overlay = document.getElementById('info-overlay');
    if (!overlay) {
      overlay = document.createElement('div');
      overlay.id = 'info-overlay';
      overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:9999;display:flex;align-items:center;justify-content:center;';
      overlay.addEventListener('click', e => { if (e.target === overlay) overlay.remove(); });
      document.body.appendChild(overlay);
    }
    overlay.innerHTML = '<div style="background:#16213e;border:1px solid #1e3a6e;border-radius:10px;padding:20px;max-width:800px;width:90%;max-height:80vh;overflow-y:auto;">' + html + '<div style="text-align:right;margin-top:12px;"><button onclick="document.getElementById(\'info-overlay\').remove()" style="background:#e94560;color:#fff;border:none;padding:6px 16px;border-radius:4px;cursor:pointer;">Close</button></div></div>';
  }

  function generateAtoPackage() {
    if (TOPOLOGY_ID === 'new') { alert('Save the topology first.'); return; }
    // Check if canvas has nodes
    const elements = graph.getElements();
    const nodeCount = elements.filter(el => el.get('nodeType')).length;
    if (nodeCount === 0) {
      alert('The canvas is empty. Add network devices (routers, switches, firewalls, etc.) to the topology before generating an ATO package.\n\nTip: Drag devices from the palette on the left, or load a template from the Templates panel.');
      return;
    }
    document.getElementById('ato-overlay').classList.remove('hidden');
  }
  function closeAtoDialog() { document.getElementById('ato-overlay').classList.add('hidden'); }

  async function exportInventory(fmt) {
    if (TOPOLOGY_ID === 'new') { alert('Save the topology first.'); return; }
    const endpoint = NC_BASE + '/api/export/' + TOPOLOGY_ID + '/' + fmt;
    try {
      const r = await fetch(endpoint, {method: 'POST', headers: {'Content-Type': 'application/json'}, body: '{}'});
      const data = await r.json();
      if (data.error) { alert('Export failed: ' + data.error); return; }
      const blob = new Blob([data.content], {type: 'text/plain'});
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = data.filename;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      setStatus((fmt === 'ansible' ? 'Ansible inventory' : 'Terraform HCL') + ' exported: ' + data.filename);
    } catch (e) {
      alert('Export error: ' + e.message);
    }
  }

  async function exportDeviceConfigs() {
    if (TOPOLOGY_ID === 'new') { alert('Save the topology first.'); return; }
    setStatus('Generating device configs…');
    try {
      const r = await fetch(NC_BASE + '/api/export/' + TOPOLOGY_ID + '/device-configs', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({format: 'zip'}),
      });
      const data = await r.json();
      if (data.error) { alert('Export failed: ' + data.error); return; }
      if (data.device_count === 0) {
        alert('No configurable devices found (add routers, switches, or firewalls to the canvas).');
        setStatus('No configurable devices.');
        return;
      }
      // Decode base64 ZIP and trigger download
      const raw = atob(data.content_b64);
      const bytes = new Uint8Array(raw.length);
      for (let i = 0; i < raw.length; i++) bytes[i] = raw.charCodeAt(i);
      const blob = new Blob([bytes], {type: 'application/zip'});
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = data.filename;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      setStatus('Device configs exported: ' + data.filename + ' (' + data.device_count + ' devices)');
    } catch (e) {
      alert('Export error: ' + e.message);
      setStatus('Device config export failed.');
    }
  }

  function exportFipsReport() {
    if (TOPOLOGY_ID === 'new') { alert('Save the topology first.'); return; }
    const btn = document.getElementById('tb-fips-report-btn');
    const origText = btn.textContent;
    btn.disabled = true; btn.textContent = 'Generating...';
    fetch(NC_BASE + '/api/compliance/' + TOPOLOGY_ID + '/fips-report', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({format: 'html'})
    }).then(r => {
      if (!r.ok) throw new Error('Failed to generate FIPS report');
      return r.blob();
    }).then(blob => {
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = TOPOLOGY_NAME.replace(/[^a-zA-Z0-9_-]/g, '_') + '_fips_report.html';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      setStatus('FIPS 140 Encryption Coverage Report exported');
      btn.disabled = false; btn.textContent = origText;
    }).catch(err => {
      alert('Error: ' + err.message);
      btn.disabled = false; btn.textContent = origText;
    });
  }

  function runAtoGenerate() {
    const btn = document.getElementById('ato-gen-btn');
    const output = document.getElementById('ato-gen-output');
    btn.disabled = true; btn.textContent = 'Generating...';
    output.style.display = 'block'; output.innerHTML = '<p style="color:#f39c12;">Generating ATO package...</p>';
    const regionId = document.getElementById('ato-region-select').value || null;
    const sysName = document.getElementById('ato-system-name').value || TOPOLOGY_NAME;
    fetch(NC_BASE + '/api/ato/' + TOPOLOGY_ID + '/generate', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({region_id: regionId, system_name: sysName})
    }).then(r => r.json()).then(pkg => {
      btn.disabled = false; btn.textContent = 'Generate ATO Package';
      if (pkg.error) { output.innerHTML = '<p style="color:#e74c3c;">Error: ' + pkg.error + '</p>'; return; }
      const s = pkg.summary || {};
      const readinessColor = s.overall_readiness === 'GREEN' ? '#2ecc71' : s.overall_readiness === 'YELLOW' ? '#f1c40f' : '#e74c3c';
      let html = '<div style="margin-bottom:12px;">';
      html += '<h4 style="color:#ecf0f1;margin:0 0 8px;">ATO Package Generated</h4>';
      html += '<table style="width:100%;font-size:12px;color:#bdc3c7;border-collapse:collapse;">';
      html += '<tr><td style="padding:3px 6px;">Readiness</td><td style="padding:3px 6px;color:' + readinessColor + ';font-weight:bold;">' + (s.overall_readiness||'?') + '</td></tr>';
      html += '<tr><td style="padding:3px 6px;">STIG Pass Rate</td><td style="padding:3px 6px;">' + (s.stig_pass_rate||0) + '%' + (s.stig_gate_passed ? ' ✓' : ' ✗ CAT1 OPEN') + '</td></tr>';
      html += '<tr><td style="padding:3px 6px;">Compliance Score</td><td style="padding:3px 6px;">' + (s.compliance_score||0) + '%</td></tr>';
      html += '<tr><td style="padding:3px 6px;">Encryption Coverage</td><td style="padding:3px 6px;">' + (s.encryption_coverage_pct||0) + '%</td></tr>';
      html += '<tr><td style="padding:3px 6px;">Security Zones</td><td style="padding:3px 6px;">' + (s.zone_count||0) + '</td></tr>';
      html += '<tr><td style="padding:3px 6px;">Data Flows</td><td style="padding:3px 6px;">' + (s.total_flows||0) + '</td></tr>';
      html += '<tr><td style="padding:3px 6px;">Protocols</td><td style="padding:3px 6px;">' + (s.total_protocols||0) + (s.insecure_protocols ? ' (' + s.insecure_protocols + ' insecure!)' : '') + '</td></tr>';
      html += '<tr><td style="padding:3px 6px;">Findings</td><td style="padding:3px 6px;">CAT1:' + (s.cat1_findings||0) + ' CAT2:' + (s.cat2_findings||0) + ' CAT3:' + (s.cat3_findings||0) + '</td></tr>';
      html += '</table></div>';
      // Boundary diagram SVG preview
      if (pkg.artifacts && pkg.artifacts.system_boundary_diagram && pkg.artifacts.system_boundary_diagram.svg) {
        html += '<details style="margin-bottom:8px;"><summary style="color:#3498db;cursor:pointer;font-size:12px;">System Boundary Diagram (SVG)</summary>';
        html += '<div style="overflow:auto;max-height:300px;margin-top:4px;background:#111;border-radius:4px;padding:4px;">' + pkg.artifacts.system_boundary_diagram.svg + '</div></details>';
      }
      // PPS Matrix preview
      if (pkg.artifacts && pkg.artifacts.ports_protocols_services && pkg.artifacts.ports_protocols_services.matrix) {
        const m = pkg.artifacts.ports_protocols_services.matrix;
        html += '<details style="margin-bottom:8px;"><summary style="color:#3498db;cursor:pointer;font-size:12px;">Ports/Protocols/Services (' + m.length + ')</summary>';
        html += '<table style="width:100%;font-size:10px;color:#bdc3c7;border-collapse:collapse;margin-top:4px;">';
        html += '<tr style="color:#f39c12;"><th style="padding:2px 4px;text-align:left;">Protocol</th><th style="padding:2px 4px;text-align:left;">Port</th><th style="padding:2px 4px;text-align:left;">Service</th><th style="padding:2px 4px;">Encrypted</th></tr>';
        m.forEach(function(r) {
          html += '<tr><td style="padding:2px 4px;">' + r.protocol + '</td><td style="padding:2px 4px;">' + r.port + '</td><td style="padding:2px 4px;">' + r.service + '</td><td style="padding:2px 4px;text-align:center;">' + (r.encrypted ? '🔒' : '⚠') + '</td></tr>';
        });
        html += '</table></details>';
      }
      // STIG Checklist preview
      if (pkg.artifacts && pkg.artifacts.stig_checklist && pkg.artifacts.stig_checklist.checklist) {
        const cl = pkg.artifacts.stig_checklist.checklist;
        html += '<details style="margin-bottom:8px;"><summary style="color:#3498db;cursor:pointer;font-size:12px;">STIG Checklist (' + cl.length + ' checks)</summary>';
        html += '<table style="width:100%;font-size:10px;color:#bdc3c7;border-collapse:collapse;margin-top:4px;">';
        html += '<tr style="color:#f39c12;"><th style="padding:2px 4px;text-align:left;">STIG ID</th><th style="padding:2px 4px;text-align:left;">Severity</th><th style="padding:2px 4px;text-align:left;">Title</th><th style="padding:2px 4px;">Status</th></tr>';
        cl.forEach(function(c) {
          var sc = c.status === 'NotAFinding' ? '#2ecc71' : c.status === 'Open' ? '#e74c3c' : '#7f8c8d';
          html += '<tr><td style="padding:2px 4px;">' + c.stig_id + '</td><td style="padding:2px 4px;">' + c.severity + '</td><td style="padding:2px 4px;">' + c.title.substring(0,50) + '</td><td style="padding:2px 4px;color:' + sc + ';">' + c.status + '</td></tr>';
        });
        html += '</table></details>';
      }
      html += '<p style="color:#7f8c8d;font-size:10px;">Package ID: ' + (pkg.package_id||'').substring(0,8) + ' | Generated: ' + (pkg.generated_at||'').substring(0,19) + '</p>';
      output.innerHTML = html;
    }).catch(err => {
      btn.disabled = false; btn.textContent = 'Generate ATO Package';
      output.innerHTML = '<p style="color:#e74c3c;">Request failed: ' + err + '</p>';
    });
  }
  // Load groups for region selector
  function loadAtoRegions() {
    if (TOPOLOGY_ID === 'new') return;
    fetch(NC_BASE + '/api/topologies/' + TOPOLOGY_ID).then(r=>r.json()).then(function(){
      return fetch(NC_BASE + '/api/groups?topology_id=' + TOPOLOGY_ID);
    }).then(r=>r.ok ? r.json() : []).then(function(groups){
      const sel = document.getElementById('ato-region-select');
      if (!sel) return;
      sel.innerHTML = '<option value="">-- Full Topology --</option>';
      (groups || []).forEach(function(g) { sel.innerHTML += '<option value="' + g.id + '">' + g.label + (g.csp ? ' (' + g.csp.toUpperCase() + ')' : '') + '</option>'; });
    }).catch(function(){});
  }

  // ── NetBox IPAM ────────────────────────────────────────────────────────────

  function netboxToggle() {
    const panel = document.getElementById('netbox-panel');
    panel.classList.toggle('hidden');
    if (!panel.classList.contains('hidden')) {
      netboxLoadConfig();
      netboxLoadSyncLog();
    }
  }

  function netboxLoadConfig() {
    fetch(NC_BASE + '/api/netbox/config').then(r => r.ok ? r.json() : {}).then(cfg => {
      if (cfg.configured) {
        document.getElementById('nb-url-input').value = cfg.url || '';
        document.getElementById('nb-site-input').value = cfg.site_filter || '';
        const line = document.getElementById('nb-status-line');
        line.textContent = cfg.last_tested ? 'Last tested: ' + cfg.last_tested.substring(0,19) : 'Config loaded. Click Test to verify.';
        line.style.color = '#2ecc71';
      }
    }).catch(function(){});
  }

  function netboxSaveConfig() {
    const url = document.getElementById('nb-url-input').value.trim();
    const token = document.getElementById('nb-token-input').value.trim();
    const site = document.getElementById('nb-site-input').value.trim();
    if (!url || !token) {
      document.getElementById('nb-status-line').textContent = 'URL and token required.';
      document.getElementById('nb-status-line').style.color = '#e74c3c';
      return;
    }
    document.getElementById('nb-status-line').textContent = 'Saving...';
    fetch(NC_BASE + '/api/netbox/configure', {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({url, token, site_filter: site})
    }).then(r => r.json()).then(d => {
      const line = document.getElementById('nb-status-line');
      if (d.ok) {
        line.textContent = 'Saved: ' + d.url;
        line.style.color = '#2ecc71';
      } else {
        line.textContent = 'Error: ' + (d.error || 'unknown');
        line.style.color = '#e74c3c';
      }
    }).catch(err => {
      document.getElementById('nb-status-line').textContent = 'Request failed: ' + err;
      document.getElementById('nb-status-line').style.color = '#e74c3c';
    });
  }

  function netboxTestConnection() {
    const line = document.getElementById('nb-status-line');
    line.textContent = 'Testing...';
    line.style.color = '#f39c12';
    fetch(NC_BASE + '/api/netbox/status').then(r => r.json()).then(d => {
      if (d.ok) {
        line.textContent = 'Connected — NetBox ' + (d.netbox_version || '');
        line.style.color = '#2ecc71';
      } else {
        line.textContent = 'Failed: ' + (d.error || 'unknown');
        line.style.color = '#e74c3c';
      }
    }).catch(err => {
      line.textContent = 'Error: ' + err;
      line.style.color = '#e74c3c';
    });
  }

  function netboxPull(resource) {
    const out = document.getElementById('nb-pull-results');
    out.textContent = 'Pulling ' + resource + '...';
    const endpointMap = {
      devices: 'devices', ips: 'ips', vlans: 'vlans',
      prefixes: 'prefixes', racks: 'racks', circuits: 'circuits'
    };
    fetch(NC_BASE + '/api/netbox/pull/' + (endpointMap[resource] || resource))
      .then(r => r.json()).then(d => {
        if (d.error) {
          out.innerHTML = '<span style="color:#e74c3c;">Error: ' + d.error + '</span>';
          return;
        }
        const key = Object.keys(d).find(k => k !== 'count') || resource;
        const items = d[key] || [];
        let html = '<strong style="color:#2ecc71;">' + d.count + ' ' + resource + ' pulled</strong><br/>';
        items.slice(0,5).forEach(item => {
          const label = item.label || item.name || item.address || item.circuit_id || item.prefix || ('ID '+item.netbox_id);
          html += '<span style="color:#7f8c8d;">• ' + label + '</span><br/>';
        });
        if (items.length > 5) html += '<span style="color:#7f8c8d;">…and ' + (items.length-5) + ' more</span>';
        out.innerHTML = html;
      }).catch(err => {
        out.innerHTML = '<span style="color:#e74c3c;">Request failed: ' + err + '</span>';
      });
  }

  function netboxImport(resource, merge) {
    if (TOPOLOGY_ID === 'new') {
      alert('Save the topology first before importing from NetBox.');
      return;
    }
    const out = document.getElementById('nb-pull-results');
    out.textContent = 'Importing ' + resource + ' into canvas...';
    fetch(NC_BASE + '/api/netbox/import/' + TOPOLOGY_ID, {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({resource: resource, merge: !!merge})
    }).then(r => r.json()).then(d => {
      if (d.error) {
        out.innerHTML = '<span style="color:#e74c3c;">Error: ' + d.error + '</span>';
        return;
      }
      out.innerHTML = '<strong style="color:#2ecc71;">Import complete</strong><br/>' +
        '<span style="color:#7f8c8d;">Nodes added: ' + d.nodes_added + '</span><br/>' +
        '<span style="color:#7f8c8d;">IPAM blocks: ' + d.ipam_blocks + '</span><br/>' +
        '<span style="color:#7f8c8d;">Circuits: ' + d.circuits + '</span>';
      // Reload canvas graph so imported nodes appear
      if (typeof loadGraph === 'function') {
        loadGraph(d.graph);
      } else if (typeof renderGraph === 'function') {
        renderGraph(d.graph);
      }
      netboxLoadSyncLog();
    }).catch(err => {
      out.innerHTML = '<span style="color:#e74c3c;">Request failed: ' + err + '</span>';
    });
  }

  function netboxPush(pushAll) {
    if (TOPOLOGY_ID === 'new') {
      alert('Save the topology first before pushing to NetBox.');
      return;
    }
    const siteId = document.getElementById('nb-site-id-input').value.trim();
    const out = document.getElementById('nb-pull-results');
    out.textContent = 'Pushing canvas to NetBox...';
    fetch(NC_BASE + '/api/netbox/push/' + TOPOLOGY_ID, {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({push_all: !!pushAll, site_id: siteId ? parseInt(siteId) : null})
    }).then(r => r.json()).then(d => {
      if (!d.ok && !d.pushed) {
        out.innerHTML = '<span style="color:#e74c3c;">Error: ' + (d.errors||[]).map(e=>e.error).join(', ') + '</span>';
        return;
      }
      out.innerHTML = '<strong style="color:#2ecc71;">Pushed ' + d.pushed.length + ' device(s)</strong>' +
        (d.errors.length ? '<br/><span style="color:#f39c12;">' + d.errors.length + ' error(s)</span>' : '');
      netboxLoadSyncLog();
    }).catch(err => {
      out.innerHTML = '<span style="color:#e74c3c;">Request failed: ' + err + '</span>';
    });
  }

  function netboxLoadSyncLog() {
    fetch(NC_BASE + '/api/netbox/sync-log?limit=10').then(r => r.json()).then(d => {
      const el = document.getElementById('nb-sync-log');
      if (!el) return;
      const log = d.log || [];
      if (!log.length) { el.textContent = 'No sync history yet.'; return; }
      el.innerHTML = log.map(row => {
        const color = row.status === 'ok' ? '#2ecc71' : '#e74c3c';
        const ts = (row.ran_at || '').substring(0, 16);
        const dir = row.direction === 'pull' ? '⬇' : '⬆';
        return '<div style="border-bottom:1px solid #1a1a2e;padding:3px 0;">' +
          '<span style="color:' + color + ';">' + dir + ' ' + row.resource + '</span> ' +
          '<span style="color:#7f8c8d;">' + row.records_out + ' records · ' + ts + '</span>' +
          (row.error_msg ? '<br/><span style="color:#e74c3c;">' + row.error_msg.substring(0,60) + '</span>' : '') +
          '</div>';
      }).join('');
    }).catch(function(){});
  }

  // ── AI Topology Reviewer ──────────────────────────────────────────────────

  const _AI_REVIEW_SEV_COLORS = {
    HIGH: '#e74c3c', MEDIUM: '#f39c12', LOW: '#3498db', INFO: '#7f8c8d'
  };
  const _AI_REVIEW_CAT_ICONS = {
    SPOF: '⚠', REDUNDANCY: '⛓', STIG: '🛡', ENCRYPTION: '🔒',
    SEGMENTATION: '🔀', ROUTING: '🔁', SUGGESTION: '💡'
  };
  let _aiReviewFindings = [];

  function openAiReviewPanel() {
    document.getElementById('ai-review-panel').classList.remove('hidden');
    // Close other slide panels to avoid overlap
    document.getElementById('nc-chat-panel').classList.add('hidden');
    document.getElementById('netbox-panel').classList.add('hidden');
  }

  function closeAiReviewPanel() {
    document.getElementById('ai-review-panel').classList.add('hidden');
    clearAiReviewAnnotations();
  }

  function clearAiReviewAnnotations() {
    document.getElementById('ai-annotation-layer').innerHTML = '';
    // Remove canvas highlight class
    if (typeof graph !== 'undefined' && graph) {
      graph.getCells().forEach(function(cell) {
        if (typeof paper !== 'undefined') {
          const view = paper.findViewByModel(cell);
          if (view && view.el) {
            view.el.style.filter = '';
            view.el.style.outline = '';
          }
        }
      });
    }
  }

  async function runAiReview() {
    if (TOPOLOGY_ID === 'new') {
      alert('Save the topology first.');
      return;
    }
    const btn = document.getElementById('ai-review-run-btn');
    const statusEl = document.getElementById('ai-review-status');
    const bodyEl = document.getElementById('ai-review-body');
    const emptyEl = document.getElementById('ai-review-empty');
    const summaryEl = document.getElementById('ai-review-summary');
    const findingsEl = document.getElementById('ai-review-findings');

    btn.disabled = true;
    btn.textContent = '⏳ Analyzing…';
    statusEl.textContent = 'Sending topology to AI…';
    clearAiReviewAnnotations();
    emptyEl.style.display = 'none';
    summaryEl.style.display = 'none';
    findingsEl.innerHTML = '';

    try {
      const r = await fetch(NC_BASE + '/api/ai-review/' + TOPOLOGY_ID, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: '{}',
      });
      const data = await r.json();

      btn.disabled = false;
      btn.textContent = '▶ Analyze Topology';

      if (data.error) {
        statusEl.style.color = '#e74c3c';
        statusEl.textContent = 'Error: ' + data.error;
        emptyEl.style.display = '';
        return;
      }

      _aiReviewFindings = data.findings || [];
      const cnt = _aiReviewFindings.length;
      const high = _aiReviewFindings.filter(f => f.severity === 'HIGH').length;
      const med = _aiReviewFindings.filter(f => f.severity === 'MEDIUM').length;
      statusEl.style.color = high > 0 ? '#e74c3c' : med > 0 ? '#f39c12' : '#2ecc71';
      statusEl.textContent = cnt + ' finding' + (cnt !== 1 ? 's' : '') +
        (high ? ' — ' + high + ' HIGH' : '') +
        (med ? ' · ' + med + ' MEDIUM' : '') +
        ' via ' + (data.provider || 'AI');

      // Summary
      if (data.summary) {
        summaryEl.textContent = data.summary;
        summaryEl.style.display = '';
      }

      // Render findings list
      if (!cnt) {
        findingsEl.innerHTML = '<div style="text-align:center;padding:20px;color:#2ecc71;font-size:13px;">✓ No issues found — topology looks healthy.</div>';
      } else {
        findingsEl.innerHTML = _aiReviewFindings.map(function(f, i) {
          const sevColor = _AI_REVIEW_SEV_COLORS[f.severity] || '#7f8c8d';
          const catIcon = _AI_REVIEW_CAT_ICONS[f.category] || '•';
          const hasNodes = f.node_ids && f.node_ids.length > 0;
          return '<div class="ai-review-finding" data-finding-idx="' + i + '" '
            + 'style="background:#0d1a2e;border-radius:6px;padding:10px 12px;margin-bottom:8px;border-left:3px solid ' + sevColor + ';cursor:pointer;" '
            + 'onmouseenter="highlightFindingNodes(' + i + ',true)" '
            + 'onmouseleave="highlightFindingNodes(' + i + ',false)" '
            + 'onclick="zoomToFindingNodes(' + i + ')">'
            + '<div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;">'
            + '<span style="background:' + sevColor + ';color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:3px;min-width:20px;text-align:center;">' + f.id + '</span>'
            + '<span style="font-size:10px;color:' + sevColor + ';font-weight:600;">' + f.severity + '</span>'
            + '<span style="font-size:10px;color:#7f8c8d;">' + catIcon + ' ' + (f.category || '') + '</span>'
            + (hasNodes ? '<span style="margin-left:auto;font-size:10px;color:#4a5568;">' + f.node_ids.length + ' device' + (f.node_ids.length > 1 ? 's' : '') + '</span>' : '')
            + '</div>'
            + '<div style="font-size:12px;color:#ecf0f1;font-weight:600;margin-bottom:4px;">' + escHtml(f.title || '') + '</div>'
            + '<div style="font-size:11px;color:#95a5a6;line-height:1.45;margin-bottom:6px;">' + escHtml(f.description || '') + '</div>'
            + '<details style="margin:0;"><summary style="font-size:10px;color:#00d4ff;cursor:pointer;user-select:none;">Suggestion</summary>'
            + '<div style="font-size:11px;color:#b0c4d8;margin-top:4px;padding:6px 8px;background:#111827;border-radius:4px;">' + escHtml(f.suggestion || '') + '</div>'
            + '</details>'
            + '</div>';
        }).join('');
      }

      // Pin annotation badges on canvas nodes
      _pinAiReviewAnnotations(_aiReviewFindings);

    } catch (err) {
      btn.disabled = false;
      btn.textContent = '▶ Analyze Topology';
      statusEl.style.color = '#e74c3c';
      statusEl.textContent = 'Request failed: ' + err.message;
      emptyEl.style.display = '';
    }
  }

  function escHtml(str) {
    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  function _getNodeCanvasRect(nodeId) {
    if (typeof graph === 'undefined' || !graph) return null;
    const cell = graph.getCell(nodeId);
    if (!cell || cell.isLink()) return null;
    if (typeof paper === 'undefined' || !paper) return null;
    const view = paper.findViewByModel(cell);
    if (!view) return null;
    try {
      const bbox = cell.getBBox();
      const cx = bbox.x + bbox.width / 2;
      const cy = bbox.y + bbox.height / 2;
      const clientPt = paper.localToClientPoint(cx, cy);
      return { x: clientPt.x, y: clientPt.y };
    } catch (e) {
      return null;
    }
  }

  function _pinAiReviewAnnotations(findings) {
    const layer = document.getElementById('ai-annotation-layer');
    layer.innerHTML = '';
    // Build map: nodeId -> [finding numbers]
    const nodeMap = {};
    findings.forEach(function(f) {
      (f.node_ids || []).forEach(function(nid) {
        if (!nodeMap[nid]) nodeMap[nid] = [];
        nodeMap[nid].push(f.id);
      });
    });
    Object.keys(nodeMap).forEach(function(nid) {
      const pt = _getNodeCanvasRect(nid);
      if (!pt) return;
      const ids = nodeMap[nid];
      // Show first finding ID as badge; if multiple, show count
      const sevs = ids.map(function(fid) {
        const f = findings.find(function(x) { return x.id === fid; });
        return f ? f.severity : 'LOW';
      });
      const topSev = ['HIGH','MEDIUM','LOW','INFO'].find(function(s) { return sevs.includes(s); }) || 'INFO';
      const color = _AI_REVIEW_SEV_COLORS[topSev] || '#7f8c8d';
      const badge = document.createElement('div');
      badge.style.cssText = [
        'position:fixed',
        'left:' + (pt.x - 10) + 'px',
        'top:' + (pt.y - 28) + 'px',
        'background:' + color,
        'color:#fff',
        'font-size:10px',
        'font-weight:700',
        'padding:2px 5px',
        'border-radius:10px',
        'box-shadow:0 2px 6px rgba(0,0,0,0.6)',
        'pointer-events:none',
        'white-space:nowrap',
        'z-index:901',
        'border:1px solid rgba(255,255,255,0.25)',
        'font-family:monospace',
      ].join(';');
      badge.textContent = ids.length === 1 ? '#' + ids[0] : ids.length + ' issues';
      badge.setAttribute('data-node-id', nid);
      layer.appendChild(badge);
    });
  }

  function highlightFindingNodes(idx, on) {
    const f = _aiReviewFindings[idx];
    if (!f || typeof graph === 'undefined' || !graph) return;
    const nids = new Set(f.node_ids || []);
    if (!nids.size) return;
    const sevColor = _AI_REVIEW_SEV_COLORS[f.severity] || '#7f8c8d';
    graph.getCells().forEach(function(cell) {
      if (cell.isLink()) return;
      const view = typeof paper !== 'undefined' ? paper.findViewByModel(cell) : null;
      if (!view || !view.el) return;
      if (nids.has(cell.id)) {
        view.el.style.filter = on ? 'drop-shadow(0 0 8px ' + sevColor + ')' : '';
        view.el.style.outline = on ? '2px solid ' + sevColor : '';
      }
    });
  }

  function zoomToFindingNodes(idx) {
    const f = _aiReviewFindings[idx];
    if (!f || !f.node_ids || !f.node_ids.length) return;
    if (typeof graph === 'undefined' || !graph || typeof paper === 'undefined' || !paper) return;
    // Collect bboxes of all affected nodes
    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
    f.node_ids.forEach(function(nid) {
      const cell = graph.getCell(nid);
      if (!cell || cell.isLink()) return;
      const bb = cell.getBBox();
      minX = Math.min(minX, bb.x);
      minY = Math.min(minY, bb.y);
      maxX = Math.max(maxX, bb.x + bb.width);
      maxY = Math.max(maxY, bb.y + bb.height);
    });
    if (!isFinite(minX)) return;
    const pad = 80;
    const W = paper.el.clientWidth || 800;
    const H = paper.el.clientHeight || 600;
    const fw = maxX - minX + pad * 2;
    const fh = maxY - minY + pad * 2;
    const scale = Math.min(W / fw, H / fh, 1.5);
    const tx = W / 2 - (minX + (maxX - minX) / 2) * scale;
    const ty = H / 2 - (minY + (maxY - minY) / 2) * scale;
    paper.scale(scale);
    paper.translate(tx, ty);
    // Re-pin badges after pan/zoom
    _pinAiReviewAnnotations(_aiReviewFindings);
    highlightFindingNodes(idx, true);
  }
</script>
<!-- ATO Package Generator Dialog -->
<div id="ato-overlay" class="sim-overlay hidden">
  <div class="sim-panel" style="max-width:640px;">
    <div class="sim-panel-header">
      <h3>ATO Package Auto-Generator</h3>
      <button class="close-btn" onclick="closeAtoDialog()">&#x2715;</button>
    </div>
    <p style="color:#95a5a6;font-size:12px;margin:0 0 12px;">Generate partial ATO package: system boundary diagram (RMF Step 1), data flow diagram, ports/protocols/services matrix, and pre-populated STIG checklist.</p>
    <div class="form-group">
      <label>System Name</label>
      <input type="text" id="ato-system-name" class="form-control" placeholder="Information System name for ATO documentation"/>
    </div>
    <div class="form-group">
      <label>Topology Region (optional)</label>
      <select id="ato-region-select" class="form-control" onfocus="loadAtoRegions()">
        <option value="">-- Full Topology --</option>
      </select>
    </div>
    <div class="form-group" style="display:flex;gap:8px;">
      <button class="btn btn-primary" id="ato-gen-btn" onclick="runAtoGenerate()" style="flex:1;background:#e74c3c;border-color:#c0392b;">Generate ATO Package</button>
      <button class="btn btn-secondary" onclick="closeAtoDialog()">Cancel</button>
    </div>
    <div id="ato-gen-output" class="sim-output" style="display:none;max-height:450px;overflow-y:auto;"></div>
  </div>
</div>
<!-- STIG XCCDF/CKL Import Dialog -->
<div id="stig-import-overlay" class="sim-overlay hidden">
  <div class="sim-panel" style="max-width:580px;max-height:85vh;overflow-y:auto;">
    <div class="sim-panel-header">
      <h3>&#x1f6e1; STIG XCCDF/CKL Import</h3>
      <button class="close-btn" onclick="closeStigImportDialog()">&#x2715;</button>
    </div>
    <p style="color:#95a5a6;font-size:12px;margin:0 0 12px;">Upload a DISA STIG Viewer <strong>.ckl</strong> file or SCAP <strong>XCCDF</strong> results XML. Hostnames are matched to canvas devices and colored by compliance status.</p>

    <!-- File chooser -->
    <div style="background:#0d0d1a;border-radius:6px;padding:12px;margin-bottom:12px;">
      <div style="font-size:11px;color:#7f8c8d;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;">Upload File</div>
      <input type="file" id="stig-file-input" accept=".ckl,.xml,.xccdf" style="display:none;" onchange="handleStigFileChange(this)"/>
      <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
        <button class="btn btn-secondary" onclick="document.getElementById('stig-file-input').click()" style="font-size:12px;padding:6px 12px;">Choose File</button>
        <span id="stig-file-name" style="font-size:12px;color:#95a5a6;">No file selected</span>
      </div>
      <div style="margin-top:10px;display:flex;gap:8px;">
        <button class="btn btn-primary" id="stig-upload-btn" onclick="uploadStigFile()" disabled style="flex:1;background:#e74c3c;border-color:#c0392b;">Import &amp; Apply Overlay</button>
        <button class="btn btn-secondary" onclick="closeStigImportDialog()">Close</button>
      </div>
    </div>

    <!-- Status / results -->
    <div id="stig-upload-status"></div>

    <!-- Color legend -->
    <div style="background:#0d0d1a;border-radius:6px;padding:10px;margin-bottom:12px;">
      <div style="font-size:11px;color:#7f8c8d;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;">Color Legend</div>
      <div style="display:flex;gap:20px;font-size:11px;color:#bdc3c7;flex-wrap:wrap;">
        <span><span style="color:#e74c3c;font-size:14px;">&#9679;</span> Red &mdash; CAT I open findings</span>
        <span><span style="color:#f39c12;font-size:14px;">&#9679;</span> Yellow &mdash; CAT II/III open findings</span>
        <span><span style="color:#2ecc71;font-size:14px;">&#9679;</span> Green &mdash; all checks passed</span>
      </div>
    </div>

    <!-- Import history -->
    <div style="background:#0d0d1a;border-radius:6px;padding:10px;">
      <div style="font-size:11px;color:#7f8c8d;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;">Import History</div>
      <div id="stig-history-list" style="max-height:180px;overflow-y:auto;"></div>
    </div>
  </div>
</div>
<!-- AI Topology Reviewer Panel -->
<div id="ai-review-panel" class="nc-chat-panel hidden" style="right:0;left:auto;width:420px;display:flex;flex-direction:column;max-height:80vh;">
  <div class="nc-chat-header" style="background:#0d1a2e;border-bottom:1px solid #1e3a5f;">
    <span class="nc-chat-title" style="color:#00d4ff;">&#x1f50d; AI Topology Reviewer</span>
    <div class="nc-chat-header-actions">
      <button class="nc-chat-btn-sm" onclick="clearAiReviewAnnotations()" title="Clear annotations from canvas">Clear</button>
      <button class="close-btn" onclick="closeAiReviewPanel()">&#x2715;</button>
    </div>
  </div>
  <div style="padding:10px 14px;border-bottom:1px solid #1e3a5f;">
    <button class="btn btn-primary" id="ai-review-run-btn" onclick="runAiReview()" style="width:100%;background:#00d4ff;border-color:#00b8d9;color:#0d1a2e;font-weight:600;">
      &#x25b6; Analyze Topology
    </button>
    <div id="ai-review-status" style="margin-top:6px;font-size:11px;color:#7f8c8d;min-height:14px;"></div>
  </div>
  <div id="ai-review-body" style="flex:1;overflow-y:auto;padding:12px 14px;">
    <div id="ai-review-empty" style="text-align:center;padding:32px 16px;color:#4a5568;">
      <div style="font-size:28px;margin-bottom:8px;">&#x1f50d;</div>
      <p style="font-size:12px;margin:0 0 4px;">Feed your diagram to the AI for analysis.</p>
      <p style="font-size:11px;color:#2d3748;">Detects: SPOFs &bull; Redundancy gaps &bull; STIG violations &bull; Encryption issues &bull; Segmentation risks</p>
    </div>
    <div id="ai-review-summary" style="display:none;background:#0d1a2e;border-radius:6px;padding:10px 12px;margin-bottom:12px;font-size:12px;color:#b0c4d8;line-height:1.5;border-left:3px solid #00d4ff;"></div>
    <div id="ai-review-findings"></div>
  </div>
</div>
<!-- Annotation badge container (absolutely positioned over canvas) -->
<div id="ai-annotation-layer" style="position:fixed;top:0;left:0;pointer-events:none;z-index:900;"></div>

<!-- NetBox IPAM Integration Panel -->
<div id="netbox-panel" class="nc-chat-panel hidden" style="right:0;left:auto;width:380px;display:flex;flex-direction:column;">
  <div class="sim-panel-header" style="padding:12px 16px;display:flex;align-items:center;justify-content:space-between;">
    <h3 style="margin:0;font-size:14px;color:#9b59b6;">⬡ NetBox IPAM</h3>
    <button class="close-btn" onclick="netboxToggle()">&#x2715;</button>
  </div>
  <div style="padding:12px 16px;overflow-y:auto;flex:1;">
    <!-- Connection config -->
    <div style="background:#0d0d1a;border-radius:6px;padding:10px;margin-bottom:12px;">
      <div style="font-size:11px;color:#9b59b6;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;">Connection</div>
      <div class="form-group" style="margin-bottom:8px;">
        <label style="font-size:11px;color:#95a5a6;">NetBox URL</label>
        <input type="text" id="nb-url-input" class="form-control" style="font-size:12px;" placeholder="http://netbox:8000"/>
      </div>
      <div class="form-group" style="margin-bottom:8px;">
        <label style="font-size:11px;color:#95a5a6;">API Token</label>
        <input type="password" id="nb-token-input" class="form-control" style="font-size:12px;" placeholder="Token abc123..."/>
      </div>
      <div class="form-group" style="margin-bottom:8px;">
        <label style="font-size:11px;color:#95a5a6;">Site Filter (optional)</label>
        <input type="text" id="nb-site-input" class="form-control" style="font-size:12px;" placeholder="site-slug"/>
      </div>
      <div style="display:flex;gap:6px;">
        <button class="btn btn-secondary" style="flex:1;font-size:11px;padding:5px 8px;" onclick="netboxSaveConfig()">Save Config</button>
        <button class="btn btn-secondary" style="flex:1;font-size:11px;padding:5px 8px;" onclick="netboxTestConnection()">Test</button>
      </div>
      <div id="nb-status-line" style="margin-top:8px;font-size:11px;color:#95a5a6;min-height:16px;"></div>
    </div>

    <!-- Pull resources -->
    <div style="background:#0d0d1a;border-radius:6px;padding:10px;margin-bottom:12px;">
      <div style="font-size:11px;color:#9b59b6;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;">Pull from NetBox</div>
      <div id="nb-pull-results" style="font-size:11px;color:#95a5a6;margin-bottom:8px;min-height:20px;"></div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:5px;">
        <button class="btn btn-secondary" style="font-size:11px;padding:5px 8px;" onclick="netboxPull('devices')">Devices</button>
        <button class="btn btn-secondary" style="font-size:11px;padding:5px 8px;" onclick="netboxPull('ips')">IP Addresses</button>
        <button class="btn btn-secondary" style="font-size:11px;padding:5px 8px;" onclick="netboxPull('vlans')">VLANs</button>
        <button class="btn btn-secondary" style="font-size:11px;padding:5px 8px;" onclick="netboxPull('prefixes')">Prefixes</button>
        <button class="btn btn-secondary" style="font-size:11px;padding:5px 8px;" onclick="netboxPull('racks')">Racks</button>
        <button class="btn btn-secondary" style="font-size:11px;padding:5px 8px;" onclick="netboxPull('circuits')">Circuits</button>
      </div>
      <button class="btn btn-primary" style="width:100%;font-size:12px;margin-top:8px;background:#9b59b6;border-color:#8e44ad;" onclick="netboxImport('all', true)">⬇ Import All into Canvas</button>
    </div>

    <!-- Import options -->
    <div style="background:#0d0d1a;border-radius:6px;padding:10px;margin-bottom:12px;">
      <div style="font-size:11px;color:#9b59b6;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;">Import Options</div>
      <label style="display:flex;align-items:center;gap:8px;font-size:11px;color:#95a5a6;cursor:pointer;margin-bottom:8px;">
        <input type="checkbox" id="nb-merge-chk" checked style="accent-color:#9b59b6;"/> Merge (keep existing nodes)
      </label>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:5px;">
        <button class="btn btn-secondary" style="font-size:11px;padding:5px 8px;" onclick="netboxImport('devices', document.getElementById('nb-merge-chk').checked)">Import Devices</button>
        <button class="btn btn-secondary" style="font-size:11px;padding:5px 8px;" onclick="netboxImport('circuits', document.getElementById('nb-merge-chk').checked)">Import Circuits</button>
        <button class="btn btn-secondary" style="font-size:11px;padding:5px 8px;" onclick="netboxImport('prefixes', document.getElementById('nb-merge-chk').checked)">Import Prefixes</button>
      </div>
    </div>

    <!-- Push to NetBox -->
    <div style="background:#0d0d1a;border-radius:6px;padding:10px;margin-bottom:12px;">
      <div style="font-size:11px;color:#9b59b6;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;">Push to NetBox</div>
      <div style="font-size:11px;color:#95a5a6;margin-bottom:8px;">Push canvas nodes (new devices only) back to NetBox as device records.</div>
      <div class="form-group" style="margin-bottom:8px;">
        <label style="font-size:11px;color:#95a5a6;">NetBox Site ID (optional)</label>
        <input type="number" id="nb-site-id-input" class="form-control" style="font-size:12px;" placeholder="e.g. 3"/>
      </div>
      <button class="btn btn-secondary" style="width:100%;font-size:12px;" onclick="netboxPush(false)">⬆ Push New Nodes</button>
    </div>

    <!-- Sync log -->
    <div style="background:#0d0d1a;border-radius:6px;padding:10px;">
      <div style="font-size:11px;color:#9b59b6;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;">
        Sync Log
        <button onclick="netboxLoadSyncLog()" style="background:none;border:none;color:#9b59b6;cursor:pointer;font-size:11px;float:right;padding:0;">↺ Refresh</button>
      </div>
      <div id="nb-sync-log" style="font-size:10px;color:#95a5a6;max-height:120px;overflow-y:auto;"></div>
    </div>
  </div>
</div>

<!-- PPS Matrix Generator Overlay -->
<div id="pps-overlay" class="sim-overlay hidden">
  <div class="sim-panel" style="max-width:900px;max-height:90vh;overflow-y:auto;">
    <div class="sim-panel-header">
      <h3>Ports / Protocols / Services Matrix</h3>
      <button class="close-btn" onclick="closePpsPanel()">&#x2715;</button>
    </div>
    <p style="color:#95a5a6;font-size:12px;margin:0 0 12px;">Select two enclaves or a device pair. Auto-generates PPS matrix by inspecting firewall rules and link annotations. Exportable as SSP table.</p>

    <!-- Mode toggle -->
    <div style="display:flex;gap:12px;margin-bottom:12px;">
      <label style="display:flex;align-items:center;gap:6px;cursor:pointer;color:#dfe6e9;font-size:13px;">
        <input type="radio" name="pps-sel-mode" value="zone" checked onchange="ppsOnModeChange('zone')">
        Enclave / Zone pair
      </label>
      <label style="display:flex;align-items:center;gap:6px;cursor:pointer;color:#dfe6e9;font-size:13px;">
        <input type="radio" name="pps-sel-mode" value="node" onchange="ppsOnModeChange('node')">
        Device pair
      </label>
    </div>

    <!-- Zone selectors -->
    <div id="pps-zone-selectors" style="display:flex;gap:12px;margin-bottom:12px;">
      <div style="flex:1;">
        <label style="font-size:12px;color:#95a5a6;display:block;margin-bottom:4px;">Source Enclave</label>
        <select id="pps-src-zone" class="form-control" style="width:100%;"></select>
      </div>
      <div style="flex:1;">
        <label style="font-size:12px;color:#95a5a6;display:block;margin-bottom:4px;">Destination Enclave</label>
        <select id="pps-dst-zone" class="form-control" style="width:100%;"></select>
      </div>
    </div>

    <!-- Node selectors (hidden by default) -->
    <div id="pps-node-selectors" style="display:none;gap:12px;margin-bottom:12px;">
      <div style="flex:1;">
        <label style="font-size:12px;color:#95a5a6;display:block;margin-bottom:4px;">Source Device</label>
        <select id="pps-src-node" class="form-control" style="width:100%;"></select>
      </div>
      <div style="flex:1;">
        <label style="font-size:12px;color:#95a5a6;display:block;margin-bottom:4px;">Destination Device</label>
        <select id="pps-dst-node" class="form-control" style="width:100%;"></select>
      </div>
    </div>

    <div style="display:flex;gap:8px;margin-bottom:16px;">
      <button class="btn btn-primary" onclick="ppsGenerate()">Generate PPS Matrix</button>
      <button class="btn btn-secondary" id="pps-export-csv-btn" onclick="ppsExport('csv')" style="display:none;">Export CSV</button>
      <button class="btn btn-secondary" id="pps-export-md-btn" onclick="ppsExport('markdown')" style="display:none;">Export Markdown</button>
    </div>

    <!-- Summary stats -->
    <div id="pps-stats-bar" style="display:none;display:none;gap:12px;margin-bottom:16px;flex-wrap:wrap;"></div>

    <!-- PPS matrix table -->
    <div id="pps-matrix-section" style="display:none;">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
        <h4 id="pps-matrix-title" style="margin:0;color:#dfe6e9;font-size:14px;">PPS Matrix</h4>
        <input type="text" id="pps-filter" placeholder="Filter protocols..." oninput="ppsFilterTable()"
               style="padding:4px 8px;font-size:12px;background:#1e2a3a;border:1px solid #334;color:#dfe6e9;border-radius:4px;width:200px;">
      </div>
      <div style="overflow-x:auto;">
        <table style="width:100%;border-collapse:collapse;font-size:12px;color:#dfe6e9;">
          <thead>
            <tr style="background:#1a2332;border-bottom:2px solid #334;">
              <th style="padding:6px 8px;text-align:left;">#</th>
              <th style="padding:6px 8px;text-align:left;">Protocol</th>
              <th style="padding:6px 8px;text-align:left;">Port</th>
              <th style="padding:6px 8px;text-align:left;">Service</th>
              <th style="padding:6px 8px;text-align:left;">Direction</th>
              <th style="padding:6px 8px;text-align:center;">Encrypted</th>
              <th style="padding:6px 8px;text-align:center;">FIPS</th>
              <th style="padding:6px 8px;text-align:left;">Risk</th>
              <th style="padding:6px 8px;text-align:left;">Justification</th>
              <th style="padding:6px 8px;text-align:left;">Endpoints</th>
            </tr>
          </thead>
          <tbody id="pps-matrix-tbody"></tbody>
        </table>
      </div>
    </div>

    <!-- Firewall rules section -->
    <div id="pps-fw-section" style="display:none;margin-top:16px;">
      <h4 style="margin:0 0 8px;color:#dfe6e9;font-size:14px;">Firewall Rules (at boundary)</h4>
      <div style="overflow-x:auto;">
        <table style="width:100%;border-collapse:collapse;font-size:12px;color:#dfe6e9;">
          <thead>
            <tr style="background:#1a2332;border-bottom:2px solid #334;">
              <th style="padding:6px 8px;text-align:left;">#</th>
              <th style="padding:6px 8px;text-align:left;">Protocol</th>
              <th style="padding:6px 8px;text-align:left;">Port</th>
              <th style="padding:6px 8px;text-align:left;">Service</th>
              <th style="padding:6px 8px;text-align:left;">Direction (src&#x2192;dst)</th>
              <th style="padding:6px 8px;text-align:center;">Encrypted</th>
              <th style="padding:6px 8px;text-align:left;">Risk</th>
              <th style="padding:6px 8px;text-align:left;">Justification</th>
            </tr>
          </thead>
          <tbody id="pps-fw-tbody"></tbody>
        </table>
      </div>
    </div>

    <!-- Empty state -->
    <div id="pps-empty" style="display:none;text-align:center;padding:2rem;color:#95a5a6;">
      <div style="font-size:2rem;margin-bottom:0.5rem;">&#x2298;</div>
      <p>No cross-boundary traffic found between the selected pair.</p>
      <p style="font-size:11px;">Ensure the topology has links annotated with protocols between these enclaves.</p>
    </div>

    <!-- Loading -->
    <div id="pps-loading" style="display:none;text-align:center;padding:1.5rem;color:#95a5a6;">
      Generating PPS matrix...
    </div>
  </div>
</div>

<!-- ── Device Config Preview Modal ─────────────────────────────────────────── -->
<div id="cfg-preview-overlay" class="hidden" style="position:fixed;inset:0;background:rgba(0,0,0,0.72);z-index:3000;display:flex;align-items:center;justify-content:center;">
  <div style="background:#0d1117;border:1px solid #2a3a50;border-radius:10px;width:880px;max-width:96vw;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,0.6);">
    <!-- Header -->
    <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #1e2d3d;">
      <h3 style="margin:0;font-size:14px;color:#00c896;font-weight:600;letter-spacing:0.04em;">&#x2699; Device Config Generator</h3>
      <button onclick="cfgPreviewClose()" style="background:none;border:none;color:#7a8a99;font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px;" title="Close">&#x2715;</button>
    </div>
    <!-- Body: left list + right preview -->
    <div style="display:flex;flex:1;overflow:hidden;min-height:0;">
      <!-- Device list -->
      <div style="width:260px;min-width:200px;border-right:1px solid #1e2d3d;overflow-y:auto;padding:10px 8px;">
        <div style="font-size:10px;color:#4a5a6a;text-transform:uppercase;letter-spacing:0.06em;padding:4px 6px 8px;">Configurable Devices</div>
        <div id="cfg-device-list" style="display:flex;flex-direction:column;gap:4px;"></div>
        <div id="cfg-no-devices" class="hidden" style="padding:20px 8px;text-align:center;color:#4a5a6a;font-size:12px;">
          No routers, switches, or firewalls on canvas.<br><br>Add devices and assign IPs/VLANs in the Properties panel.
        </div>
      </div>
      <!-- Config preview -->
      <div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
        <div id="cfg-preview-header" style="padding:10px 14px;border-bottom:1px solid #1a2535;font-size:12px;color:#7a8a99;display:flex;align-items:center;gap:10px;">
          <span id="cfg-preview-device-name" style="color:#e8eaf0;font-weight:600;">Select a device →</span>
          <span id="cfg-preview-os-badge" style="background:#1a2d40;color:#00c896;font-size:10px;padding:2px 7px;border-radius:10px;display:none;"></span>
          <button id="cfg-dl-single-btn" onclick="cfgDownloadSingle()" class="hidden" style="margin-left:auto;background:#1a3a2a;color:#00c896;border:1px solid #1e5a3a;font-size:11px;padding:4px 10px;border-radius:5px;cursor:pointer;" title="Download this config as .txt">&#x2193; Download</button>
        </div>
        <div style="flex:1;overflow:auto;padding:12px 14px;">
          <div id="cfg-preview-empty" style="text-align:center;padding:48px 20px;color:#2a3a50;">
            <div style="font-size:32px;margin-bottom:8px;">&#x1f4bb;</div>
            <p style="font-size:12px;margin:0;">Click a device on the left to preview its generated configuration.</p>
          </div>
          <pre id="cfg-preview-code" class="hidden" style="margin:0;font-family:'Courier New',Courier,monospace;font-size:11px;color:#c8d8e8;line-height:1.55;white-space:pre;background:none;border:none;padding:0;"></pre>
        </div>
      </div>
    </div>
    <!-- Footer -->
    <div style="padding:10px 16px;border-top:1px solid #1e2d3d;display:flex;align-items:center;justify-content:space-between;gap:10px;">
      <div id="cfg-preview-summary" style="font-size:11px;color:#4a6a8a;"></div>
      <div style="display:flex;gap:8px;">
        <button onclick="cfgPreviewClose()" style="background:none;border:1px solid #2a3a50;color:#7a8a99;font-size:12px;padding:6px 14px;border-radius:5px;cursor:pointer;">Cancel</button>
        <button id="cfg-dl-all-btn" onclick="cfgDownloadAll()" style="background:#0a2a1a;border:1px solid #00c896;color:#00c896;font-size:12px;padding:6px 16px;border-radius:5px;cursor:pointer;font-weight:600;" title="Download all configs as ZIP">&#x2193; Download All (ZIP)</button>
      </div>
    </div>
  </div>
</div>

<script src="{{ url_for('static', filename='js/canvas-tooltips.js') }}"></script>
<script>
// Build NODE_DESCS from palette item title attributes (already have descriptions)
window.NODE_DESCS = {};
document.querySelectorAll('.palette-item[data-type]').forEach(function(el) {
  var t = el.getAttribute('data-type');
  var d = el.getAttribute('title');
  if (t && d) window.NODE_DESCS[t] = d;
});
// Also fetch cloud object descriptions from API
fetch('/api/network/cloud-objects').then(function(r) { return r.json(); }).then(function(data) {
  Object.values(data).forEach(function(group) {
    (Array.isArray(group) ? group : Object.values(group).flat()).forEach(function(obj) {
      if (obj && obj.type && obj.desc) window.NODE_DESCS[obj.type] = obj.desc;
    });
  });
}).catch(function() {});
</script>
<script src="{{ url_for('static', filename='js/network-canvas.js') }}"></script>
<script src="{{ url_for('static', filename='js/network-simulation.js') }}"></script>
<script>
// ── Device Config Preview Modal ──────────────────────────────────────────────
let _cfgConfigs = {};   // filename -> config text
let _cfgActive  = null; // currently selected filename

async function showDeviceConfigModal() {
  if (TOPOLOGY_ID === 'new') { alert('Save the topology first.'); return; }
  const overlay = document.getElementById('cfg-preview-overlay');
  const listEl  = document.getElementById('cfg-device-list');
  const noDevEl = document.getElementById('cfg-no-devices');
  const summEl  = document.getElementById('cfg-preview-summary');
  const dlAll   = document.getElementById('cfg-dl-all-btn');

  // Reset state
  listEl.innerHTML = '';
  document.getElementById('cfg-preview-code').classList.add('hidden');
  document.getElementById('cfg-preview-empty').classList.remove('hidden');
  document.getElementById('cfg-preview-device-name').textContent = 'Loading…';
  document.getElementById('cfg-preview-os-badge').style.display = 'none';
  document.getElementById('cfg-dl-single-btn').classList.add('hidden');
  summEl.textContent = 'Loading configs…';
  dlAll.disabled = true;
  _cfgConfigs = {};
  _cfgActive = null;
  overlay.classList.remove('hidden');

  try {
    const r = await fetch(NC_BASE + '/api/export/' + TOPOLOGY_ID + '/device-configs', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({format: 'json'}),
    });
    const data = await r.json();
    if (data.error) { summEl.textContent = 'Error: ' + data.error; return; }

    _cfgConfigs = data.configs || {};
    const count = Object.keys(_cfgConfigs).length;

    if (count === 0) {
      noDevEl.classList.remove('hidden');
      listEl.classList.add('hidden');
      summEl.textContent = 'No configurable devices on this topology.';
      document.getElementById('cfg-preview-device-name').textContent = 'No devices';
      dlAll.disabled = true;
      return;
    }

    noDevEl.classList.add('hidden');
    listEl.classList.remove('hidden');
    dlAll.disabled = false;
    summEl.textContent = count + ' device' + (count !== 1 ? 's' : '') + ' · ' + (data.topo_name || '');

    // Build device list from filename
    Object.keys(_cfgConfigs).forEach(filename => {
      const osMatch = filename.match(/_(ios|eos|junos)(_\d+)?\.txt$/i);
      const osLabel = osMatch ? {ios:'Cisco IOS', eos:'Arista EOS', junos:'JunOS'}[osMatch[1].toLowerCase()] || osMatch[1] : 'IOS';
      const hostname = filename.replace(/_ios(_\d+)?\.txt$|_eos(_\d+)?\.txt$|_junos(_\d+)?\.txt$/i, '').replace(/_/g, '-');

      const btn = document.createElement('button');
      btn.dataset.filename = filename;
      btn.style.cssText = 'display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;background:#0a1520;border:1px solid #1e2d3d;border-radius:6px;padding:7px 9px;cursor:pointer;transition:border-color 0.15s;';
      btn.innerHTML = `<span style="font-size:12px;color:#c8d8e8;font-weight:600;">${hostname}</span><span style="font-size:10px;color:#00c896;background:#0a2a1a;padding:1px 6px;border-radius:8px;">${osLabel}</span>`;
      btn.addEventListener('click', () => cfgSelectDevice(filename, hostname, osLabel));
      btn.addEventListener('mouseover', () => { if (btn.dataset.filename !== _cfgActive) btn.style.borderColor = '#2a4a60'; });
      btn.addEventListener('mouseout', () => { if (btn.dataset.filename !== _cfgActive) btn.style.borderColor = '#1e2d3d'; });
      listEl.appendChild(btn);
    });

    // Auto-select first
    const firstFile = Object.keys(_cfgConfigs)[0];
    if (firstFile) {
      const osMatch = firstFile.match(/_(ios|eos|junos)(_\d+)?\.txt$/i);
      const osLabel = osMatch ? {ios:'Cisco IOS', eos:'Arista EOS', junos:'JunOS'}[osMatch[1].toLowerCase()] || osMatch[1] : 'IOS';
      const hostname = firstFile.replace(/_ios(_\d+)?\.txt$|_eos(_\d+)?\.txt$|_junos(_\d+)?\.txt$/i, '').replace(/_/g, '-');
      cfgSelectDevice(firstFile, hostname, osLabel);
    }
  } catch (e) {
    summEl.textContent = 'Error loading configs: ' + e.message;
  }
}

function cfgSelectDevice(filename, hostname, osLabel) {
  _cfgActive = filename;

  // Highlight active button
  document.querySelectorAll('#cfg-device-list button').forEach(b => {
    const active = b.dataset.filename === filename;
    b.style.borderColor = active ? '#00c896' : '#1e2d3d';
    b.style.background  = active ? '#0a2520' : '#0a1520';
  });

  document.getElementById('cfg-preview-device-name').textContent = hostname;
  const badge = document.getElementById('cfg-preview-os-badge');
  badge.textContent = osLabel;
  badge.style.display = 'inline';
  document.getElementById('cfg-dl-single-btn').classList.remove('hidden');

  const code = document.getElementById('cfg-preview-code');
  code.textContent = _cfgConfigs[filename] || '';
  code.classList.remove('hidden');
  document.getElementById('cfg-preview-empty').classList.add('hidden');
}

function cfgPreviewClose() {
  document.getElementById('cfg-preview-overlay').classList.add('hidden');
  _cfgConfigs = {};
  _cfgActive = null;
}

function cfgDownloadSingle() {
  if (!_cfgActive || !_cfgConfigs[_cfgActive]) return;
  const blob = new Blob([_cfgConfigs[_cfgActive]], {type: 'text/plain'});
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = _cfgActive;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

async function cfgDownloadAll() {
  cfgPreviewClose();
  await exportDeviceConfigs();
}

// ── Load Cloud Networking palette from API ──────────────────────────────────
(function(){
  const CSP_ICONS = {aws:'aws-icon',azure:'azure-icon',gcp:'gcp-icon',oci:'oci-icon',ibm:'ibm-icon',multi_cloud:'multi-icon'};
  const CSP_LABELS = {aws:'AWS',azure:'Azure',gcp:'GCP',oci:'OCI',ibm:'IBM Cloud',multi_cloud:'Multi-Cloud'};
  fetch(NC_BASE + '/api/cloud-objects').then(r=>r.json()).then(data=>{
    const container = document.getElementById('cloud-palette-container');
    if(!container) return;
    for(const [csp, objects] of Object.entries(data)){
      const section = document.createElement('div');
      section.className = 'palette-section cloud-section';
      const iconClass = CSP_ICONS[csp]||'cloud-icon';
      section.innerHTML = `<div class="palette-cat">${CSP_LABELS[csp]||csp}</div><div class="palette-items">${
        objects.map(o=>`<div class="palette-item" draggable="true" data-type="${o.type}" ondragstart="onDragStart(event)" title="${o.desc}"><div class="pi-icon ${iconClass}">${o.icon}</div><span>${o.label}</span></div>`).join('')
      }</div>`;
      section.querySelector('.palette-cat').addEventListener('click', () => section.classList.toggle('open'));
      container.appendChild(section);
    }
  }).catch(()=>{});
})();

// ── Collapsible palette sections ─────────────────────────────────────────
(function(){
  document.querySelectorAll('.palette-section').forEach((sec, i) => {
    if (i === 0) sec.classList.add('open');
    const cat = sec.querySelector('.palette-cat');
    if (cat) cat.addEventListener('click', () => sec.classList.toggle('open'));
  });
  // Search filter
  const searchBox = document.getElementById('palette-search');
  if (searchBox) {
    searchBox.addEventListener('input', function() {
      const q = this.value.toLowerCase().trim();
      document.querySelectorAll('.palette-section').forEach(sec => {
        const items = sec.querySelectorAll('.palette-item');
        let anyVisible = false;
        items.forEach(item => {
          const text = (item.textContent + ' ' + (item.getAttribute('title')||'') + ' ' + (item.dataset.type||'')).toLowerCase();
          const match = !q || text.includes(q);
          item.style.display = match ? '' : 'none';
          if (match) anyVisible = true;
        });
        sec.style.display = anyVisible || !q ? '' : 'none';
        if (q && anyVisible) sec.classList.add('open');
        if (!q) { /* restore default collapsed state except first */ }
      });
    });
  }
})();

// ── Close export dropdown on outside click ──────────────────────────────
document.addEventListener('click', function(e) {
  var wrap = document.getElementById('export-dropdown-wrap');
  if (wrap && !wrap.contains(e.target)) wrap.classList.remove('open');
});
</script>
{% endblock %}