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

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

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Operational Anomalies</h1>
        <p class="page-subtitle">Internal-only anomaly records persisted locally in Atlas.</p>
    </div>
</div>

<div class="flex gap-lg">
    <div class="card" style="flex: 1;">
        <div class="card-header">
            <h2 class="card-title">Recent Anomalies</h2>
        </div>
        {% if anomalies %}
        <div class="flex flex-col gap-sm">
            {% for anomaly in anomalies %}
            <a href="/admin/anomalies/{{ anomaly.id }}" class="btn btn-secondary">
                {{ anomaly.severity|upper }} · {{ anomaly.category }} · {{ anomaly.summary }}
            </a>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <p class="text-muted">No anomaly records</p>
        </div>
        {% endif %}
    </div>

    <div class="card" style="flex: 2;">
        <div class="card-header">
            <h2 class="card-title">Selected Record</h2>
        </div>
        {% if anomaly %}
        <div class="grid grid-2 mb-md">
            <div><span class="text-sm text-muted">ID</span><div class="text-mono text-sm">{{ anomaly.id }}</div></div>
            <div><span class="text-sm text-muted">Fingerprint</span><div class="text-mono text-sm">{{ anomaly.fingerprint }}</div></div>
            <div><span class="text-sm text-muted">Service</span><div>{{ anomaly.service }}</div></div>
            <div><span class="text-sm text-muted">Environment</span><div>{{ anomaly.environment }}</div></div>
            <div><span class="text-sm text-muted">Severity</span><div>{{ anomaly.severity }}</div></div>
            <div><span class="text-sm text-muted">Occurrences</span><div>{{ anomaly.occurrence_count }}</div></div>
            <div><span class="text-sm text-muted">First Seen</span><div class="text-mono text-sm">{{ anomaly.first_seen_at }}</div></div>
            <div><span class="text-sm text-muted">Last Seen</span><div class="text-mono text-sm">{{ anomaly.last_seen_at }}</div></div>
        </div>
        <p><strong>{{ anomaly.summary }}</strong></p>
        <pre class="text-mono text-sm">{{ anomaly.redacted_context | tojson(indent=2) }}</pre>
        {% else %}
        <div class="empty-state">
            <p class="text-muted">Select an anomaly to inspect its redacted context.</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}