{% extends "security_canvas/base.html" %}
{% block title %}ATO Artifacts — {{ design.name }}{% endblock %}
{% block content %}
<div class="page-header">
  <h1>ATO Artifact Export</h1>
  <p class="text-muted">{{ design.name }} — Generate SSP, SAR, and POA&M documents</p>
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;padding:0 16px 24px;">
  <div class="card" style="background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:20px;">
    <h3 style="color:#5dade2;margin-bottom:8px;">System Security Plan (SSP)</h3>
    <p style="font-size:12px;color:var(--text-dim);margin-bottom:12px;">NIST 800-53 control implementation narrative covering all 20 control families.</p>
    <button class="btn btn-primary" onclick="exportArtifact('ssp')" style="width:100%;">Generate SSP</button>
  </div>
  <div class="card" style="background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:20px;">
    <h3 style="color:#e94560;margin-bottom:8px;">Security Assessment Report (SAR)</h3>
    <p style="font-size:12px;color:var(--text-dim);margin-bottom:12px;">Assessment methodology, findings detail, risk summary, and recommendations.</p>
    <button class="btn btn-primary" onclick="exportArtifact('sar')" style="background:#e94560;border-color:#c0392b;width:100%;">Generate SAR</button>
  </div>
  <div class="card" style="background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:20px;">
    <h3 style="color:#f39c12;margin-bottom:8px;">Plan of Action &amp; Milestones</h3>
    <p style="font-size:12px;color:var(--text-dim);margin-bottom:12px;">POA&M with phased remediation actions, deadlines, and effort estimates.</p>
    <button class="btn btn-primary" onclick="exportArtifact('poam')" style="background:#f39c12;border-color:#e67e22;width:100%;">Generate POA&M</button>
  </div>
  <div class="card" style="background:var(--bg2);border:1px solid #27ae60;border-radius:8px;padding:20px;">
    <h3 style="color:#27ae60;margin-bottom:8px;">Full ATO Package</h3>
    <p style="font-size:12px;color:var(--text-dim);margin-bottom:12px;">Download all three artifacts as a single bundle.</p>
    <button class="btn btn-primary" onclick="exportArtifact('artifact-bundle')" style="background:#27ae60;border-color:#1e8449;width:100%;">Generate All</button>
  </div>
</div>
<div id="artifact-preview" class="hidden" style="margin:0 16px 24px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:16px;">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
    <h3 id="artifact-title" style="margin:0;color:var(--text);">Preview</h3>
    <div>
      <button class="btn btn-outline" onclick="downloadArtifact()" style="font-size:11px;">Download .md</button>
      <button class="btn btn-outline" onclick="document.getElementById('artifact-preview').classList.add('hidden')" style="font-size:11px;">Close</button>
    </div>
  </div>
  <pre id="artifact-content" style="background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:12px;max-height:500px;overflow:auto;font-size:11px;white-space:pre-wrap;color:var(--text);"></pre>
</div>
<script>
let _lastArtifact = null;
function exportArtifact(type) {
  const designId = '{{ design.id }}';
  fetch('/security/api/designs/' + designId + '/export/' + type, {method:'POST',headers:{'Content-Type':'application/json'},body:'{}'})
    .then(r => r.json())
    .then(d => {
      if (d.error) { alert('Error: ' + d.error); return; }
      const preview = document.getElementById('artifact-preview');
      preview.classList.remove('hidden');
      if (type === 'artifact-bundle') {
        document.getElementById('artifact-title').textContent = 'ATO Package — SSP + SAR + POA&M';
        const combined = '# SSP\n\n' + d.ssp + '\n\n---\n\n# SAR\n\n' + d.sar + '\n\n---\n\n# POA&M\n\n' + d.poam;
        document.getElementById('artifact-content').textContent = combined;
        _lastArtifact = {name: 'ato-package.md', content: combined};
      } else {
        document.getElementById('artifact-title').textContent = type.toUpperCase() + ' Preview';
        document.getElementById('artifact-content').textContent = d.content;
        _lastArtifact = {name: type + '.md', content: d.content};
      }
    });
}
function downloadArtifact() {
  if (!_lastArtifact) return;
  const blob = new Blob([_lastArtifact.content], {type:'text/markdown'});
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = _lastArtifact.name;
  a.click();
}
</script>
{% endblock %}