{% extends "security_canvas/base.html" %}
{% block title %}Security Design Canvas — Dashboard{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title" style="color:#e94560;">&#x1f6e1; Security Design Canvas</h1>
    <p class="page-subtitle">Visual security architecture, threat modeling, STRIDE analysis, and remediation planning</p>
  </div>
  <div class="page-actions">
    <a href="/security/canvas/new" class="btn btn-primary" style="background:#e94560;border-color:#c0392b;">+ New Security Design</a>
    <a href="/simulate/chat?canvas_type=sdc" class="btn btn-secondary" title="Digital Program Twin — AI-assisted simulation chat">Simulate Chat</a>
  </div>
</div>

<!-- Risk Posture Overview -->
<div class="stats-bar" id="posture-stats">
  <div class="stat-card"><div class="stat-value">{{ designs|length }}</div><div class="stat-label">Designs</div></div>
  <div class="stat-card"><div class="stat-value">{{ recent_assessments|length }}</div><div class="stat-label">Assessments</div></div>
</div>

<!-- Recent Assessments -->
{% if recent_assessments %}
<section class="panel panel-wide">
  <div class="panel-header">
    <h2 class="panel-title">Recent Assessments</h2>
    <button class="btn btn-secondary" style="font-size:0.7rem;padding:2px 8px;color:#e74c3c;" onclick="clearAllAssessments()">Clear All</button>
  </div>
  <table class="data-table"><thead><tr><th>Design</th><th>Type</th><th>Risk Score</th><th>Grade</th><th>Date</th><th>Actions</th></tr></thead><tbody>
  {% for a in recent_assessments %}
  <tr id="assess-row-{{ a.id }}">
    <td><a href="/security/canvas/{{ a.design_id }}">{{ a.design_name or a.design_id }}</a></td>
    <td>{{ a.assessment_type }}</td>
    <td><span style="color:{{ '#e74c3c' if a.risk_score < 40 else '#f39c12' if a.risk_score < 70 else '#27ae60' }}">{{ a.risk_score|round(1) }}</span></td>
    <td><strong style="color:{{ '#27ae60' if a.posture_grade in ['A','B'] else '#f39c12' if a.posture_grade == 'C' else '#e74c3c' }}">{{ a.posture_grade }}</strong></td>
    <td>{{ a.ran_at[:16] if a.ran_at else '—' }}</td>
    <td><button class="btn btn-secondary" style="font-size:0.65rem;padding:1px 6px;color:#e74c3c;" onclick="deleteAssessment('{{ a.id }}')">&#x2715;</button></td>
  </tr>
  {% endfor %}
  </tbody></table>
</section>
{% endif %}

<!-- Security Designs -->
<section class="panel panel-wide">
  <div class="panel-header">
    <h2 class="panel-title">Security Designs</h2>
    {% if designs %}<button class="btn btn-secondary" style="font-size:0.7rem;padding:2px 8px;color:#e74c3c;" onclick="clearAllDesigns()">Clear All</button>{% endif %}
  </div>
  {% if designs %}
  <table class="data-table"><thead><tr><th>Name</th><th>Classification</th><th>Source</th><th>Updated</th><th>Actions</th></tr></thead><tbody>
  {% for d in designs %}
  <tr>
    <td><a href="/security/canvas/{{ d.id }}"><strong>{{ d.name }}</strong></a><br><span style="font-size:0.75rem;color:var(--text-dim);">{{ d.description[:80] if d.description else '' }}</span></td>
    <td>{{ d.classification or 'CUI' }}</td>
    <td>{% if d.source_topology_id %}<a href="/network/canvas/{{ d.source_topology_id }}" style="font-size:0.8rem;">NDC Import</a>{% else %}Manual{% endif %}</td>
    <td>{{ d.updated_at[:16] if d.updated_at else '—' }}</td>
    <td>
      <a href="/security/canvas/{{ d.id }}" class="btn btn-secondary" style="font-size:0.7rem;padding:2px 8px;">Edit</a>
      <button class="btn btn-primary" style="font-size:0.7rem;padding:2px 8px;background:#e94560;" onclick="runAssess('{{ d.id }}')">Assess</button>
      <a href="/security/twin/{{ d.id }}" class="btn btn-secondary" style="font-size:0.7rem;padding:2px 8px;color:#00bcd4;" title="Attack Path Digital Twin">DT</a>
      <button class="btn btn-secondary" style="font-size:0.65rem;padding:1px 6px;color:#e74c3c;" onclick="deleteDesign('{{ d.id }}','{{ d.name }}')">&#x2715;</button>
    </td>
  </tr>
  {% endfor %}
  </tbody></table>
  {% else %}
  <p style="padding:1rem;color:var(--text-dim);">No security designs yet. <a href="/security/canvas/new">Create one</a> or import from Network Design Canvas.</p>
  {% endif %}
</section>
{% endblock %}
{% block scripts %}
<script>
function runAssess(designId) {
  fetch(SC_BASE + '/api/designs/' + designId + '/assess', {method:'POST', headers:{'Content-Type':'application/json'}, body:'{}'})
    .then(r => r.json()).then(d => {
      alert('Assessment complete: Grade ' + d.posture_grade + ' (Score: ' + d.risk_score + ')');
      location.reload();
    }).catch(e => alert('Error: ' + e));
}

function apiCall(url, method) {
  return fetch(url, {method, headers:{'Content-Type':'application/json'}})
    .then(r => { if (!r.ok) throw new Error(r.status + ' ' + r.statusText); return r.json(); });
}

function deleteDesign(id, name) {
  if (!confirm('Delete security design "' + (name||id) + '"? This cannot be undone.')) return;
  apiCall(SC_BASE + '/api/designs/' + id, 'DELETE').then(() => location.reload()).catch(e => alert('Error: ' + e.message));
}

function clearAllDesigns() {
  if (!confirm('Delete ALL security designs? This cannot be undone.')) return;
  apiCall(SC_BASE + '/api/clear-designs', 'DELETE').then(() => location.reload()).catch(e => alert('Error: ' + e.message));
}

function deleteAssessment(id) {
  apiCall(SC_BASE + '/api/delete-assessment/' + id, 'DELETE').then(() => {
    const row = document.getElementById('assess-row-' + id);
    if (row) row.remove();
  }).catch(e => alert('Error: ' + e.message));
}

function clearAllAssessments() {
  if (!confirm('Clear ALL assessment history?')) return;
  apiCall(SC_BASE + '/api/clear-assessments', 'DELETE').then(() => location.reload()).catch(e => alert('Error: ' + e.message));
}
</script>
{% endblock %}