{% extends "security_canvas/base.html" %}
{% block title %}Assessment — {{ design.name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Security Assessment</h1>
    <p class="page-subtitle">{{ design.name }} — {{ assessment.assessment_type }} ({{ assessment.ran_at[:16] if assessment.ran_at else '' }})</p>
  </div>
  <div class="page-actions">
    <a href="/security/canvas/{{ design.id }}" class="btn btn-secondary">Back to Canvas</a>
    <a href="/security/remediation/{{ design.id }}" class="btn btn-primary" style="background:#e94560;">View Remediation</a>
  </div>
</div>
<div class="stats-bar">
  <div class="stat-card"><div class="stat-value" style="color:{{ '#27ae60' if assessment.posture_grade in ['A','B'] else '#f39c12' if assessment.posture_grade == 'C' else '#e74c3c' }}">{{ assessment.posture_grade }}</div><div class="stat-label">Posture Grade</div></div>
  <div class="stat-card"><div class="stat-value">{{ assessment.risk_score|round(1) }}</div><div class="stat-label">Risk Score</div></div>
  <div class="stat-card"><div class="stat-value">{{ assessment.total_threats }}</div><div class="stat-label">Threats</div></div>
  <div class="stat-card"><div class="stat-value">{{ assessment.total_controls }}</div><div class="stat-label">Controls</div></div>
</div>
<section class="panel panel-wide">
  <div class="panel-header"><h2 class="panel-title">Findings</h2></div>
  <div id="findings-container" style="padding:1rem;">
    <script>
      const findings = {{ assessment.findings_json|safe if assessment.findings_json else '[]' }};
      const recs = {{ assessment.recommendations_json|safe if assessment.recommendations_json else '[]' }};
      let html = '';
      if (findings.length) {
        html += '<table class="data-table"><thead><tr><th>Rule</th><th>Sev</th><th>Title</th><th>Description</th></tr></thead><tbody>';
        findings.forEach(f => {
          const c = f.severity==='CAT1'?'#e74c3c':f.severity==='CAT2'?'#f39c12':'#5dade2';
          html += '<tr><td><strong>'+f.rule_id+'</strong></td><td style="color:'+c+';font-weight:bold;">'+f.severity+'</td><td>'+f.title+'</td><td style="font-size:0.8rem;">'+f.description+'</td></tr>';
        });
        html += '</tbody></table>';
      } else { html = '<p style="color:#27ae60;font-weight:bold;">No findings — design is secure.</p>'; }
      if (recs.length) {
        html += '<h3 style="margin-top:1rem;color:var(--text);">Recommendations</h3><ul style="padding-left:1.5rem;color:var(--text-dim);font-size:0.85rem;">';
        recs.forEach(r => html += '<li>'+r+'</li>');
        html += '</ul>';
      }
      document.getElementById('findings-container').innerHTML = html;
    </script>
  </div>
</section>
{% endblock %}