{% extends "base.html" %}

{% block title %}SRE Multi-Agent Dashboard{% endblock %}

{% block head %}
<meta name="description" content="A multi-agent Site Reliability Engineering (SRE) demo application.">
{% endblock %}

{% block content %}
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
    <div class="container">
        <a class="navbar-brand" href="#">SRE Demo</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Incidents</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">KEDB</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Simulations</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<header class="hero text-center">
    <div class="container">
        <h1>Autonomous Reliability Management</h1>
        <p class="lead">A multi-agent SRE system for monitoring, analysis, and remediation.</p>
    </div>
</header>

<main class="container">
    <div class="row">
        <div class="col-lg-8">
            <div class="incident-timeline mb-4">
                <div class="header">
                    <h3 class="h5">Incident Timeline</h3>
                </div>
                <div class="incident-item">
                    <div class="icon text-danger">⚠️</div>
                    <div class="content">
                        <strong>High Latency Detected</strong>
                        <p class="mb-0">API gateway latency is over 500ms. Monitoring Agent has triggered an alert.</p>
                        <div class="meta">2 minutes ago</div>
                    </div>
                </div>
                <div class="incident-item">
                    <div class="icon text-warning">🎫</div>
                    <div class="content">
                        <strong>Ticket [SRE-123] Created</strong>
                        <p class="mb-0">Ticket Analysis Agent is analyzing the incident and querying the KEDB.</p>
                        <div class="meta">1 minute ago</div>
                    </div>
                </div>
                <div class="incident-item">
                    <div class="icon text-success">✅</div>
                    <div class="content">
                        <strong>Remediation Applied</strong>
                        <p class="mb-0">Remediation Agent scaled up the API gateway pods. System is recovering.</p>
                        <div class="meta">30 seconds ago</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="metric-card">
                <h4>Latency (p95)</h4>
                <div class="value">520ms</div>
            </div>
            <div class="metric-card">
                <h4>Error Rate</h4>
                <div class="value">3.1%</div>
            </div>
            <div class="metric-card">
                <h4>Traffic</h4>
                <div class="value">1.2k rps</div>
            </div>
            <div class="metric-card">
                <h4>Saturation</h4>
                <div class="value">85%</div>
            </div>
        </div>
    </div>
</main>

<footer class="py-4 mt-4 text-center text-muted">
    <p>&copy; 2025 SRE Demo. All Rights Reserved.</p>
</footer>
{% endblock %}
