<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>APIScan Report - {{ target }}</title>
  <style>
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; margin: 0; background: #0b0f14; color: #e6edf3; }
    header { padding: 24px; background: #0f1720; border-bottom: 1px solid #1f2a37; }
    h1 { margin: 0 0 8px 0; font-size: 20px; }
    .muted { color: #9aa4b2; font-size: 14px; }
    main { padding: 24px; max-width: 1100px; margin: 0 auto; }
    .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 28px; }
    .card { background: #0f1720; border: 1px solid #1f2a37; border-radius: 12px; padding: 14px; }
    .k { font-size: 12px; color: #9aa4b2; margin-bottom: 6px; }
    .v { font-size: 18px; font-weight: 600; }
    .badge { display:inline-block; padding: 3px 8px; border-radius: 999px; font-size: 12px; border: 1px solid #253244; background: #0b1220; color: #cbd5e1; }
    .sev-high { border-color:#7f1d1d; background:#1a0b0b; color:#fecaca; }
    .sev-medium { border-color:#7c2d12; background:#1a0f0a; color:#fed7aa; }
    .sev-low { border-color:#1e3a8a; background:#0b1020; color:#bfdbfe; }
    .sev-info { border-color:#1f2a37; background:#0f1720; color:#cbd5e1; }
    table { width: 100%; border-collapse: collapse; margin: 12px 0 22px; }
    th, td { text-align: left; padding: 10px; border-bottom: 1px solid #1f2a37; vertical-align: top; }
    th { color: #9aa4b2; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
    .section-title { margin: 26px 0 10px; font-size: 16px; }
    .path { margin-top: 18px; }
    details { border: 1px solid #1f2a37; border-radius: 12px; padding: 10px 12px; background: #0f1720; }
    summary { cursor: pointer; font-weight: 600; }
    pre { white-space: pre-wrap; word-break: break-word; background: #0b0f14; border: 1px solid #1f2a37; border-radius: 12px; padding: 10px; overflow: auto; }
    a { color: #93c5fd; text-decoration: none; }
    a:hover { text-decoration: underline; }
    @media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 520px) { .grid { grid-template-columns: 1fr; } }
  </style>
</head>
<body>
  <header>
    <h1>APIScan Report</h1>
    <div class="muted">Target: <strong>{{ target }}</strong></div>
    <div class="muted">Paths scanned: {{ paths_scanned | join(", ") }}</div>
  </header>

  <main>
    <div class="grid">
      <div class="card"><div class="k">High</div><div class="v">{{ summary.high }}</div></div>
      <div class="card"><div class="k">Medium</div><div class="v">{{ summary.medium }}</div></div>
      <div class="card"><div class="k">Low</div><div class="v">{{ summary.low }}</div></div>
      <div class="card"><div class="k">Risk score</div><div class="v">{{ summary.risk_score }}</div></div>
    </div>

    <h2 class="section-title">Global Findings</h2>
    {% if global_findings | length == 0 %}
      <div class="muted">No global findings.</div>
    {% else %}
      <table>
        <thead>
          <tr>
            <th>Severity</th>
            <th>Issue</th>
            <th>Description</th>
            <th>Evidence</th>
          </tr>
        </thead>
        <tbody>
          {% for f in global_findings %}
          <tr>
            <td>
              <span class="badge sev-{{ f.severity }}">{{ f.severity }}</span>
            </td>
            <td>{{ f.name }}</td>
            <td>{{ f.description }}</td>
            <td><details><summary>View</summary><pre>{{ f.evidence | tojson(indent=2) }}</pre></details></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    {% endif %}

    <h2 class="section-title">Per-Path Findings</h2>

    {% for pr in path_results %}
      <div class="path">
        <h3>{{ pr.path }} <span class="muted">(status: {{ pr.status_code }})</span></h3>

        {% if pr.findings | length == 0 %}
          <div class="muted">No issues found on this path.</div>
        {% else %}
          <table>
            <thead>
              <tr>
                <th>Severity</th>
                <th>Issue</th>
                <th>Description</th>
                <th>Evidence</th>
              </tr>
            </thead>
            <tbody>
              {% for f in pr.findings %}
              <tr>
                <td><span class="badge sev-{{ f.severity }}">{{ f.severity }}</span></td>
                <td>{{ f.name }}</td>
                <td>{{ f.description }}</td>
                <td><details><summary>View</summary><pre>{{ f.evidence | tojson(indent=2) }}</pre></details></td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        {% endif %}
      </div>
    {% endfor %}

    <div class="muted" style="margin-top:28px;">
      Generated by APIScan.
    </div>
  </main>
</body>
</html>
