<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cloud Audit Report - {{ report.provider.upper() }} {{ report.account_id }}</title>
<style>
  :root {
    --bg: #0a0b0d;
    --bg-card: #111318;
    --border: #1e2028;
    --text: #e4e6eb;
    --text-dim: #8b8f98;
    --teal: #2dd4bf;
    --red: #ef4444;
    --orange: #f59e0b;
    --cyan: #06b6d4;
    --green: #22c55e;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    padding: 40px 20px;
  }

  .container { max-width: 1100px; margin: 0 auto; }

  /* Header */
  .header {
    text-align: center;
    padding: 40px 0 32px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
  }

  .header h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
  }

  .header .meta {
    color: var(--text-dim);
    font-size: 14px;
  }

  .header .meta span { margin: 0 8px; }

  /* Score */
  .score-section {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
  }

  .score-ring {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
  }

  .score-good { border: 4px solid var(--green); color: var(--green); }
  .score-warn { border: 4px solid var(--orange); color: var(--orange); }
  .score-bad { border: 4px solid var(--red); color: var(--red); }

  /* Executive summary */
  .executive-summary {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 40px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
  }

  .executive-summary-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-bottom: 8px;
  }

  /* Summary cards */
  .summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
  }

  .summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
  }

  .summary-card .number {
    font-size: 32px;
    font-weight: 700;
    color: var(--teal);
  }

  .summary-card .label {
    font-size: 13px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
  }

  /* Severity badges */
  .severity {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .severity-critical { background: rgba(239,68,68,0.15); color: var(--red); }
  .severity-high { background: rgba(239,68,68,0.1); color: #f87171; }
  .severity-medium { background: rgba(245,158,11,0.12); color: var(--orange); }
  .severity-low { background: rgba(6,182,212,0.12); color: var(--cyan); }
  .severity-info { background: rgba(139,143,152,0.1); color: var(--text-dim); }

  /* Category badges */
  .category {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--border);
    color: var(--text-dim);
  }

  /* Priority group sections */
  .priority-group {
    margin-bottom: 40px;
  }

  .priority-group-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 40px 0 20px;
    padding-bottom: 10px;
    padding-left: 16px;
    border-bottom: 1px solid var(--border);
  }

  .priority-group-header.priority-critical { border-left: 4px solid var(--red); }
  .priority-group-header.priority-medium { border-left: 4px solid var(--orange); }
  .priority-group-header.priority-low { border-left: 4px solid var(--cyan); }

  .priority-group-label {
    font-size: 20px;
    font-weight: 600;
  }

  .priority-group-count {
    font-size: 14px;
    color: var(--text-dim);
  }

  .priority-group-description {
    font-size: 13px;
    color: var(--text-dim);
    margin: -12px 0 16px 20px;
  }

  /* Findings */
  .section-title {
    font-size: 20px;
    font-weight: 600;
    margin: 40px 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }

  .finding {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 12px;
    transition: border-color 0.2s;
  }

  .finding:hover { border-color: rgba(45,212,191,0.2); }

  .finding-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .finding-title {
    font-size: 15px;
    font-weight: 600;
    flex: 1;
    min-width: 200px;
  }

  .finding-resource {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    color: var(--text-dim);
    background: rgba(255,255,255,0.04);
    padding: 2px 8px;
    border-radius: 4px;
  }

  .finding-body { font-size: 14px; color: var(--text-dim); margin-bottom: 10px; }

  .finding-recommendation {
    font-size: 13px;
    padding: 10px 14px;
    background: rgba(45,212,191,0.04);
    border-left: 3px solid var(--teal);
    border-radius: 0 6px 6px 0;
    color: var(--text);
  }

  .finding-recommendation::before {
    content: 'Fix: ';
    font-weight: 600;
    color: var(--teal);
  }

  /* Footer */
  .footer {
    text-align: center;
    padding: 40px 0 20px;
    margin-top: 60px;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 13px;
  }

  .footer a {
    color: var(--teal);
    text-decoration: none;
  }

  .footer a:hover { text-decoration: underline; }

  /* Remediation panel */
  .remediation-panel {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }

  .remediation-panel summary {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--teal);
    background: rgba(45,212,191,0.04);
    user-select: none;
    list-style: none;
  }

  .remediation-panel summary::-webkit-details-marker { display: none; }

  .remediation-panel summary::before {
    content: '\25b6\00a0';
    font-size: 10px;
  }

  .remediation-panel[open] summary::before {
    content: '\25bc\00a0';
  }

  .remediation-content {
    padding: 14px;
    font-size: 13px;
    border-top: 1px solid var(--border);
  }

  .remediation-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin: 10px 0 4px;
  }

  .remediation-label:first-child { margin-top: 0; }

  .code-block {
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
  }

  .copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
  }

  .copy-btn:hover { color: var(--teal); border-color: var(--teal); }

  .compliance-ref {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: rgba(45,212,191,0.08);
    color: var(--teal);
    margin-left: 6px;
  }

  .effort-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
  }

  .effort-low { background: rgba(34,197,94,0.12); color: var(--green); }
  .effort-medium { background: rgba(245,158,11,0.12); color: var(--orange); }
  .effort-high { background: rgba(239,68,68,0.12); color: var(--red); }

  .remediation-doc {
    margin-top: 10px;
    font-size: 12px;
  }

  .remediation-doc a { color: var(--teal); text-decoration: none; }
  .remediation-doc a:hover { text-decoration: underline; }

  /* CIS coverage section */
  .cis-section {
    margin-top: 40px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
  }

  .cis-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
  }

  .cis-subtitle {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 16px;
  }

  .cis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }

  .cis-item {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .cis-item-pass {
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.15);
    color: var(--green);
  }

  .cis-item-fail {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.15);
    color: var(--red);
  }

  .cis-indicator {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
  }

  /* Attack chains section */
  .attack-chains-section {
    margin-bottom: 40px;
  }

  .attack-chains-subtitle {
    font-size: 13px;
    color: var(--text-dim);
    margin: -12px 0 20px;
  }

  .attack-chain-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 12px;
    transition: border-color 0.2s;
  }

  .attack-chain-card:hover { border-color: rgba(239,68,68,0.3); }

  .attack-chain-critical { border-left: 4px solid var(--red); }
  .attack-chain-high { border-left: 4px solid #f87171; }
  .attack-chain-medium { border-left: 4px solid var(--orange); }
  .attack-chain-low { border-left: 4px solid var(--cyan); }
  .attack-chain-info { border-left: 4px solid var(--text-dim); }

  .attack-chain-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .attack-chain-name {
    font-size: 15px;
    font-weight: 600;
    flex: 1;
    min-width: 200px;
  }

  .attack-chain-id {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 11px;
    color: var(--text-dim);
    background: rgba(255,255,255,0.04);
    padding: 2px 8px;
    border-radius: 4px;
  }

  .attack-chain-narrative {
    font-size: 14px;
    font-style: italic;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.6;
  }

  .attack-chain-fix {
    font-size: 13px;
    padding: 10px 14px;
    background: rgba(45,212,191,0.04);
    border-left: 3px solid var(--teal);
    border-radius: 0 6px 6px 0;
    color: var(--text);
    margin-bottom: 10px;
  }

  .attack-chain-findings {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 6px;
  }

  .attack-chain-mitre {
    font-size: 12px;
    color: var(--text-dim);
  }

  /* Severity bar */
  .severity-bar {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
  }

  .severity-bar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
  }

  .severity-bar-count {
    font-weight: 700;
    font-size: 20px;
  }

  @media (max-width: 640px) {
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
    .finding-header { flex-direction: column; align-items: flex-start; }
  }

  @media (prefers-color-scheme: light) {
    :root {
      --bg: #f8f9fa;
      --bg-card: #ffffff;
      --border: #dee2e6;
      --text: #212529;
      --text-dim: #6c757d;
      --teal: #0d9488;
      --red: #dc2626;
      --orange: #d97706;
      --cyan: #0891b2;
      --green: #16a34a;
    }
    .code-block { background: rgba(0,0,0,0.03); }
    .copy-btn { background: #f8f9fa; }
  }

  @media print {
    body { background: white; color: black; padding: 20px; }
    .container { max-width: 100%; }
    .copy-btn { display: none; }
    .finding { break-inside: avoid; border: 1px solid #ddd; }
    .remediation-panel { display: none; }
    .footer a { color: black; }
    .executive-summary { background: white; border: 1px solid #ddd; }
    .priority-group-header { border-bottom: 1px solid #ddd; }
    .score-ring { border-color: black !important; color: black !important; }
    .summary-card { background: white; border: 1px solid #ddd; }
    .cis-section { background: white; border: 1px solid #ddd; }
  }
</style>
</head>
<body>
<div class="container">

  <!-- Header -->
  <div class="header">
    {% if logo_base64 %}
    <img src="data:image/png;base64,{{ logo_base64 }}" alt="cloud-audit" style="width: 160px; margin-bottom: 20px;">
    {% endif %}
    <h1>Cloud Infrastructure Audit</h1>
    <div class="meta">
      <span>{{ report.provider.upper() }}</span>
      <span>&middot;</span>
      <span>Account: {{ report.account_id or 'unknown' }}</span>
      <span>&middot;</span>
      <span>{{ report.timestamp.strftime('%Y-%m-%d %H:%M UTC') }}</span>
      <span>&middot;</span>
      <span>{{ "%.1f"|format(report.duration_seconds) }}s</span>
    </div>
  </div>

  <!-- Score -->
  <div class="score-section">
    {% set score = report.summary.score %}
    <div class="score-ring {% if score >= 80 %}score-good{% elif score >= 50 %}score-warn{% else %}score-bad{% endif %}" role="meter" aria-valuenow="{{ score }}" aria-valuemin="0" aria-valuemax="100" aria-label="Health score: {{ score }} out of 100">
      {{ score }}
    </div>
  </div>

  <!-- Executive Summary -->
  {% if executive_summary %}
  <div class="executive-summary">
    <div class="executive-summary-label">Executive Summary</div>
    {{ executive_summary }}
  </div>
  {% endif %}

  <!-- Attack Chains -->
  {% if attack_chains %}
  <div class="attack-chains-section">
    <h2 class="section-title">Attack Chains ({{ attack_chains|length }} detected)</h2>
    <p class="attack-chains-subtitle">Correlated findings that form exploitable attack paths</p>
    {% for chain in attack_chains %}
    <div class="attack-chain-card attack-chain-{{ chain.severity.value }}">
      <div class="attack-chain-header">
        <span class="severity severity-{{ chain.severity.value }}">{{ chain.severity.value }}</span>
        <span class="attack-chain-name">{{ chain.name }}</span>
        <span class="attack-chain-id">{{ chain.chain_id }}</span>
      </div>
      <div class="attack-chain-narrative">{{ chain.attack_narrative }}</div>
      {% if chain.cost_estimate and chain.cost_estimate.high_usd > 0 %}
      <div style="margin: 6px 0; font-size: 14px;"><strong style="color: var(--red);">Estimated risk: {{ chain.cost_estimate.display }}</strong> <span style="color: var(--text-dim);">- {{ chain.cost_estimate.rationale }}</span></div>
      {% endif %}
      <div class="attack-chain-fix">Priority fix: {{ chain.priority_fix }}</div>
      <div class="attack-chain-findings">
        Based on {{ chain.findings|length }} findings:
        {% for f in chain.findings %}
        <span class="compliance-ref">{{ f.check_id }}</span>
        {% endfor %}
      </div>
      {% if chain.mitre_refs %}
      <div class="attack-chain-mitre">
        {% for ref in chain.mitre_refs %}
        <span class="compliance-ref">{{ ref }}</span>
        {% endfor %}
      </div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% endif %}

  <!-- Severity breakdown -->
  <div class="severity-bar">
    {% for sev in severity_order %}
      {% set count = report.summary.by_severity.get(sev, 0) %}
      {% if count %}
      <div class="severity-bar-item">
        <span class="severity severity-{{ sev.value }}">{{ sev.value }}</span>
        <span class="severity-bar-count">{{ count }}</span>
      </div>
      {% endif %}
    {% endfor %}
  </div>

  <!-- Summary cards -->
  <div class="summary-grid">
    <div class="summary-card">
      <div class="number">{{ report.summary.resources_scanned }}</div>
      <div class="label">Resources Scanned</div>
    </div>
    <div class="summary-card">
      <div class="number">{{ report.summary.total_findings }}</div>
      <div class="label">Issues Found</div>
    </div>
    <div class="summary-card">
      <div class="number" style="color: var(--green)">{{ report.summary.checks_passed }}</div>
      <div class="label">Checks Passed</div>
    </div>
    <div class="summary-card">
      <div class="number" style="color: var(--red)">{{ report.summary.checks_failed }}</div>
      <div class="label">Checks Failed</div>
    </div>
    {% if report.summary.total_risk_exposure and report.summary.total_risk_exposure.high_usd > 0 %}
    <div class="summary-card">
      <div class="number" style="color: var(--red); font-size: 20px;">{{ report.summary.total_risk_exposure.display }}</div>
      <div class="label">Risk Exposure (<a href="https://www.ibm.com/reports/data-breach" target="_blank" rel="noopener" style="color: var(--teal);">methodology</a>)</div>
    </div>
    {% endif %}
  </div>

  <!-- Findings by priority group -->
  {% for group in priority_groups %}
  <div class="priority-group">
    <div class="priority-group-header {{ group.color_class }}">
      <span class="priority-group-label">{{ group.label }}</span>
      <span class="priority-group-count">({{ group.findings | length }})</span>
    </div>
    <div class="priority-group-description">{{ group.description }}</div>

    {% for finding in group.findings %}
    <div class="finding">
      <div class="finding-header">
        <span class="severity severity-{{ finding.severity.value }}" aria-label="Severity: {{ finding.severity.value }}">{{ finding.severity.value }}</span>
        <span class="finding-title">{{ finding.title }}</span>
        {% for ref in finding.compliance_refs %}
        <span class="compliance-ref">{{ ref }}</span>
        {% endfor %}
        <span class="finding-resource">{{ finding.resource_id }}</span>
      </div>
      <div class="finding-body">{{ finding.description }}</div>
      {% if finding.cost_estimate and finding.cost_estimate.high_usd > 0 %}
      <div class="finding-cost" style="margin: 8px 0; padding: 8px 12px; background: rgba(239,68,68,0.06); border-radius: 6px; font-size: 13px;">
        <strong style="color: var(--red);">Risk: {{ finding.cost_estimate.display }}</strong>
        <span style="color: var(--text-dim);"> - {{ finding.cost_estimate.rationale }}</span>
        {% if finding.cost_estimate.source_url %}
        <a href="{{ finding.cost_estimate.source_url }}" target="_blank" rel="noopener" style="color: var(--teal); margin-left: 4px; text-decoration: none;">[source]</a>
        {% endif %}
      </div>
      {% endif %}
      <div class="finding-recommendation">{{ finding.recommendation }}</div>
      {% if finding.remediation %}
      <details class="remediation-panel">
        <summary>How to fix</summary>
        <div class="remediation-content">
          <div class="remediation-label">Effort: <span class="effort-badge effort-{{ finding.remediation.effort.value }}">{{ finding.remediation.effort.value }}</span></div>
          <div class="remediation-label">AWS CLI</div>
          <div class="code-block"><button class="copy-btn" onclick="copyCode(this)" aria-label="Copy code to clipboard">Copy</button>{{ finding.remediation.cli }}</div>
          <div class="remediation-label">Terraform</div>
          <div class="code-block"><button class="copy-btn" onclick="copyCode(this)" aria-label="Copy code to clipboard">Copy</button>{{ finding.remediation.terraform }}</div>
          <div class="remediation-doc"><a href="{{ finding.remediation.doc_url }}" target="_blank" rel="noopener">AWS Documentation &rarr;</a></div>
        </div>
      </details>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% endfor %}

  {% if not sorted_findings %}
  <div style="text-align: center; padding: 60px 0;">
    <div style="font-size: 48px; margin-bottom: 16px;">&#10004;</div>
    <h2>No issues found</h2>
    <p style="color: var(--text-dim)">Your infrastructure passed all checks.</p>
  </div>
  {% endif %}

  <!-- CIS Benchmark Coverage -->
  {% if cis_status %}
  <div class="cis-section">
    <div class="cis-title">CIS AWS Foundations Benchmark Coverage</div>
    {% set fail_count = cis_status | selectattr("status", "equalto", "fail") | list | length %}
    {% set pass_count = cis_status | selectattr("status", "equalto", "pass") | list | length %}
    <div class="cis-subtitle">{{ cis_status | length }} controls mapped &middot; {{ pass_count }} passed &middot; {{ fail_count }} with findings</div>
    <div class="cis-grid">
      {% for item in cis_status %}
      <div class="cis-item cis-item-{{ item.status }}">
        <span class="cis-indicator">{% if item.status == "pass" %}&#10003;{% else %}&#10007;{% endif %}</span>
        {{ item.ref }}
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <!-- Footer -->
  <div class="footer">
    Generated by <a href="https://github.com/gebalamariusz/cloud-audit">cloud-audit</a>
    &middot;
    Need help fixing these issues? <a href="https://haitmg.pl">Contact HAIT</a>
  </div>

</div>

<script>
function copyCode(btn){
  var block=btn.parentElement;
  var clone=block.cloneNode(true);
  var btns=clone.querySelectorAll('.copy-btn');
  for(var i=0;i<btns.length;i++){btns[i].remove();}
  var t=clone.textContent.trim();
  navigator.clipboard.writeText(t).then(function(){
    btn.textContent='Copied!';
    setTimeout(function(){btn.textContent='Copy'},1500);
  });
}
</script>
</body>
</html>
