{% extends "security_canvas/base.html" %}
{% block title %}Remediation — {{ design.name if design else 'Design' }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Remediation Plans</h1>
    <p class="page-subtitle">{{ design.name if design else '' }}</p>
  </div>
  <div class="page-actions">
    <a href="/security/canvas/{{ design.id if design else '' }}" class="btn btn-secondary">Back to Canvas</a>
    <button class="btn btn-primary" style="background:#e94560;" onclick="generateNew()">Generate New Plan</button>
  </div>
</div>
{% if plans %}
{% for p in plans %}
<section class="panel panel-wide">
  <div class="panel-header">
    <h2 class="panel-title">{{ p.title }}</h2>
    <span style="padding:2px 10px;border-radius:4px;font-size:0.75rem;font-weight:bold;background:{{ '#e74c3c' if p.priority=='critical' else '#f39c12' if p.priority=='high' else '#5dade2' }};color:#fff;">{{ p.priority|upper }}</span>
  </div>
  <div style="padding:0.75rem 1rem;font-size:0.85rem;color:var(--text-dim);border-bottom:1px solid var(--border);">
    Status: <strong>{{ p.status }}</strong> | Effort: {{ p.estimated_effort or 'TBD' }} | Created: {{ p.created_at[:16] if p.created_at else '' }}
  </div>
  <div id="plan-{{ p.id }}" style="padding:1rem;">
    <script>
      (function(){
        const steps = {{ p.remediation_steps|safe if p.remediation_steps else '[]' }};
        let html = '';
        if (Array.isArray(steps) && steps.length) {
          steps.forEach((phase, i) => {
            if (phase.actions) {
              html += '<div style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px;overflow:hidden;">';
              html += '<div style="padding:0.5rem 1rem;background:rgba(233,69,96,0.08);font-weight:600;">Phase '+(i+1)+': '+(phase.name||'')+'</div>';
              html += '<table class="data-table" style="margin:0;"><thead><tr><th>Rule</th><th>Sev</th><th>Step</th><th>Effort</th></tr></thead><tbody>';
              phase.actions.forEach(a => {
                html += '<tr><td><strong>'+a.rule_id+'</strong></td><td>'+a.severity+'</td><td style="font-size:0.8rem;">'+a.remediation_step+'</td><td>'+a.effort_hours+'h</td></tr>';
              });
              html += '</tbody></table></div>';
            }
          });
        } else { html = '<p style="color:var(--text-dim);">No steps in this plan.</p>'; }
        document.getElementById('plan-{{ p.id }}').innerHTML = html;
      })();
    </script>
  </div>
</section>
{% endfor %}
{% else %}
<section class="panel panel-wide">
  <div style="padding:2rem;text-align:center;color:var(--text-dim);">
    <p>No remediation plans yet. Run an assessment first, then generate a plan.</p>
  </div>
</section>
{% endif %}
{% endblock %}
{% block scripts %}
<script>
function generateNew() {
  fetch(SC_BASE + '/api/designs/{{ design.id if design else "" }}/remediate', {method:'POST', headers:{'Content-Type':'application/json'}, body:'{}'})
    .then(r => r.json()).then(d => { alert('Plan generated: ' + (d.total_actions||0) + ' actions'); location.reload(); })
    .catch(e => alert('Error: ' + e));
}
</script>
{% endblock %}