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

{% block title %}{{ title }} - Gvelo Enterprise Platform{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/deployment_probe.css">
{% endblock %}
{% block content %}
<main class="shell">
    <header class="header">
        <div>
            <div class="kicker">Gvelo Deployment Probe</div>
            <h1>{{ title }}</h1>
            <p class="muted">{{ subtitle }}</p>
        </div>
        <nav class="actions" aria-label="Deployment probe actions">
            <a class="button primary" href="/admin">Admin Dashboard</a>
            <a class="button" href="/admin/system-operations">System Operations</a>
            <a class="button" href="{{ raw_url }}" target="_blank" rel="noopener">Raw JSON</a>
        </nav>
    </header>

    <section class="grid" aria-label="Status summary">
        <article class="panel metric">
            <span class="muted">Status</span>
            <strong>{{ (report.status or summary.status or 'unknown')|replace('_', ' ')|title }}</strong>
            <span class="badge {{ report.status or summary.status or 'unknown' }}">{{ 'Operational' if (summary.ok or report.ok) else 'Review Needed' }}</span>
        </article>
        <article class="panel metric">
            <span class="muted">Score</span>
            <strong>{{ report.score if report.score is not none else summary.score }}</strong>
            <span class="muted">Target: 85+</span>
        </article>
        <article class="panel metric">
            <span class="muted">Version</span>
            <strong>{{ summary.version or report.version or 'n/a' }}</strong>
            <span class="muted">Startup: {{ summary.startup or report.startup.status or 'unknown' }}</span>
        </article>
        <article class="panel metric">
            <span class="muted">Checked</span>
            <strong>{{ report.checked_at or 'Live' }}</strong>
            <span class="muted">JSON remains available for probes.</span>
        </article>
    </section>

    <section class="panel">
        <h2>Readiness Checks</h2>
        <p class="muted">Each component is shown in a human-readable card; use Raw JSON for deploy scripts, uptime monitors, and automation.</p>
        <div class="checks">
            {% for name, check in (report.checks or {}).items() %}
            {% set ok = check.get('ok') if check is mapping else false %}
            {% set check_status = check.get('status') if check is mapping else none %}
            <article class="check">
                <span class="badge {{ check_status or ('healthy' if ok else 'failed') }}">{{ 'OK' if ok else 'Review' }}</span>
                <h3>{{ name|replace('_', ' ')|title }}</h3>
                {% if check_status %}<p class="muted">Status: {{ check_status|replace('_', ' ')|title }}</p>{% endif %}
                <details>
                    <summary>Details</summary>
                    <pre>{{ check|tojson(indent=2) }}</pre>
                </details>
            </article>
            {% else %}
            <article class="check">
                <span class="badge {{ summary.status or 'healthy' }}">{{ summary.status|default('healthy')|replace('_', ' ')|title }}</span>
                <h3>Health Summary</h3>
                <details open>
                    <summary>Details</summary>
                    <pre>{{ summary|tojson(indent=2) }}</pre>
                </details>
            </article>
            {% endfor %}
        </div>
    </section>
</main>
{% endblock %}