<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basilisk Scan Report — {{ session_id }}</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0a0a0a; color: #e5e5e5; }
        .container { max-width: 1100px; margin: 0 auto; padding: 2rem; }
        .header { text-align: center; padding: 2.5rem 0; border-bottom: 2px solid #dc2626; margin-bottom: 2rem; }
        .header h1 { font-size: 2.5rem; color: #dc2626; }
        .header .subtitle { color: #a3a3a3; margin-top: 0.5rem; }
        code { background: #1a1a1a; padding: 2px 6px; border-radius: 3px; font-size: 0.85em; }
        .stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 1.5rem 0; }
        .stat { background: #171717; border-radius: 8px; padding: 1.2rem; text-align: center; border: 1px solid #262626; }
        .stat-value { font-size: 2.2rem; font-weight: 700; }
        .stat-label { color: #a3a3a3; font-size: 0.8rem; text-transform: uppercase; }
        h2 { margin: 2rem 0 1rem; font-size: 1.5rem; }
        .finding { background: #171717; border-radius: 8px; padding: 1.5rem; margin: 1rem 0; border: 1px solid #262626; }
        .sev-badge { color: white; padding: 3px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; }
        details { margin: 0.5rem 0; }
        summary { cursor: pointer; color: #60a5fa; }
        pre { background: #0a0a0a; padding: 1rem; border-radius: 6px; overflow-x: auto; margin: 0.5rem 0; font-size: 0.82rem; border: 1px solid #262626; }
        .remediation { color: #4ade80; margin-top: 0.8rem; }
        footer { text-align: center; margin-top: 3rem; padding: 2rem 0; border-top: 1px solid #262626; color: #737373; }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🐍 Basilisk Scan Report</h1>
            <p class="subtitle">Session: <code>{{ session_id }}</code> | Target: <code>{{ target }}</code> | {{ date }}</p>
        </header>

        <div class="stats">
            {% for sev_name, sev_count, sev_color in severity_data %}
            <div class="stat">
                <div class="stat-value" style="color: {{ sev_color }};">{{ sev_count }}</div>
                <div class="stat-label">{{ sev_name }}</div>
            </div>
            {% endfor %}
        </div>

        <h2>Findings ({{ findings|length }})</h2>
        {% for f in findings %}
        <div class="finding" style="border-left: 4px solid {{ f.color }};">
            <div style="display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem;">
                <span class="sev-badge" style="background:{{ f.color }};">{{ f.severity }}</span>
                <span style="color:#737373;font-size:.8rem;">{{ f.id }}</span>
                <span style="color:#22d3ee;font-size:.8rem;">{{ f.owasp }}</span>
            </div>
            <h3>{{ f.title }}</h3>
            <details><summary>Payload</summary><pre><code>{{ f.payload }}</code></pre></details>
            <details><summary>Response</summary><pre><code>{{ f.response }}</code></pre></details>
            <p class="remediation"><strong>Remediation:</strong> {{ f.remediation }}</p>
        </div>
        {% endfor %}

        <footer>
            <p>Generated by <strong>Basilisk</strong> v0.1.0 — AI Red Teaming Framework | <a href="https://rothackers.com" style="color:#dc2626;">Rot Hackers</a></p>
        </footer>
    </div>
</body>
</html>
