{{--
    "We are updating" — one panel, used in both places it can appear.

    It showed up twice with two different faces: the console's own overlay in the
    app's light tokens while the application was still up, and then this, the
    503 page, once the containers went down. Two designs for one event, one
    replacing the other mid-update. Reported as "the first screen must not be
    there", and rightly.

    The styles are inline and self-contained rather than Tailwind classes,
    because the other place this renders is the 503 page — shown while the
    application is mid-deploy or freshly installed, exactly when the Vite
    manifest may not exist. A stylesheet reference there would throw instead of
    rendering the reassurance the visitor came for.

    Prefixed class names: this is injected into the console's own document,
    which has a stylesheet of its own, and `.badge` is not a name to claim
    globally.
--}}
<style>
    .cpu-wrap { --cpu-bg: #f6f7f9; --cpu-fg: #0f172a; --cpu-muted: #64748b; --cpu-accent: #f97316; --cpu-card: #ffffff; --cpu-line: #e2e8f0;
                display: grid; place-items: center; text-align: center; padding: 4rem 1.5rem; min-height: 100%;
                background: var(--cpu-bg); color: var(--cpu-fg);
                font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
    @media (prefers-color-scheme: dark) {
        .cpu-wrap { --cpu-bg: #0b0f19; --cpu-fg: #e2e8f0; --cpu-muted: #94a3b8; --cpu-card: #111827; --cpu-line: #1f2937; }
    }
    .cpu-main { max-width: 34rem; width: 100%; }
    .cpu-mark { width: 2.5rem; height: 2.5rem; margin: 0 auto; border-radius: 0.75rem; background: var(--cpu-accent); }
    .cpu-badge { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; padding: 0.25rem 0.75rem;
                 border: 1px solid var(--cpu-line); border-radius: 9999px; background: var(--cpu-card);
                 font-size: 0.72rem; font-weight: 600; color: var(--cpu-accent); }
    .cpu-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--cpu-accent); animation: cpu-pulse 1.6s ease-in-out infinite; }
    @keyframes cpu-pulse { 50% { opacity: 0.35; } }
    @media (prefers-reduced-motion: reduce) { .cpu-dot { animation: none; } }
    .cpu-title { margin: 1.75rem 0 0; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; }
    .cpu-body { margin: 0.75rem 0 0; font-size: 0.9rem; line-height: 1.65; color: var(--cpu-muted); }
    .cpu-foot { margin-top: 2rem; font-size: 0.75rem; color: var(--cpu-muted); }
    .cpu-detail { margin-top: 1.5rem; text-align: left; }
    .cpu-step { margin: 0; padding: 0.7rem 0.9rem; border: 1px solid var(--cpu-line); border-radius: 0.5rem;
                background: var(--cpu-card); font-size: 0.85rem; font-weight: 500; }
    .cpu-since { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--cpu-muted); }
    .cpu-log { margin: 0.5rem 0 0; max-height: 10rem; overflow: auto; padding: 0.7rem 0.9rem;
               border: 1px solid var(--cpu-line); border-radius: 0.5rem; background: var(--cpu-card);
               font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; line-height: 1.6; }
</style>

<div class="cpu-wrap">
    <main class="cpu-main">
        <div class="cpu-mark"></div>
        <div class="cpu-badge"><span class="cpu-dot"></span>{{ __('updating.badge') }}</div>
        <h1 class="cpu-title">{{ __('updating.title') }}</h1>
        <p class="cpu-body">{{ $body ?? __('updating.body') }}</p>

        {{-- Only in the console. A customer looking at the 503 has no use for a
             deployment step, and an operator watching a run that is stuck has
             no use for anything else: "läuft gerade" alone is what sends
             somebody to the shell. The markup is Alpine-driven and inert
             wherever Alpine is not — which is why it is behind a flag rather
             than always present. --}}
        @if ($detail ?? false)
            <div class="cpu-detail">
                <p class="cpu-step" x-show="!step">{{ $starting ?? '' }}</p>
                <p class="cpu-step" x-show="step" x-text="step" x-cloak></p>
                <p class="cpu-since" x-show="runningSince" x-text="runningSince" x-cloak></p>
                <pre class="cpu-log" x-show="log" x-text="log" x-cloak></pre>
            </div>
        @endif
        <p class="cpu-foot">{{ __('updating.auto') }}</p>
    </main>
</div>