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

{% block title %}Operational Trust - 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>Operational Trust</h1>
            <div class="ops-subtitle">Confidence scoring for receipts, inventory, backups, checkout continuity, and transaction integrity.</div>
        </div>
        <div class="ops-actions">
            <button onclick="runTrust()">Run Checks</button>
            <a class="ops-button secondary" href="/support">Support</a>
        </div>
    </header>

    <section class="ops-grid">
        <div class="ops-panel ops-metric">
            <span class="ops-muted">Confidence</span>
            <strong>{{ snapshot.confidence_score }}%</strong>
            <span class="ops-badge {{ 'danger' if snapshot.status == 'action_needed' else 'warn' if snapshot.status == 'watch' else '' }}">{{ snapshot.status|replace('_', ' ')|title }}</span>
        </div>
        <div class="ops-panel ops-metric">
            <span class="ops-muted">Open Warnings</span>
            <strong>{{ snapshot.warnings|length }}</strong>
            <span>Automatic warning system</span>
        </div>
    </section>

    <section class="ops-panel">
        <h2>Latest Checks</h2>
        <div class="ops-list">
            {% for check in snapshot.checks %}
            <div class="ops-list-item">
                <span class="ops-badge {{ '' if check.status == 'pass' else 'warn' }}">{{ check.status|title }}</span>
                <strong>{{ check.check_type|replace('_', ' ')|title }} - {{ check.score|round|int }}%</strong>
                <p>{{ check.message }}</p>
            </div>
            {% else %}
            <div class="ops-list-item">Run checks to generate trust indicators.</div>
            {% endfor %}
        </div>
    </section>

    <section class="ops-panel">
        <h2>Warnings</h2>
        <div class="ops-list">
            {% for warning in snapshot.warnings %}
            <div class="ops-list-item">
                <span class="ops-badge {{ 'danger' if warning.severity == 'critical' else 'warn' }}">{{ warning.severity|title }}</span>
                <strong>{{ warning.warning_type|replace('_', ' ')|title }}</strong>
                <p>{{ warning.message }}</p>
            </div>
            {% else %}
            <div class="ops-list-item">No open warnings.</div>
            {% endfor %}
        </div>
    </section>
</main>
<script>
async function runTrust() {
  await fetch("/api/trust/run", {method: "POST"});
  location.reload();
}
</script>
{% endblock %}