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

{% block title %}Trust Engine - Gvelo Enterprise Platform{% endblock %}
{% block body_class %}operational-page ops-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/operational-experience.css">
{% endblock %}
{% block content %}
<main class="ops-shell">
    <header class="ops-header">
        <div>
            <h1>Trust Engine</h1>
            <div class="ops-subtitle">
                Backup, deployment, uptime, sync, offline reliability, and operational health indicators.
            </div>
        </div>
    </header>

    <section class="ops-panel ops-metric">
        <span class="ops-muted">System Trust</span>
        <strong>{{ snapshot.trust_score }}%</strong>
    </section>

    <section class="ops-grid">
        {% for item in snapshot.indicators %}
            <div class="ops-panel">
                <span class="ops-badge {{ 'warn' if item.status != 'trusted' else '' }}">
                    {{ item.status|replace('_',' ')|title }}
                </span>
                <h2>{{ item.indicator_key|replace('_',' ')|title }}</h2>
                <p>{{ item.message }}</p>
                <strong>{{ item.score }}%</strong>
            </div>
        {% else %}
            <div class="ops-panel">No trust indicators yet.</div>
        {% endfor %}
    </section>
</main>
{% endblock %}