{% extends "security_canvas/base.html" %}
{% block title %}{{ design.name if design else 'New Security Design' }} — Security Design Canvas{% endblock %}

{% block global_banner %}{% endblock %}
{% block head %}
<!-- JointJS + dependencies (vendored for air-gap) -->
<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>const DESIGN_ID = '{{ design_id }}';</script>
<style>
  body { overflow: hidden; }
  .main-content { padding: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
</style>
{% endblock %}

{% block content %}
{% from "includes/classification_macros.html" import design_classification_banner %}
{{ design_classification_banner(design) }}
<div class="canvas-layout">

  <!-- Toolbar (matches NDC toolbar) -->
  <div class="canvas-toolbar">
    <div class="tb-group">
      <button class="tb-btn" onclick="saveDesign()" title="Save (Ctrl+S)">&#x1f4be; Save</button>
      <button class="tb-btn" onclick="undo()" title="Undo">&#x21a9; Undo</button>
      <button class="tb-btn" onclick="redo()" title="Redo">&#x21aa; Redo</button>
      <button class="tb-btn" onclick="exportCanvasPDF()" title="Export PDF">&#x1f4c4; Export PDF</button>
    </div>
    <div class="tb-group">
      <button class="tb-btn" onclick="runStrideAnalysis()" title="STRIDE Threat Analysis" style="color:#e94560;">&#x1f6e1; STRIDE</button>
      <button class="tb-btn" onclick="runAssessment()" title="Full Security Assessment" style="color:#e94560;">&#x2705; Assess</button>
      <button class="tb-btn" onclick="showGaps()" title="Detect Security Gaps" style="color:#f39c12;">&#x26a0; Gaps</button>
      <button class="tb-btn" onclick="generateRemediation()" title="Generate Remediation Plan" style="color:#27ae60;">&#x1f4cb; Remediate</button>
      <button class="tb-btn" onclick="showNistOverlay()" title="NIST 800-53 Control Coverage Overlay" style="color:#5dade2;">&#x1f4ca; NIST</button>
      <button class="tb-btn" onclick="showAttackPaths()" title="Attack Path Visualization" style="color:#e74c3c;">&#x26a1; Paths</button>
      <button class="tb-btn" onclick="applyAutoFix()" title="One-click Auto-Fix: add missing controls" style="color:#27ae60;">&#x1f527; Auto-Fix</button>
      <button class="tb-btn" onclick="showMitreCoverage()" title="MITRE ATT&CK Coverage Heatmap" style="color:#e94560;">&#x1f5fa; MITRE</button>
      <button class="tb-btn" onclick="llmThreats()" title="LLM-assisted threat identification (Ollama)" style="color:#a29bfe;">&#x1f916; AI Threats</button>
      <button class="tb-btn" onclick="showComplianceCrosswalk()" title="Compliance Crosswalk (NIST/FedRAMP/CMMC)" style="color:#f39c12;">&#x2696; Crosswalk</button>
    </div>
    <div class="tb-group">
      <button class="tb-btn" onclick="openSnippetsPanel()" title="Security Snippets — reusable building blocks" style="color:#a29bfe;">&#x229e; Snippets</button>
      <button class="tb-btn" onclick="importFromNDC()" title="Import from Network Design Canvas">&#x21e9; Import NDC</button>
      <button class="tb-btn" onclick="importThreatModel()" title="Import Threat Dragon / TMT threat model">&#x1f4c2; Import TM</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 security design">&#x2b07; Export &#x25be;</button>
        <div class="tb-export-menu">
          <button onclick="exportSDCAs('drawio');this.closest('.tb-export-wrap').classList.remove('open')">draw.io</button>
          <button onclick="exportSDCAs('svg');this.closest('.tb-export-wrap').classList.remove('open')">SVG</button>
          <button onclick="exportSDCAs('vsdx');this.closest('.tb-export-wrap').classList.remove('open')">Visio (.vsdx)</button>
          <button onclick="exportSDCAs('csv');this.closest('.tb-export-wrap').classList.remove('open')">CSV Bundle</button>
          <button onclick="exportSDCAs('threat-model');this.closest('.tb-export-wrap').classList.remove('open')" style="color:#e94560;">Threat Model (JSON)</button>
        </div>
      </div>
    </div>
    <div class="tb-group">
      <button class="tb-btn" onclick="zoomIn()">+ Zoom</button>
      <button class="tb-btn" onclick="zoomOut()">- Zoom</button>
      <button class="tb-btn" onclick="zoomFit()">&#x229e; Fit</button>
    </div>
    <div class="tb-group">
      {% set wf_canvas_id = "sdc" %}
      {% set wf_context_label = design.name if design else '' %}
      {% set wf_design_id = design_id %}
      {% include 'includes/workflow_trigger_btn.html' %}
    </div>
    <div class="tb-center">
      <span class="topology-name-display" id="design-name-display" contenteditable="true" oninput="isDirty=true;scheduleSave();">{{ design.name if design else 'Untitled Security Design' }}</span>
    </div>
    <div class="tb-status" id="tb-status">Ready</div>
  </div>

  <!-- Body (3-column: palette | canvas | config) -->
  <div class="canvas-body">

    <!-- Left Palette (matches NDC palette structure) -->
    <div class="palette" id="palette">
      <div class="palette-header">Security Objects
        <span style="font-size:10px;color:var(--text-dim);margin-left:4px;">(drag to canvas)</span>
      </div>
      <div style="padding:4px 8px;">
        <input type="text" id="palette-search" placeholder="Filter objects..." oninput="filterPalette(this.value)"
               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>

      <!-- Assets -->
      <div class="palette-section">
        <div class="palette-cat" style="color:#3498db;">Assets</div>
        <div class="palette-items">
          <div class="palette-item" draggable="true" data-type="asset-server" ondragstart="onDragStart(event)" title="Compute server / VM">
            <div class="pi-icon" style="background:#0f2b3a;border-color:#3498db;">SRV</div><span>Server</span>
          </div>
          <div class="palette-item" draggable="true" data-type="asset-database" ondragstart="onDragStart(event)" title="Data store (SQL, NoSQL, S3)">
            <div class="pi-icon" style="background:#0f2b3a;border-color:#2980b9;">DB</div><span>Database</span>
          </div>
          <div class="palette-item" draggable="true" data-type="asset-api" ondragstart="onDragStart(event)" title="REST/gRPC/GraphQL API">
            <div class="pi-icon" style="background:#0f2b3a;border-color:#1abc9c;">API</div><span>API</span>
          </div>
          <div class="palette-item" draggable="true" data-type="asset-webapp" ondragstart="onDragStart(event)" title="User-facing web application">
            <div class="pi-icon" style="background:#0f2b3a;border-color:#3498db;">WEB</div><span>Web App</span>
          </div>
          <div class="palette-item" draggable="true" data-type="asset-user" ondragstart="onDragStart(event)" title="Human user or external system">
            <div class="pi-icon" style="background:#1a1a2e;border-color:#9b59b6;">USR</div><span>User/Actor</span>
          </div>
          <div class="palette-item" draggable="true" data-type="asset-container" ondragstart="onDragStart(event)" title="Container workload (Docker/K8s)">
            <div class="pi-icon" style="background:#0f2b3a;border-color:#16a085;">CTR</div><span>Container</span>
          </div>
          <div class="palette-item" draggable="true" data-type="asset-lambda" ondragstart="onDragStart(event)" title="Serverless function (Lambda)">
            <div class="pi-icon" style="background:#0f2b3a;border-color:#e67e22;">FN</div><span>Serverless</span>
          </div>
          <div class="palette-item" draggable="true" data-type="asset-storage" ondragstart="onDragStart(event)" title="Object storage (S3/Blob/GCS)">
            <div class="pi-icon" style="background:#0f2b3a;border-color:#27ae60;">S3</div><span>Storage</span>
          </div>
          <div class="palette-item" draggable="true" data-type="asset-queue" ondragstart="onDragStart(event)" title="Message broker (SQS, Kafka)">
            <div class="pi-icon" style="background:#0f2b3a;border-color:#2c3e50;">MQ</div><span>Queue</span>
          </div>
          <div class="palette-item" draggable="true" data-type="asset-iot" ondragstart="onDragStart(event)" title="IoT/OT device">
            <div class="pi-icon" style="background:#0f2b3a;border-color:#e74c3c;">IOT</div><span>IoT Device</span>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <div class="palette-section">
        <div class="palette-cat" style="color:#27ae60;">Security Controls</div>
        <div class="palette-items">
          <div class="palette-item" draggable="true" data-type="ctrl-firewall" ondragstart="onDragStart(event)" title="Network firewall / WAF">
            <div class="pi-icon" style="background:#1a2e1a;border-color:#27ae60;">FW</div><span>Firewall</span>
          </div>
          <div class="palette-item" draggable="true" data-type="ctrl-idp" ondragstart="onDragStart(event)" title="Identity Provider (SSO/SAML/OIDC)">
            <div class="pi-icon" style="background:#1a2e1a;border-color:#2ecc71;">IDP</div><span>IdP / SSO</span>
          </div>
          <div class="palette-item" draggable="true" data-type="ctrl-mfa" ondragstart="onDragStart(event)" title="Multi-factor authentication">
            <div class="pi-icon" style="background:#1a2e1a;border-color:#27ae60;">MFA</div><span>MFA</span>
          </div>
          <div class="palette-item" draggable="true" data-type="ctrl-encryption" ondragstart="onDragStart(event)" title="Data encryption (at rest / in transit)">
            <div class="pi-icon" style="background:#1a2e1a;border-color:#1abc9c;">ENC</div><span>Encryption</span>
          </div>
          <div class="palette-item" draggable="true" data-type="ctrl-siem" ondragstart="onDragStart(event)" title="SIEM / Security monitoring">
            <div class="pi-icon" style="background:#1a2e1a;border-color:#16a085;">SIM</div><span>SIEM</span>
          </div>
          <div class="palette-item" draggable="true" data-type="ctrl-scanner" ondragstart="onDragStart(event)" title="Vulnerability scanner">
            <div class="pi-icon" style="background:#1a2e1a;border-color:#2ecc71;">SCN</div><span>Scanner</span>
          </div>
          <div class="palette-item" draggable="true" data-type="ctrl-pam" ondragstart="onDragStart(event)" title="Privileged Access Management">
            <div class="pi-icon" style="background:#1a2e1a;border-color:#27ae60;">PAM</div><span>PAM</span>
          </div>
          <div class="palette-item" draggable="true" data-type="ctrl-dlp" ondragstart="onDragStart(event)" title="Data Loss Prevention">
            <div class="pi-icon" style="background:#1a2e1a;border-color:#1abc9c;">DLP</div><span>DLP</span>
          </div>
          <div class="palette-item" draggable="true" data-type="ctrl-edr" ondragstart="onDragStart(event)" title="Endpoint Detection &amp; Response">
            <div class="pi-icon" style="background:#1a2e1a;border-color:#16a085;">EDR</div><span>EDR/XDR</span>
          </div>
          <div class="palette-item" draggable="true" data-type="ctrl-cspm" ondragstart="onDragStart(event)" title="Cloud Security Posture Management">
            <div class="pi-icon" style="background:#1a2e1a;border-color:#2ecc71;">CSP</div><span>CSPM</span>
          </div>
        </div>
      </div>

      <!-- Threats -->
      <div class="palette-section">
        <div class="palette-cat" style="color:#e74c3c;">STRIDE Threats</div>
        <div class="palette-items">
          <div class="palette-item" draggable="true" data-type="threat-spoofing" ondragstart="onDragStart(event)" title="STRIDE: Identity spoofing">
            <div class="pi-icon" style="background:#2b0f0f;border-color:#e74c3c;">S</div><span>Spoofing</span>
          </div>
          <div class="palette-item" draggable="true" data-type="threat-tampering" ondragstart="onDragStart(event)" title="STRIDE: Data/code tampering">
            <div class="pi-icon" style="background:#2b0f0f;border-color:#e74c3c;">T</div><span>Tampering</span>
          </div>
          <div class="palette-item" draggable="true" data-type="threat-repudiation" ondragstart="onDragStart(event)" title="STRIDE: Deny actions">
            <div class="pi-icon" style="background:#2b0f0f;border-color:#c0392b;">R</div><span>Repudiation</span>
          </div>
          <div class="palette-item" draggable="true" data-type="threat-info-disclosure" ondragstart="onDragStart(event)" title="STRIDE: Data leakage">
            <div class="pi-icon" style="background:#2b0f0f;border-color:#e74c3c;">I</div><span>Info Disclosure</span>
          </div>
          <div class="palette-item" draggable="true" data-type="threat-dos" ondragstart="onDragStart(event)" title="STRIDE: Availability attack">
            <div class="pi-icon" style="background:#2b0f0f;border-color:#c0392b;">D</div><span>Denial of Service</span>
          </div>
          <div class="palette-item" draggable="true" data-type="threat-elevation" ondragstart="onDragStart(event)" title="STRIDE: Privilege escalation">
            <div class="pi-icon" style="background:#2b0f0f;border-color:#e74c3c;">E</div><span>Priv Escalation</span>
          </div>
          <div class="palette-item" draggable="true" data-type="threat-lateral" ondragstart="onDragStart(event)" title="MITRE ATT&amp;CK: Lateral movement">
            <div class="pi-icon" style="background:#2b1a0f;border-color:#f39c12;">LM</div><span>Lateral Move</span>
          </div>
          <div class="palette-item" draggable="true" data-type="threat-exfil" ondragstart="onDragStart(event)" title="MITRE ATT&amp;CK: Data exfiltration">
            <div class="pi-icon" style="background:#2b0f0f;border-color:#e74c3c;">EX</div><span>Exfiltration</span>
          </div>
        </div>
      </div>

      <!-- Trust Boundaries -->
      <div class="palette-section">
        <div class="palette-cat" style="color:#e94560;">Trust Boundaries</div>
        <div class="palette-items">
          <div class="palette-item" draggable="true" data-type="boundary-dmz" ondragstart="onDragStart(event)" title="Demilitarized zone">
            <div class="pi-icon" style="background:rgba(233,69,96,0.15);border-color:#e94560;">DMZ</div><span>DMZ</span>
          </div>
          <div class="palette-item" draggable="true" data-type="boundary-enclave" ondragstart="onDragStart(event)" title="Security enclave (IL4/IL5/IL6)">
            <div class="pi-icon" style="background:rgba(233,69,96,0.15);border-color:#e94560;">ENC</div><span>Enclave</span>
          </div>
          <div class="palette-item" draggable="true" data-type="boundary-internet" ondragstart="onDragStart(event)" title="Public internet boundary">
            <div class="pi-icon" style="background:rgba(231,76,60,0.15);border-color:#e74c3c;">INT</div><span>Internet</span>
          </div>
          <div class="palette-item" draggable="true" data-type="boundary-cloud" ondragstart="onDragStart(event)" title="Cloud VPC/VNet boundary">
            <div class="pi-icon" style="background:rgba(52,152,219,0.15);border-color:#3498db;">VPC</div><span>Cloud VPC</span>
          </div>
          <div class="palette-item" draggable="true" data-type="boundary-onprem" ondragstart="onDragStart(event)" title="On-premises datacenter">
            <div class="pi-icon" style="background:rgba(155,89,182,0.15);border-color:#9b59b6;">ONP</div><span>On-Prem</span>
          </div>
          <div class="palette-item" draggable="true" data-type="boundary-classify" ondragstart="onDragStart(event)" title="Classification boundary (CUI/SECRET/TS)">
            <div class="pi-icon" style="background:rgba(241,196,15,0.15);border-color:#f1c40f;">CLS</div><span>Classification</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>
    </div>

    <!-- Right Config Panel (matches NDC 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" style="color:#e94560;">&#x1f6e1;</div>
        <p>Select a security 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>Classification</label>
          <select id="cfg-classification" class="form-control" onchange="updateConfig('classification', this.value)">
            <option value="PUBLIC">Public</option>
            <option value="CUI" selected>CUI</option>
            <option value="SECRET">SECRET</option>
            <option value="TOP SECRET">TOP SECRET</option>
          </select>
        </div>
        <div class="form-group">
          <label>Description</label>
          <textarea id="cfg-description" class="form-control" rows="3" oninput="updateConfig('description', this.value)"></textarea>
        </div>
      </div>
    </div>

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

  <!-- Assessment Results Panel (bottom, same as NDC compliance panel) -->
  <div id="assessment-panel" class="hidden" style="position:fixed;bottom:0;left:220px;right:0;background:var(--bg2);border-top:2px solid #e94560;z-index:100;max-height:350px;overflow:auto;">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--bg3);font-weight:600;color:#e94560;font-size:13px;">
      <span id="assess-title">Assessment Results</span>
      <button class="close-btn" onclick="document.getElementById('assessment-panel').classList.add('hidden')" style="background:none;border:none;color:var(--text);cursor:pointer;font-size:16px;">&#x2715;</button>
    </div>
    <div id="assess-content" style="padding:12px;overflow:auto;max-height:300px;font-size:13px;"></div>
  </div>

</div><!-- end canvas-layout -->
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/canvas-tooltips.js') }}"></script>
<script>
window.NODE_DESCS = {
  'asset-server':    'Server asset — physical or virtual compute resource within the authorization boundary',
  'asset-db':        'Database asset — relational, NoSQL, or data warehouse holding structured data',
  'asset-app':       'Application asset — software system or service (web app, API, microservice)',
  'asset-endpoint':  'Endpoint asset — user workstation, laptop, or mobile device',
  'asset-network':   'Network device — router, switch, load balancer, or network appliance',
  'asset-storage':   'Storage asset — SAN, NAS, object storage, or file share',
  'asset-cloud':     'Cloud service — IaaS/PaaS/SaaS resource hosted by a CSP',
  'asset-iot':       'IoT/OT device — sensor, controller, SCADA, or embedded system',
  'ctrl-access':     'Access control — authentication, authorization, RBAC, MFA, SSO (AC family)',
  'ctrl-audit':      'Audit & accountability — logging, SIEM integration, log retention (AU family)',
  'ctrl-network':    'Network security control — firewall rules, ACLs, segmentation, IDS/IPS (SC-7)',
  'ctrl-encrypt':    'Encryption control — data at rest/in transit, TLS, FIPS 140-2/3 validated (SC-8, SC-28)',
  'ctrl-identity':   'Identity management — IAM, directory services, PKI, certificate management (IA family)',
  'ctrl-patch':      'Patch management — vulnerability remediation, update cadence, STIG compliance (SI family)',
  'ctrl-backup':     'Backup & recovery — RPO/RTO, disaster recovery, continuity of operations (CP family)',
  'ctrl-monitor':    'Continuous monitoring — vulnerability scanning, compliance checking, CSPM (CA family)',
  'ctrl-config':     'Configuration management — baseline, change control, hardening, STIG (CM family)',
  'ctrl-incident':   'Incident response — detection, containment, eradication, recovery plan (IR family)',
  'ctrl-physical':   'Physical security — facility access, environmental controls, media protection (PE family)',
  'threat-external': 'External threat actor — nation-state, cybercriminal, hacktivist, or competitor',
  'threat-internal': 'Insider threat — malicious or negligent employee, contractor, or partner',
  'threat-malware':  'Malware threat — ransomware, trojan, worm, rootkit, or spyware',
  'threat-dos':      'Denial of service — DDoS, resource exhaustion, or application-layer flood',
  'threat-exploit':  'Exploit — vulnerability exploitation, zero-day, privilege escalation',
  'threat-social':   'Social engineering — phishing, spear-phishing, pretexting, baiting',
  'threat-supply':   'Supply chain threat — compromised vendor, dependency, or update mechanism',
  'threat-data':     'Data exfiltration — unauthorized data transfer, leakage, or theft',
  'boundary-auth':   'Authorization boundary — outer boundary of the system under ATO assessment',
  'boundary-network':'Network boundary — logical or physical network segmentation zone',
  'boundary-data':   'Data boundary — classification zone for CUI, PII, PHI, or sensitive data',
  'boundary-trust':  'Trust boundary — demarcation between different trust/privilege levels',
  'boundary-cloud':  'Cloud boundary — CSP responsibility vs customer responsibility (shared model)',
  'boundary-enclave':'Security enclave — isolated, hardened environment (SIPR, JWICS, SCIFnet)',
};
</script>
<script src="{{ url_for('static', filename='js/security-canvas.js') }}"></script>
{% endblock %}