{% extends "base.html" %}
{% set active_nav = "admin" %}

{% block title %}Observability - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Observability</h1>
        <p class="page-subtitle">Atlas-local health, API, endpoint, database, and auth rollups</p>
    </div>
</div>

<div class="card mb-lg">
    <div class="card-header">
        <h2 class="card-title">Contract Surfaces</h2>
    </div>
    <div class="flex gap-sm flex-wrap">
        <a href="/health" class="btn btn-secondary">/health</a>
        <a href="/obs_services" class="btn btn-secondary">/obs_services</a>
        <a href="/api_health" class="btn btn-secondary">/api_health</a>
        <a href="/endpoint_health" class="btn btn-secondary">/endpoint_health</a>
        <a href="/db_health" class="btn btn-secondary">/db_health</a>
        <a href="/my_health" class="btn btn-secondary">/my_health</a>
        <a href="/auth_health" class="btn btn-secondary">/auth_health</a>
    </div>
</div>

<div class="grid grid-2 mb-lg">
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Service Health</h2>
        </div>
        <div class="text-sm text-muted mb-sm">Status: {{ health_payload.status }}</div>
        <pre class="text-mono text-sm">{{ health_payload | tojson(indent=2) }}</pre>
    </div>
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Advertised Capabilities</h2>
        </div>
        <pre class="text-mono text-sm">{{ obs_services_payload | tojson(indent=2) }}</pre>
    </div>
</div>

<div class="grid grid-2 mb-lg">
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">API Families</h2>
        </div>
        {% if api_health_payload.families %}
        <div class="table-container">
            <table class="table">
                <thead>
                    <tr>
                        <th>Family</th>
                        <th>Requests</th>
                        <th>Errors</th>
                        <th>P95 ms</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in api_health_payload.families %}
                    <tr>
                        <td class="text-mono text-sm">{{ item.family }}</td>
                        <td>{{ item.request_count }}</td>
                        <td>{{ item.error_count }}</td>
                        <td>{{ item.p95_ms }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-muted">No API traffic captured yet.</p>
        {% endif %}
    </div>
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Endpoint Rollups</h2>
        </div>
        {% if endpoint_health_payload["items"] %}
        <div class="table-container">
            <table class="table">
                <thead>
                    <tr>
                        <th>Method</th>
                        <th>Route</th>
                        <th>Requests</th>
                        <th>P95 ms</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in endpoint_health_payload["items"] %}
                    <tr>
                        <td class="text-mono text-sm">{{ item.method }}</td>
                        <td class="text-mono text-sm">{{ item.route_template }}</td>
                        <td>{{ item.request_count }}</td>
                        <td>{{ item.p95_ms }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-muted">No endpoint traffic captured yet.</p>
        {% endif %}
    </div>
</div>

<div class="grid grid-2">
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Database Rollups</h2>
        </div>
        <pre class="text-mono text-sm">{{ db_health_payload | tojson(indent=2) }}</pre>
    </div>
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Auth Rollups</h2>
        </div>
        <pre class="text-mono text-sm">{{ auth_health_payload | tojson(indent=2) }}</pre>
    </div>
</div>
{% endblock %}