{% extends "base.html" %}

{% block content %}

<div class="title">
    OpsGuard Dashboard
</div>

<div class="subtitle">
    Runtime Monitoring & AI Remediation
</div>

<br />

<div class="grid">
    <div class="card">
        Running
        <div class="metric">
            {{ status }}
        </div>
    </div>

    <div class="card">
        Containers
        <div class="metric">
            {{ containers }}
        </div>
    </div>

    <div class="card">
        Incidents
        <div class="metric">
            {{ incidents }}
        </div>
    </div>

    <div class="card">
        Pending
        <div class="metric">
            {{ pending }}
        </div>
    </div>
</div>

<div class="card">
    <h2>Recent Incidents</h2>

    <table>
        <tr>
            <th>ID</th>
            <th>Container</th>
            <th>Status</th>
            <th></th>
        </tr>

        {% for incident in recent %}
        <tr>
            <td>{{ incident.incident_id }}</td>
            <td>{{ incident.container_name }}</td>
            <td>{{ incident.status }}</td>
            <td>
                <a href="/incident/{{ incident.incident_id }}">
                    Open
                </a>
            </td>
        </tr>
        {% endfor %}
    </table>
</div>

{% endblock %}