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

{% block title %}Deployment 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>Deployment Trust</h1>
            <div class="ops-subtitle">Maintenance notices, deploy status, rollback confidence, and user-safe update communication.</div>
        </div>
        <div class="ops-actions"><a class="ops-button secondary" href="/reliability">Reliability</a></div>
    </header>

    <section class="ops-panel">
        <h2>Create Maintenance Notice</h2>
        <form class="ops-form-grid" method="post" action="/deployment-trust/notices">
            <label>Title <input name="title" placeholder="Tonight's maintenance window"></label>
            <label>Type
                <select name="message_type">
                    <option value="maintenance">Maintenance</option>
                    <option value="update">Update</option>
                    <option value="rollback">Rollback</option>
                </select>
            </label>
            <label>Status
                <select name="status">
                    <option value="scheduled">Scheduled</option>
                    <option value="active">Active</option>
                    <option value="completed">Completed</option>
                </select>
            </label>
            <label>Scope
                <select name="scope">
                    <option value="global">All shops</option>
                    <option value="shop">This shop</option>
                </select>
            </label>
            <label>Message <input name="message" placeholder="Expected impact and safe operating advice"></label>
            <button type="submit">Publish Notice</button>
        </form>
    </section>

    <section class="ops-grid">
        <div class="ops-panel ops-metric">
            <span class="ops-muted">Rollback Confidence</span>
            <strong>{{ snapshot.rollback_confidence|title }}</strong>
        </div>
        <div class="ops-panel ops-metric">
            <span class="ops-muted">User-Safe Deployments</span>
            <strong>{{ 'On' if snapshot.user_safe_deployments else 'Check' }}</strong>
        </div>
    </section>

    <section class="ops-panel">
        <h2>Notices</h2>
        <div class="ops-list">
            {% for notice in snapshot.notices %}
            <div class="ops-list-item">
                <span class="ops-badge info">{{ notice.status|title }}</span>
                <strong>{{ notice.title }}</strong>
                <p>{{ notice.message }}</p>
            </div>
            {% else %}
            <div class="ops-list-item">No deployment notices yet.</div>
            {% endfor %}
        </div>
    </section>

    <section class="ops-panel">
        <h2>Recent Deployment Events</h2>
        <div class="ops-table-wrap">
            <table class="ops-table">
                <thead><tr><th>Environment</th><th>Version</th><th>Event</th><th>Status</th><th>Created</th></tr></thead>
                <tbody>
                {% for event in snapshot.deployment_events %}
                <tr><td>{{ event.environment }}</td><td>{{ event.release_version }}</td><td>{{ event.event_type }}</td><td>{{ event.status }}</td><td>{{ event.created_at }}</td></tr>
                {% else %}
                <tr><td colspan="5">No deployment events recorded.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</main>
{% endblock %}