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

{% block title %}Reliability - 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>Business Reliability</h1>
            <div class="ops-subtitle">Operational continuity, offline fallback, graceful degradation, reconnect recovery, and retry protections.</div>
        </div>
        <div class="ops-actions"><a class="ops-button secondary" href="/operations-mode">Operations</a></div>
    </header>

    <section class="ops-grid">
        {% for item in snapshot.protections %}
        <div class="ops-panel">
            <span class="ops-badge {{ '' if item.ready else 'warn' }}">{{ 'Ready' if item.ready else 'Check' }}</span>
            <h3>{{ item.name }}</h3>
            <p>{{ item.detail }}</p>
        </div>
        {% endfor %}
    </section>

    <section class="ops-panel">
        <h2>Deployment Trust</h2>
        <p>Rollback confidence: <strong>{{ deployment.rollback_confidence|title }}</strong></p>
        <div class="ops-actions">
            <a class="ops-button secondary" href="/deployment-trust">Deployment Notices</a>
            <a class="ops-button secondary" href="/cloud">Cloud Updates</a>
        </div>
    </section>
</main>
{% endblock %}