{% extends 'base.html' %}
{% load static %}

{% block title %}{{ project_name }}{% endblock %}

{% block content %}
<div class="container-fluid my-4">
    <header class="d-flex justify-content-between align-items-center mb-4">
        <h1>SIEM Dashboard</h1>
        <div class="d-flex align-items-center">
            <h5 class="me-3 mb-0">Overall Security Score</h5>
            <div class="security-score">{{ security_score }}</div>
        </div>
    </header>

    <div class="row">
        <div class="col-lg-8">
            <div class="card mb-4">
                <div class="card-body">
                    <h4 class="card-title">Active Alerts</h4>
                    <div class="list-group list-group-flush">
                        {% for alert in alerts %}
                            <div class="list-group-item bg-transparent alert-card alert-{{ alert.severity }} mb-2">
                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1 text-light">{{ alert.title }}</h5>
                                    <small class="text-secondary">{{ alert.timestamp }}</small>
                                </div>
                                <p class="mb-1 text-secondary">Source: {{ alert.source }}</p>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Live Event Stream</h4>
                    <div class="log-stream">
                        <p class="log-line text-secondary">[2025-12-15 10:30:05] user admin failed to login from 192.168.1.10</p>
                        <p class="log-line text-secondary">[2025-12-15 10:30:04] user admin failed to login from 192.168.1.10</p>
                        <p class="log-line text-secondary">[2025-12-15 10:30:02] user admin failed to login from 192.168.1.10</p>
                        <p class="log-line text-secondary">[2025-12-15 10:25:10] GET /api/users?id=1%27%20OR%201=1 -- 200</p>
                        <p class="log-line text-secondary">[2025-12-15 10:15:30] process /usr/bin/unusual_proc started by user root</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Top Alert Sources</h4>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center text-light">
                            suricata.log
                            <span class="badge bg-primary rounded-pill">2</span>
                        </li>
                        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center text-light">
                            auth.log
                            <span class="badge bg-primary rounded-pill">1</span>
                        </li>
                        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center text-light">
                            syslog
                            <span class="badge bg-primary rounded-pill">1</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
