<div class="mx-auto max-w-[1120px] space-y-6">
    <div class="animate-rise">
        <h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('admin_settings.title') }}</h1>
        <p class="mt-1 text-sm text-muted">{{ __('admin_settings.subtitle') }}</p>
    </div>

    {{-- ── The tabs ──────────────────────────────────────────────────────
         The page was three headed sections in one column, two thousand pixels
         of scroll, with the operator's own password somewhere in the middle of
         it. Which part somebody wants is a property of what they came to do,
         not of how far they scroll.

         The choice is in the query string (see the #[Url] attribute), so a
         reload, a bookmark and the back button all land where the operator
         was. That matters here more than on most pages: the installation tab
         refreshes itself while an update runs, and a tab state kept only in the
         component would drop them back to the first tab mid-deployment. --}}
    <div class="flex flex-wrap items-center gap-x-1 gap-y-2 border-b border-line animate-rise [animation-delay:40ms]" role="tablist">
        @foreach ($tabs as $name)
            <button type="button" role="tab" wire:click="$set('tab', '{{ $name }}')"
                    aria-selected="{{ $tab === $name ? 'true' : 'false' }}"
                    @class([
                        'flex items-center gap-2 whitespace-nowrap border-b-2 px-4 py-2.5 text-sm font-medium transition-colors -mb-px',
                        'border-accent-active text-ink' => $tab === $name,
                        'border-transparent text-muted hover:text-ink' => $tab !== $name,
                    ])>
                <x-ui.icon :name="['installation' => 'server', 'account' => 'users', 'two-factor' => 'shield-check', 'team' => 'users'][$name] ?? 'settings'"
                           class="size-4" />{{ __('admin_settings.tab.'.str_replace('-', '_', $name)) }}
            </button>
        @endforeach
    </div>

{{-- ── Die Installation ─────────────────────────────────────────────────
     Grouped and given headings because the page was one undifferentiated
     stack: eight cards of the same weight in a column half the window wide,
     with the operator's own password sitting between two platform-wide
     switches. What each card belongs to is now said out loud, and the short
     ones sit side by side instead of each taking a full row to hold three
     lines of text. --}}
    @if ($tab === 'installation')
        <section class="space-y-5">

            {{-- Version & update --}}
            @if ($canManageSite)
                {{-- Polls itself: an operator watching an update run should not have to
                     reload the page to find out whether it finished. Fast while
                     something is happening, slow when nothing is.

                     wire:poll alone is not enough, because the thing being watched
                     restarts the thing doing the watching. Mid-run the requests fail,
                     and what answers afterwards is a NEW build being questioned by the
                     old page's JavaScript — so the card sat on "läuft" until somebody
                     reloaded. That gap is now covered by the full-screen overlay in
                     layouts/admin.blade.php, which binds the same watcher once for
                     every console page rather than here — this card no longer binds
                     it itself, so the two do not double-poll while this page is
                     open. wire:poll below is unrelated and stays: it is Livewire's
                     own refresh of this card's own details (log tail, elapsed time)
                     for as long as a Livewire connection exists. --}}
                {{-- The poll stops while a run is in flight. The overlay's own
                     watcher is what follows a deployment — a plain fetch with no
                     component state behind it, which is why it survives the
                     restart. This one cannot, and every attempt during maintenance
                     mode was a Livewire request answering 503. --}}
                <div class="rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise"
                     @if (! $update['running']) wire:poll.{{ $update['checking'] ? '3s' : '30s' }} @endif>
                    <div class="flex flex-wrap items-start justify-between gap-4">
                        <div class="min-w-0">
                            <div class="flex flex-wrap items-center gap-2">
                                <h2 class="font-semibold text-ink">{{ __('admin_settings.update_title') }}</h2>
                                @if ($update['running'])
                                    <span class="inline-flex items-center gap-1.5 rounded-pill border border-info-border bg-info-bg px-2.5 py-0.5 text-xs font-medium text-info">
                                        <span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>{{ __('admin_settings.update_running') }}
                                    </span>
                                @elseif ($update['checking'])
                                    <span class="inline-flex items-center gap-1.5 rounded-pill border border-info-border bg-info-bg px-2.5 py-0.5 text-xs font-medium text-info">
                                        <span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>{{ __('admin_settings.update_checking') }}
                                    </span>
                                @elseif ($update['available'])
                                    <span class="inline-flex items-center gap-1.5 rounded-pill border border-accent-border bg-accent-subtle px-2.5 py-0.5 text-xs font-medium text-accent-text">
                                        <span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>
                                        {{-- The version, when it is known: "Version 1.1.0
                                             verfügbar" is a thing an operator can decide
                                             about; "1 Aktualisierung verfügbar" is not. --}}
                                        @if ($update['target_release'])
                                            {{ __('admin_settings.update_available_release', ['version' => ltrim($update['target_release'], 'v')]) }}
                                        @else
                                            {{ __('admin_settings.update_available', ['n' => $update['behind']]) }}
                                        @endif
                                    </span>
                                @elseif ($update['behind'] === 0)
                                    <span class="inline-flex items-center gap-1.5 rounded-pill border border-success-border bg-success-bg px-2.5 py-0.5 text-xs font-medium text-success">
                                        <span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>{{ __('admin_settings.update_current') }}
                                    </span>
                                @else
                                    {{-- Never shown as "up to date": not knowing and being
                                         current are different answers. --}}
                                    <span class="inline-flex items-center gap-1.5 rounded-pill border border-line-strong bg-surface-2 px-2.5 py-0.5 text-xs font-medium text-muted">
                                        <span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>{{ __('admin_settings.update_unknown') }}
                                    </span>
                                @endif
                            </div>

                            <dl class="mt-3 space-y-1 text-sm">
                                <div class="flex gap-2"><dt class="text-muted">{{ __('admin_settings.update_version') }}:</dt>
                                    <dd class="font-mono text-body">{{ $update['version'] }}@if ($update['commit']) · {{ substr($update['commit'], 0, 7) }}@endif</dd></div>
                                @if ($update['source'])
                                    <div class="flex gap-2"><dt class="text-muted">{{ __('admin_settings.update_source') }}:</dt>
                                        <dd class="font-mono text-body">{{ $update['source'] }}</dd></div>
                                @endif
                                @if ($update['deployed_at'])
                                    <div class="flex gap-2"><dt class="text-muted">{{ __('admin_settings.update_deployed') }}:</dt>
                                        <dd class="text-body">{{ $update['deployed_at']->diffForHumans() }}</dd></div>
                                @endif
                                @if ($update['checked_at'])
                                    <div class="flex gap-2"><dt class="text-muted">{{ __('admin_settings.update_checked') }}:</dt>
                                        <dd class="text-body">{{ $update['checked_at']->diffForHumans() }}</dd></div>
                                @endif
                            </dl>
                        </div>

                        {{-- Bound, not @disabled(): the directive compiles to inline PHP
                             inside the component tag, and Blade then stops seeing a
                             component.

                             Two separate actions, always offered together: looking and
                             applying are different intentions, and an operator who only
                             wants to know whether anything is new must not be routed
                             through a real deployment to find out.

                             "Jetzt aktualisieren" now requires a released version to
                             install. It used to be offered unconditionally, because
                             `behind` was a reading taken up to a minute ago and a
                             console that had not noticed the last commit yet would
                             refuse to act on it. That reasoning belonged to counting
                             commits on a branch, where the answer changes several times
                             an hour. An update is a TAG now: it appears when somebody
                             releases one, not when somebody pushes — and pressing the
                             check button answers within a second, so a stale reading is
                             no longer something to work around.

                             Disabled for the cases where it would go nowhere: nothing
                             released above the installed version, a run already in
                             flight, no agent, or a check already pending (so a second
                             click cannot collide with the first and be refused). --}}
                        <div class="flex shrink-0 items-center gap-2">
                            @if ($update['running'])
                                <x-ui.button variant="secondary" :disabled="true">
                                    <x-ui.icon name="refresh" class="size-4 animate-spin" />
                                    {{ __('admin_settings.update_running') }}
                                </x-ui.button>
                            @elseif (! $update['agent_seen'])
                                <x-ui.button variant="secondary" :disabled="true">{{ __('admin_settings.update_unknown') }}</x-ui.button>
                            @else
                                <x-ui.button variant="secondary" :disabled="$update['checking']"
                                             wire:click="requestCheck" wire:loading.attr="disabled" wire:target="requestCheck">
                                    <x-ui.icon name="refresh" class="size-4 {{ $update['checking'] ? 'animate-spin' : '' }}" />
                                    {{ $update['checking'] ? __('admin_settings.update_checking') : __('admin_settings.update_check') }}
                                </x-ui.button>
                                <x-ui.button variant="primary" :disabled="$update['checking'] || ! $update['available']"
                                             wire:click="requestUpdate" wire:loading.attr="disabled" wire:target="requestUpdate">
                                    <x-ui.icon name="download" class="size-4" />
                                    {{ __('admin_settings.update_now') }}
                                </x-ui.button>
                            @endif
                        </div>
                    </div>

                    @if (! $update['agent_seen'])
                        <x-ui.alert variant="warning" class="mt-4">{{ __('admin_settings.update_no_agent') }}</x-ui.alert>
                    @elseif ($update['blocked_since'])
                        {{-- Der Dienst LÄUFT, kommt aber nicht an die Arbeit.
                             Vorher stand hier die Meldung darüber — „läuft
                             nicht", samt der Aufforderung, install-agent.sh zu
                             fahren, das an einer gehaltenen Sperre nichts
                             ändert. Ein Betreiber hat dem zweiundachtzig
                             Minuten lang geglaubt. --}}
                        <x-ui.alert variant="warning" class="mt-4">
                            {{ __('admin_settings.update_agent_blocked', ['since' => $update['blocked_since']->local()->isoFormat('HH:mm')]) }}
                            @if ($update['blocked_by'])
                                <span class="mt-1 block font-mono text-xs opacity-80">{{ $update['blocked_by'] }}</span>
                            @endif
                        </x-ui.alert>
                    @elseif ($update['last_error'])
                        <x-ui.alert variant="danger" class="mt-4">{{ $update['last_error'] }}</x-ui.alert>
                    @elseif (! $update['available'] && ! $update['running'] && ! $update['checking'])
                        {{-- Why the button is grey. Without this the console looks
                             broken to whoever just pushed to main and expects to see
                             something: it is not broken, it is waiting for a release. --}}
                        <p class="mt-3 text-xs text-muted">{{ __('admin_settings.update_only_releases') }}</p>
                    @endif

                    {{-- Where it is. "Läuft gerade" alone is what sends an operator to
                         the shell: a queued update does nothing visible until the agent
                         picks it up, and while it runs the site is in maintenance mode
                         and this page is unreachable. Both look identical to "wedged"
                         without a time — hence the live countdown, replacing what used
                         to be a static "spätestens um 17:19" that read as a promise
                         nothing then visibly kept.

                         There is no countdown any more, for either. It was wrong in
                         fact — the target was recomputed on every poll, and where the
                         interval the agent reported was shorter than the timer actually
                         installed on that host it landed in the past every time and
                         reset to a full minute, so it ran backwards a few seconds and
                         jumped, forever. And it was wrong in kind: a check starts
                         nothing, and an update now starts at once. A queued run says so
                         in a sentence; a queued check says nothing beyond its badge. --}}
                    {{-- And the step is NOT shown here.

                         It used to be, in a small bordered block inside this card, and
                         the moment a run began an operator saw it appear and then, up
                         to three seconds later, saw the full-page overlay cover it and
                         say the same thing in a different size. Two windows for one
                         event. The overlay in layouts/admin carries the step, the
                         running time and the log tail — it is the one that survives the
                         restart, so it is the one that keeps them. --}}

                    {{-- The window. Deliberately inside the update card rather than a
                         section of its own: it is the same decision as the button next
                         to it, only taken in advance. --}}
                    <div class="mt-5 border-t border-line pt-5">
                        <label class="flex items-start gap-3">
                            <input type="checkbox" wire:model.live="autoUpdate" class="mt-0.5 size-4 rounded border-line text-accent-active">
                            <span>
                                <span class="block text-sm font-semibold text-ink">{{ __('admin_settings.auto_title') }}</span>
                                <span class="mt-1 block max-w-[64ch] text-xs leading-relaxed text-muted">{{ __('admin_settings.auto_hint') }}</span>
                            </span>
                        </label>

                        <div class="mt-4 space-y-4 @unless ($autoUpdate) opacity-50 @endunless">
                            <div>
                                <span class="mb-2 block text-xs font-semibold text-muted">{{ __('admin_settings.auto_days') }}</span>
                                <div class="flex flex-wrap gap-1.5">
                                    @foreach ([1, 2, 3, 4, 5, 6, 7] as $day)
                                        <label class="cursor-pointer">
                                            <input type="checkbox" wire:model="autoDays" value="{{ $day }}" class="peer sr-only" @disabled(! $autoUpdate)>
                                            <span class="inline-flex min-h-9 items-center rounded border border-line bg-surface px-3 text-sm text-muted transition peer-checked:border-accent-border peer-checked:bg-accent-subtle peer-checked:font-semibold peer-checked:text-accent-text">
                                                {{ __('admin_settings.weekday.'.$day) }}
                                            </span>
                                        </label>
                                    @endforeach
                                </div>
                                @error('autoDays') <p class="mt-1 text-xs text-danger">{{ $message }}</p> @enderror
                            </div>

                            <div class="flex flex-wrap items-end gap-3">
                                <div>
                                    <label for="auto-from" class="mb-1.5 block text-xs font-semibold text-muted">{{ __('admin_settings.auto_from') }}</label>
                                    <input id="auto-from" type="time" wire:model="autoFrom" @disabled(! $autoUpdate)
                                           class="min-h-10 w-32 rounded border border-line bg-surface px-3 font-mono text-sm text-ink">
                                    @error('autoFrom') <p class="mt-1 text-xs text-danger">{{ $message }}</p> @enderror
                                </div>
                                <div>
                                    <label for="auto-to" class="mb-1.5 block text-xs font-semibold text-muted">{{ __('admin_settings.auto_to') }}</label>
                                    <input id="auto-to" type="time" wire:model="autoTo" @disabled(! $autoUpdate)
                                           class="min-h-10 w-32 rounded border border-line bg-surface px-3 font-mono text-sm text-ink">
                                    @error('autoTo') <p class="mt-1 text-xs text-danger">{{ $message }}</p> @enderror
                                </div>
                                <x-ui.button wire:click="saveUpdateWindow" variant="secondary" size="sm">{{ __('admin_settings.save') }}</x-ui.button>
                            </div>

                            <p class="text-xs text-muted">
                                @if ($autoUpdate)
                                    {{ __('admin_settings.auto_next', [
                                        'days' => collect($autoDays)->sort()->map(fn ($d) => __('admin_settings.weekday.'.$d))->join(', '),
                                        'from' => $autoFrom,
                                        'to' => $autoTo,
                                    ]) }}
                                @else
                                    {{ __('admin_settings.auto_off') }}
                                @endif
                            </p>
                        </div>
                    </div>

                    @if ($update['last_state'] !== null && ! $update['running'])
                        <p class="mt-3 text-xs text-muted">
                            {{ __('admin_settings.update_last_run', [
                                'state' => __('admin_settings.update_state.'.$update['last_state']),
                                'when' => $update['last_finished_at']?->diffForHumans() ?? '—',
                            ]) }}
                            @if ($update['last_started_at'] && $update['last_finished_at'])
                                · {{ __('admin_settings.update_took', ['duration' => $update['last_started_at']->diffForHumans($update['last_finished_at'], true)]) }}
                            @endif
                            {{-- Only on a failure: on a run that worked the last step is
                                 "left maintenance mode", which says nothing. --}}
                            @if ($update['last_state'] === 'failed' && $update['last_phase'])
                                · {{ __('admin_settings.update_failed_at', ['step' => $update['last_phase']]) }}
                            @endif
                        </p>
                    @endif

                    {{-- Open while it runs: "läuft gerade" on its own tells an operator
                         nothing about whether it is progressing or wedged. --}}
                    @if ($updateLog)
                        <details class="mt-4" @if ($update['running']) open @endif>
                            <summary class="cursor-pointer text-sm font-medium text-accent-text">{{ __('admin_settings.update_log') }}</summary>
                            <pre class="mt-2 max-h-64 overflow-auto rounded-lg border border-line bg-surface-2 p-3 font-mono text-xs leading-relaxed text-body">{{ $updateLog }}</pre>
                        </details>
                    @endif
                </div>
            @endif

            <div class="grid gap-5 lg:grid-cols-2 lg:items-start">
                {{-- Website visibility and two-factor policy stack in the left
                     column: both are short, and the console's allow-list beside
                     them is long. Three cards of one row each left a column of
                     white space down the middle of the page. --}}
                <div class="space-y-5">
                {{-- My account --}}
                @if ($canManageSite)
                    <div class="rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise">
                        <div class="flex flex-wrap items-start justify-between gap-4">
                            <div class="min-w-0">
                                <div class="flex items-center gap-2">
                                    <h2 class="font-semibold text-ink">{{ __('admin_settings.site_title') }}</h2>
                                    <span class="inline-flex items-center gap-1.5 rounded-pill border px-2.5 py-0.5 text-xs font-medium
                                          {{ $sitePublic ? 'border-success-border bg-success-bg text-success' : 'border-warning-border bg-warning-bg text-warning' }}">
                                        <span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>
                                        {{ $sitePublic ? __('admin_settings.site_public') : __('admin_settings.site_hidden') }}
                                    </span>
                                </div>
                                <p class="mt-1.5 max-w-xl text-sm text-muted">
                                    {{ $sitePublic ? __('admin_settings.site_public_body') : __('admin_settings.site_hidden_body') }}
                                </p>
                                <p class="mt-2 text-xs text-muted">
                                    {{ __('admin_settings.site_your_view', ['ip' => request()->ip()]) }}
                                    <span class="{{ $viewerOnVpn ? 'text-success' : '' }}">
                                        {{ $viewerOnVpn ? __('admin_settings.site_via_vpn') : __('admin_settings.site_not_vpn') }}
                                    </span>
                                </p>
                            </div>
                            <x-ui.button :variant="$sitePublic ? 'secondary' : 'primary'" wire:click="toggleSiteVisibility" wire:loading.attr="disabled" wire:target="toggleSiteVisibility">
                                <x-ui.icon :name="$sitePublic ? 'lock' : 'unlock'" class="size-4" />
                                {{ $sitePublic ? __('admin_settings.site_hide') : __('admin_settings.site_show') }}
                            </x-ui.button>
                        </div>
                    </div>
                @endif

            {{-- Two-factor policy — voluntary by default, the Owner can make it
                 compulsory. The switch refuses to turn on while the operator flipping
                 it has no confirmed two-factor themselves: the page that would turn it
                 back off sits behind the switch. --}}
            @if ($canManageSite)
                <div class="rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise [animation-delay:45ms]">
                    <h2 class="font-semibold text-ink">{{ __('admin_settings.two_factor_title') }}</h2>
                    <p class="mt-1 max-w-xl text-sm text-muted">{{ __('admin_settings.two_factor_body') }}</p>

                    <form wire:submit="saveTwoFactorPolicy" class="mt-4 flex flex-wrap items-center justify-between gap-3">
                        <label class="flex items-center gap-2 text-sm text-body">
                            <input type="checkbox" wire:model="requireTwoFactor" class="size-4 rounded border-line-strong text-accent" />
                            {{ __('admin_settings.two_factor_require') }}
                        </label>
                        <x-ui.button type="submit" variant="primary" wire:loading.attr="disabled" wire:target="saveTwoFactorPolicy">
                            {{ __('admin_settings.save') }}
                        </x-ui.button>
                    </form>
                    @error('requireTwoFactor')<p class="mt-1.5 text-xs text-danger">{{ $message }}</p>@enderror
                </div>
            @endif
                </div>

                {{-- Who may reach this console --}}
                @if ($canManageSite)
                    <div class="rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise [animation-delay:30ms]">
                        <div class="flex flex-wrap items-start justify-between gap-4">
                            <div class="min-w-0">
                                <div class="flex items-center gap-2">
                                    <h2 class="font-semibold text-ink">{{ __('admin_settings.console_title') }}</h2>
                                    <span class="inline-flex items-center gap-1.5 rounded-pill border px-2.5 py-0.5 text-xs font-medium
                                          {{ $consoleRestricted ? 'border-success-border bg-success-bg text-success' : 'border-warning-border bg-warning-bg text-warning' }}">
                                        <span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>
                                        {{ $consoleRestricted ? __('admin_settings.console_locked_badge') : __('admin_settings.console_open_badge') }}
                                    </span>
                                </div>
                                <p class="mt-1 max-w-xl text-sm text-muted">
                                    {{ $consoleRestricted ? __('admin_settings.console_locked_body') : __('admin_settings.console_open_body') }}
                                </p>
                                <p class="mt-2 font-mono text-xs text-muted">
                                    {{ __('admin_settings.console_your_ip', ['ip' => $viewerIp]) }}
                                </p>
                            </div>
                            <x-ui.button :variant="$consoleRestricted ? 'secondary' : 'primary'"
                                         wire:click="toggleConsoleRestriction" wire:loading.attr="disabled" wire:target="toggleConsoleRestriction">
                                <x-ui.icon :name="$consoleRestricted ? 'unlock' : 'lock'" class="size-4" />
                                {{ $consoleRestricted ? __('admin_settings.console_unlock') : __('admin_settings.console_lock') }}
                            </x-ui.button>
                        </div>

                        <div class="mt-5 space-y-2 border-t border-line pt-4">
                            <p class="text-xs font-semibold text-muted">{{ __('admin_settings.console_always') }}</p>
                            @foreach ($consoleVpnRanges as $range)
                                <div class="flex items-center justify-between rounded-lg border border-line-strong bg-surface-2 px-3 py-2">
                                    <span class="font-mono text-sm text-body">{{ $range }}</span>
                                    <span class="text-xs text-muted">{{ __('admin_settings.console_vpn_note') }}</span>
                                </div>
                            @endforeach

                            {{-- Eintraege, die jemand von Hand in TRUSTED_RANGES
                                 geschrieben hat. Sie standen bis hierher neben dem
                                 Management-Netz mit demselben Vermerk „nicht
                                 entfernbar" — und waren damit fuer den Betreiber
                                 unveraenderlich, obwohl sie genau das nicht sind.
                                 Wer umzieht, muss seine Bueroadresse aendern
                                 koennen; sie gehoert in die Liste darunter. --}}
                            @foreach ($consoleEnvRanges as $range)
                                <div class="flex items-center justify-between gap-3 rounded-lg border border-warning-border bg-warning-bg px-3 py-2">
                                    <span class="font-mono text-sm text-body">{{ $range }}</span>
                                    <span class="text-right text-xs text-warning">{{ __('admin_settings.console_env_note') }}</span>
                                </div>
                            @endforeach

                            <p class="pt-3 text-xs font-semibold text-muted">{{ __('admin_settings.console_extra') }}</p>
                            @forelse ($consoleIps as $ip)
                                <div wire:key="cip-{{ $ip }}" class="flex items-center justify-between rounded-lg border border-line-strong bg-surface-2 px-3 py-2">
                                    <span class="font-mono text-sm text-body">{{ $ip }}</span>
                                    <x-ui.button variant="ghost" size="sm" wire:click="removeConsoleIp('{{ $ip }}')">
                                        {{ __('admin_settings.console_remove') }}
                                    </x-ui.button>
                                </div>
                            @empty
                                <p class="text-sm text-muted">{{ __('admin_settings.console_none') }}</p>
                            @endforelse

                            {{-- The hint sits under the row, not inside it: as a sibling of
                                 the field it made the flex row as tall as field-plus-hint,
                                 and the button stretched to match. --}}
                            <form wire:submit="addConsoleIp" class="pt-2">
                                <div class="flex items-start gap-2">
                                    <div class="flex-1">
                                        <x-ui.input name="consoleIp" wire:model="consoleIp" placeholder="203.0.113.7" />
                                    </div>
                                    <x-ui.button type="submit" wire:loading.attr="disabled" wire:target="addConsoleIp">{{ __('admin_settings.console_add') }}</x-ui.button>
                                </div>
                                <p class="mt-1.5 text-xs text-muted">{{ __('admin_settings.console_ip_hint') }}</p>
                            </form>

                            {{-- Diese Liste hängt nicht nur an der Konsole.
                                 Sie entscheidet auch, von wo aus eine
                                 Root-Schale zum Server aufgeht — und das ist
                                 der Preis dafür, beides an eine Liste zu
                                 hängen: wer sie ändert, soll sehen, was daran
                                 hängt, statt es zu erfahren, wenn das Terminal
                                 nicht mehr aufgeht. --}}
                            <p class="mt-3 flex items-start gap-2 rounded-lg border border-line bg-surface-2 px-3 py-2 text-xs text-muted">
                                <x-ui.icon name="lock" class="size-4 shrink-0 text-muted" />
                                <span>{{ __('admin_settings.console_terminal_note') }}</span>
                            </p>
                        </div>
                    </div>
                @endif

                {{-- Das Terminal zum Server selbst. Eigene Fähigkeit, eigener
                     Schlüssel, eigene Karte: was hier aufgeht, reicht nicht auf
                     eine Maschine, sondern auf alles. --}}
                @if ($canServerTerminal)
                    <div class="rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise [animation-delay:60ms]">
                        <div class="flex flex-wrap items-start justify-between gap-4">
                            <div class="min-w-0">
                                <h2 class="font-semibold text-ink">{{ __('admin_settings.server_terminal_title') }}</h2>
                                <p class="mt-1 max-w-xl text-sm text-muted">{{ __('admin_settings.server_terminal_body') }}</p>

                                @if ($serverTerminalProblem === '' && $serverTerminalInstalledAt)
                                    <p class="mt-2 text-xs text-muted">
                                        {{ __('admin_settings.server_terminal_installed', ['when' => \Illuminate\Support\Carbon::parse($serverTerminalInstalledAt)->local()->isoFormat('LLL')]) }}
                                    </p>
                                @endif
                            </div>

                            {{-- Zwei Zweige statt eines Knopfes mit gebundenem
                                 `disabled`: eine Blade-Bindung in der
                                 Attributliste eines Bauteils ist genau die
                                 Falle aus R24 §3, und ein Link-Knopf, den man
                                 nicht drücken soll, wäre trotzdem ein Link. --}}
                            @if ($serverTerminalProblem === '' && $serverTerminalOnNetwork)
                                <x-ui.button variant="secondary" size="sm"
                                             :href="route('admin.server.terminal')"
                                             target="_blank" rel="noopener" :title="__('server.terminal.hint')">
                                    <x-ui.icon name="activity" class="size-4" />{{ __('server.terminal.open') }}
                                </x-ui.button>
                            @else
                                <x-ui.button variant="secondary" size="sm" disabled>
                                    <x-ui.icon name="activity" class="size-4" />{{ __('server.terminal.open') }}
                                </x-ui.button>
                            @endif
                        </div>

                        <div class="mt-5 space-y-3 border-t border-line pt-4">
                            @if (! $serverTerminalOnNetwork)
                                <p class="text-sm text-warning">{{ __('admin_settings.server_terminal_off_network', ['ip' => $viewerIp]) }}</p>
                            @endif

                            @if ($serverTerminalProblem === 'no_key')
                                <p class="text-sm text-muted">{{ __('admin_settings.server_terminal_no_key') }}</p>
                            @elseif ($serverTerminalProblem === 'not_installed')
                                <p class="text-sm text-muted">{{ __('admin_settings.server_terminal_not_installed') }}</p>
                                <p class="rounded-lg border border-line-strong bg-surface-2 px-3 py-2 font-mono text-sm text-body">sudo bash deploy/install-agent.sh</p>
                            @endif

                            <div class="flex flex-wrap items-center gap-3">
                                <x-ui.button variant="{{ $serverTerminalProblem === 'no_key' ? 'primary' : 'secondary' }}" size="sm"
                                             x-on:click="$dispatch('openModal', { component: 'admin.confirm-generate-server-key' })">
                                    <x-ui.icon name="shield" class="size-4" />
                                    {{ $serverTerminalProblem === 'no_key' ? __('admin_settings.server_terminal_generate') : __('admin_settings.server_terminal_regenerate') }}
                                </x-ui.button>
                                <span class="text-xs text-muted">{{ __('admin_settings.server_terminal_key_hint') }}</span>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

        </section>
    @endif

    {{-- ── Das eigene Konto ────────────────────────────────────────────── --}}
    @if ($tab === 'account')
        <section class="space-y-5">

            <div class="grid gap-5 lg:grid-cols-2 lg:items-start">
                <form wire:submit="saveAccount" class="space-y-4 rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise [animation-delay:60ms]">
                    <h2 class="font-semibold text-ink">{{ __('admin_settings.account_title') }}</h2>
                    <div class="grid gap-4">
                        <x-ui.input name="name" wire:model="name" :label="__('admin_settings.name')" />
                        <x-ui.input name="email" wire:model="email" :label="__('admin_settings.email')" type="email" />
                    </div>
                    <div class="flex justify-end">
                        <x-ui.button variant="primary" type="submit" wire:loading.attr="disabled" wire:target="saveAccount">{{ __('admin_settings.save') }}</x-ui.button>
                    </div>
                </form>

                {{-- Own password. There was no way to change one at all: an account created
                     with a generated password kept it until someone opened a shell. --}}
                <form wire:submit="updateOwnPassword" class="space-y-4 rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise [animation-delay:90ms]">
                    <div>
                        <h2 class="font-semibold text-ink">{{ __('admin_settings.password_title') }}</h2>
                        <p class="mt-1 text-sm text-muted">{{ __('admin_settings.password_sub') }}</p>
                    </div>

                    <div class="grid gap-4">
                        <x-ui.input name="currentPassword" type="password" autocomplete="current-password"
                                    :label="__('admin_settings.password_current')" wire:model="currentPassword" />
                        <x-ui.input name="newPassword" type="password" autocomplete="new-password"
                                    :label="__('admin_settings.password_new')" wire:model="newPassword" />
                        <x-ui.input name="newPasswordConfirmation" type="password" autocomplete="new-password"
                                    :label="__('admin_settings.password_repeat')" wire:model="newPasswordConfirmation" />
                    </div>

                    <div class="flex justify-end">
                        <x-ui.button type="submit" variant="primary" wire:loading.attr="disabled" wire:target="updateOwnPassword">{{ __('admin_settings.password_save') }}</x-ui.button>
                    </div>
                </form>
            </div>

            {{-- Every operator sees their own, with no capability required: this is
                 the account you are signed in as, and being unable to see where else
                 that is true is the gap the feature exists to close. --}}
            <div class="animate-rise [animation-delay:40ms]">
                @livewire('admin.sessions')
            </div>
        </section>
    @endif

    {{-- ── Zwei-Faktor ──────────────────────────────────────────────────────
         The unchanged Admin\TwoFactorSetup component, rendered here instead of
         behind a navigation entry of its own. It is a setting, and it was the
         one thing an operator had to leave the settings page to change about
         their own access.

         It still answers at its own route as well, because
         RequireOperatorTwoFactor sends an operator there who may not open
         anything else yet — this page included. Same component either way, so
         there is no second copy of the enrolment logic to keep in step. --}}
    @if ($tab === 'two-factor')
        {{-- Die Passwortrichtlinie, und zwar HIER: sie gilt für Kunden wie für
             Mitarbeiter, ist also keine Einstellung des eigenen Kontos. Der
             Reiter heißt deshalb „Sicherheit" und nicht mehr „Zwei-Faktor" —
             der Schlüssel bleibt `two-factor`, damit bestehende Links halten. --}}
        <x-ui.card class="animate-rise">
            <h2 class="text-lg font-semibold text-ink">{{ __('admin_settings.password_policy_title') }}</h2>
            <p class="mt-1 max-w-[70ch] text-sm text-muted">{{ __('admin_settings.password_policy_body') }}</p>

            <div class="mt-5 flex flex-wrap items-end gap-3">
                <div class="w-40">
                    <x-ui.input name="passwordMinLength" type="number"
                                min="{{ \App\Support\PasswordPolicy::FLOOR }}"
                                max="{{ \App\Support\PasswordPolicy::CEILING }}"
                                wire:model="passwordMinLength"
                                :label="__('admin_settings.password_min_length')" />
                </div>
                <x-ui.button variant="primary" wire:click="savePasswordPolicy"
                             wire:loading.attr="disabled" wire:target="savePasswordPolicy">
                    {{ __('common.save') }}
                </x-ui.button>
            </div>
            <p class="mt-2 text-xs text-muted">{{ __('admin_settings.password_min_length_hint', ['floor' => \App\Support\PasswordPolicy::FLOOR]) }}</p>
        </x-ui.card>

        <div class="animate-rise [animation-delay:30ms]">
            @livewire('admin.two-factor-setup', ['embedded' => true])
        </div>
    @endif

    {{-- ── Das Team ─────────────────────────────────────────────────────── --}}
    @if ($tab === 'team' && $canManageStaff)
        <section class="space-y-5">

            <div class="space-y-4 rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise [animation-delay:120ms]">
                <div>
                    <h2 class="font-semibold text-ink">{{ __('admin_settings.staff_title') }}</h2>
                    <p class="mt-1 text-sm text-muted">{{ __('admin_settings.staff_sub') }}</p>
                </div>

                {{-- Invite --}}
                <form wire:submit="inviteStaff" class="grid grid-cols-1 gap-3 sm:grid-cols-[1fr_1fr_auto_auto] sm:items-end">
                    <div>
                        <label class="text-sm font-medium text-body" for="staffName">{{ __('admin_settings.name') }}</label>
                        <input id="staffName" type="text" wire:model="staffName" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-ink" />
                        @error('staffName')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="text-sm font-medium text-body" for="staffEmail">{{ __('admin_settings.email') }}</label>
                        <input id="staffEmail" type="email" wire:model="staffEmail" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-ink" />
                        @error('staffEmail')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="text-sm font-medium text-body" for="staffRole">{{ __('admin_settings.role') }}</label>
                        <select id="staffRole" wire:model="staffRole" class="mt-1.5 rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-body">
                            @foreach ($roles as $r)
                                @if ($r !== 'Owner' || $isOwner)
                                    <option value="{{ $r }}">{{ __('admin_settings.role_'.\Illuminate\Support\Str::slug($r)) }}</option>
                                @endif
                            @endforeach
                        </select>
                        @error('staffRole')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
                    </div>
                    <x-ui.button variant="primary" type="submit" wire:loading.attr="disabled" wire:target="inviteStaff">
                        <x-ui.icon name="plus" class="size-4" />{{ __('admin_settings.invite') }}
                    </x-ui.button>
                </form>
                {{-- Hier stand ein Kasten, der dem Inhaber das erzeugte Passwort
                     des neuen Mitarbeiters einmal anzeigte, damit er es „sicher
                     weitergibt". Ein Passwort, das zwei Menschen kennen, gehört
                     keinem von beiden — erst recht nicht auf einer Konsole, die
                     die ganze Flotte verwaltet. Es gibt jetzt keines mehr
                     anzuzeigen: der Eingeladene vergibt sein eigenes über den
                     Link aus der Einladungsmail. --}}
                <p class="text-xs text-muted">{{ __('admin_settings.invite_hint', ['hours' => $inviteHours]) }}</p>

                {{-- Staff list --}}
                <div class="overflow-hidden rounded-lg border border-line">
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="border-b border-line bg-surface-2 text-left text-xs font-semibold text-muted">
                                    <th class="px-4 py-3 font-semibold">{{ __('admin_settings.col_person') }}</th>
                                    <th class="px-4 py-3 font-semibold">{{ __('admin_settings.role') }}</th>
                                    <th class="px-4 py-3 text-right font-semibold">{{ __('admin_settings.col_actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($staff as $s)
                                    <tr wire:key="staff-{{ $s['id'] }}" class="border-b border-line last:border-0 hover:bg-surface-hover">
                                        <td class="px-4 py-3">
                                            <p class="font-medium text-ink">{{ $s['name'] }}
                                                @if ($s['self'])<span class="ml-1 text-xs text-muted">({{ __('admin_settings.you') }})</span>@endif
                                            </p>
                                            <p class="text-xs text-muted">{{ $s['email'] }}</p>
                                        </td>
                                        <td class="px-4 py-3">
                                            @if ($s['self'])
                                                <span class="text-body">{{ __('admin_settings.role_'.\Illuminate\Support\Str::slug($s['role'])) }}</span>
                                            @else
                                                <select wire:change="setStaffRole({{ $s['id'] }}, $event.target.value)" class="rounded-md border border-line-strong bg-surface px-2 py-1 text-xs text-body">
                                                    @foreach ($roles as $r)
                                                        @if ($r !== 'Owner' || $isOwner)
                                                            <option value="{{ $r }}" @selected($s['role'] === $r)>{{ __('admin_settings.role_'.\Illuminate\Support\Str::slug($r)) }}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            @endif
                                        </td>
                                        <td class="px-4 py-3 text-right">
                                            {{-- Your own row has no actions — you cannot revoke
                                                 yourself — and an empty cell reads as a bug rather
                                                 than as a rule. --}}
                                            @if ($s['self'])
                                                <span class="text-xs text-muted">—</span>
                                            @endif
                                            @unless ($s['self'])
                                                <div class="flex items-center justify-end gap-2">
                                                    {{-- Nur, solange der Link noch nie benutzt wurde
                                                         (siehe Settings::render(), never_signed_in): wer
                                                         schon angemeldet war, braucht kein neues Token,
                                                         und ein Knopf, der einem arbeitenden Kollegen das
                                                         Passwort neu vergeben liesse, wäre ein Fehler. --}}
                                                    @if ($s['never_signed_in'])
                                                        <button type="button" wire:click="resendInvitation({{ $s['id'] }})"
                                                                wire:loading.attr="disabled" wire:target="resendInvitation({{ $s['id'] }})"
                                                                class="inline-flex items-center gap-1.5 rounded-md border border-line px-2.5 py-1.5 text-xs font-semibold text-muted hover:border-accent-border hover:text-accent-text">
                                                            <x-ui.icon name="send" class="size-4" />{{ __('admin_settings.resend_invitation') }}
                                                        </button>
                                                    @endif
                                                    <button type="button" wire:click="revokeStaff({{ $s['id'] }})" class="rounded-md border border-line px-2.5 py-1.5 text-xs font-semibold text-muted hover:border-danger hover:text-danger">{{ __('admin_settings.revoke') }}</button>
                                                </div>
                                            @endunless
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    @endif
</div>
