{% extends "base.html" %}
{% set active_page = "security" %}

{% block title %}FaultRay - Security Analysis{% endblock %}
{% block page_title %}Security Analysis{% endblock %}
{% block page_subtitle %}<span class="page-subtitle">Attack resilience and defense coverage</span>{% endblock %}

{% block top_actions %}
<button class="btn btn-sm btn-accent" id="runSecBtn"
        hx-post="/api/security-analysis" hx-target="#security-results" hx-swap="innerHTML"
        hx-indicator="#sec-spinner">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
    </svg>
    Run Security Analysis
</button>
<span id="sec-spinner" class="htmx-indicator"><span class="spinner"></span></span>
{% endblock %}

{% block content %}
<div class="dashboard-grid">
    <!-- Security Resilience Score -->
    <div class="card">
        <div class="card-header">
            <h3>Security Resilience</h3>
        </div>
        <div class="card-body score-display">
            {% set sec_score = security_score if security_score is defined else 68 %}
            {% if sec_score >= 80 %}
                {% set sc_class = "score-good" %}
                {% set sc_label = "Strong" %}
            {% elif sec_score >= 60 %}
                {% set sc_class = "score-warning" %}
                {% set sc_label = "Moderate" %}
            {% else %}
                {% set sc_class = "score-critical" %}
                {% set sc_label = "Weak" %}
            {% endif %}
            <div class="score-circle {{ sc_class }}">
                <svg viewBox="0 0 120 120" class="score-ring">
                    <circle cx="60" cy="60" r="54" fill="none" stroke="#2d3748" stroke-width="8"/>
                    <circle cx="60" cy="60" r="54" fill="none"
                            stroke-width="8"
                            stroke-dasharray="339.292"
                            stroke-dashoffset="{{ 339.292 - (339.292 * sec_score / 100) }}"
                            stroke-linecap="round"
                            class="score-ring-progress"/>
                </svg>
                <div class="score-value">{{ sec_score }}</div>
                <div class="score-label">{{ sc_label }}</div>
            </div>
        </div>
    </div>

    <!-- Defense Coverage -->
    <div class="card">
        <div class="card-header">
            <h3>Defense Coverage</h3>
        </div>
        <div class="card-body">
            {% set defenses = [
                {"name": "Network Security", "pct": 85},
                {"name": "Authentication", "pct": 72},
                {"name": "Data Encryption", "pct": 90},
                {"name": "Access Control", "pct": 65},
                {"name": "Monitoring", "pct": 78},
                {"name": "Incident Response", "pct": 55}
            ] %}
            <div class="defense-bars">
                {% for d in defenses %}
                <div class="defense-bar-item">
                    <div class="defense-bar-label">
                        <span>{{ d.name }}</span>
                        <span class="mono">{{ d.pct }}%</span>
                    </div>
                    <div class="utilization-bar-container" style="height: 10px;">
                        {% if d.pct >= 80 %}
                            {% set bar_color = "var(--green)" %}
                        {% elif d.pct >= 60 %}
                            {% set bar_color = "var(--yellow)" %}
                        {% else %}
                            {% set bar_color = "var(--red)" %}
                        {% endif %}
                        <div class="utilization-bar" style="width: {{ d.pct }}%; background: {{ bar_color }};"></div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Attack Resilience Matrix -->
    <div class="card card-wide" id="security-results">
        <div class="card-header">
            <h3>Attack Resilience Matrix</h3>
        </div>
        <div class="card-body no-padding">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Attack Type</th>
                        <th>Resilience</th>
                        <th>Defense Mechanisms</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% set attacks = [
                        {"type": "DDoS", "score": 82, "defenses": "Rate limiting, CDN, Auto-scaling", "status": "protected"},
                        {"type": "SQL Injection", "score": 91, "defenses": "Parameterized queries, WAF, Input validation", "status": "protected"},
                        {"type": "Ransomware", "score": 45, "defenses": "Backups, Network segmentation", "status": "vulnerable"},
                        {"type": "Man-in-the-Middle", "score": 88, "defenses": "TLS 1.3, Certificate pinning, HSTS", "status": "protected"},
                        {"type": "Credential Stuffing", "score": 62, "defenses": "MFA, Rate limiting", "status": "partial"},
                        {"type": "Supply Chain", "score": 38, "defenses": "Dependency scanning", "status": "vulnerable"},
                        {"type": "Data Exfiltration", "score": 71, "defenses": "DLP, Network monitoring, Encryption at rest", "status": "partial"},
                        {"type": "Privilege Escalation", "score": 76, "defenses": "RBAC, Least privilege, Audit logs", "status": "partial"},
                        {"type": "Cross-Site Scripting", "score": 94, "defenses": "CSP, Output encoding, WAF", "status": "protected"},
                        {"type": "API Abuse", "score": 58, "defenses": "Rate limiting, API gateway", "status": "partial"}
                    ] %}
                    {% for atk in attacks %}
                    <tr>
                        <td><span class="comp-name">{{ atk.type }}</span></td>
                        <td>
                            {% if atk.score >= 80 %}
                            <span class="badge badge-passed">{{ atk.score }}%</span>
                            {% elif atk.score >= 60 %}
                            <span class="badge badge-warning">{{ atk.score }}%</span>
                            {% else %}
                            <span class="badge badge-critical">{{ atk.score }}%</span>
                            {% endif %}
                        </td>
                        <td><span class="text-muted">{{ atk.defenses }}</span></td>
                        <td>
                            {% if atk.status == "protected" %}
                            <span class="health-badge health-healthy">Protected</span>
                            {% elif atk.status == "partial" %}
                            <span class="health-badge health-degraded">Partial</span>
                            {% else %}
                            <span class="health-badge health-down">Vulnerable</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}