{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}{{ title }} - Gvelo Enterprise Platform{% endblock %}
{% block body_class %}operational-page ops-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/operational-experience.css">
<link rel="stylesheet" href="/static/hil-pages/governance_snapshot.css">
{% endblock %}
{% block content %}
<main class="ops-shell">
    <header class="ops-header">
        <div>
            <h1>{{ title }}</h1>
            <div class="ops-subtitle">{{ subtitle }}</div>
            <div class="snapshot-meta">
                <span>{{ score_label }}: {{ score if score is not none else 'n/a' }}</span>
                <span>Status: {{ (status or 'unknown')|replace('_', ' ')|title }}</span>
                {% if generated_at %}<span>Generated: {{ generated_at }}</span>{% endif %}
            </div>
            <div class="snapshot-actions">
                <a href="/admin">Admin Dashboard</a>
                {% for action in actions or [] %}
                <a href="{{ action['href'] }}">{{ action['label'] }}</a>
                {% endfor %}
                {% if api_url %}<span class="snapshot-api-note">Automation endpoint available internally at {{ api_url }}.</span>{% endif %}
            </div>
        </div>
    </header>

    <section class="ops-panel ops-metric">
        <span class="ops-muted">{{ score_label }}</span>
        <strong>{{ score if score is not none else 'n/a' }}</strong>
    </section>

    <section class="ops-grid">
        {% for section in sections %}
        <article class="ops-panel">
            <div class="snapshot-section-title">
                <div>
                    <h2>{{ section['title'] }}</h2>
                    {% if section.get('description') %}<p class="ops-muted">{{ section['description'] }}</p>{% endif %}
                </div>
            </div>
            {% if section.get('items') %}
                <div class="snapshot-list">
                {% for item in section['items'] %}
                    <div class="snapshot-card">
                        {% set item_status = item.get('status') or 'ok' %}
                        <span class="ops-badge {{ 'warn' if item_status not in ['ok', 'trusted', 'strong', 'audit_ready'] else '' }}">
                            {{ item_status|replace('_', ' ')|title }}
                        </span>
                        <h3>{{ item['title'] }}</h3>
                        {% if item.get('count') is not none %}<strong>{{ item['count'] }}</strong>{% endif %}
                        {% if item.get('message') %}<p>{{ item['message'] }}</p>{% endif %}
                        {% if item.get('details') is not none %}
                        <details>
                            <summary>Details</summary>
                            <pre>{{ item['details']|tojson(indent=2) }}</pre>
                        </details>
                        {% endif %}
                    </div>
                {% endfor %}
                </div>
            {% else %}
                <div class="snapshot-empty">{{ section.get('empty') or 'No open findings.' }}</div>
            {% endif %}
        </article>
        {% endfor %}
    </section>
</main>
{% endblock %}