CluPilotCloud/resources/views/livewire/admin/host-create.blade.php

<div class="mx-auto max-w-2xl space-y-5">
    @if ($command === null)
        <div class="animate-rise">
            <a href="{{ route('admin.hosts') }}" wire:navigate class="inline-flex items-center gap-1.5 text-xs font-medium text-muted hover:text-body">
                <x-ui.icon name="arrow-left" class="size-4" />{{ __('hosts.back') }}
            </a>
            <h1 class="mt-2 text-2xl font-bold tracking-tight text-ink">{{ __('hosts.create_title') }}</h1>
            <p class="mt-1 text-sm text-muted">{{ __('hosts.create_sub') }}</p>
        </div>

        {{-- Was der Betreiber VORHER wissen muss, steht vor dem Formular und
             nicht danach: das Rettungssystem zu starten dauert beim Anbieter ein
             paar Minuten. Wer das erst hinterher liest, hat den Code schon in
             der Zwischenablage und wartet. --}}
        <x-ui.alert variant="info" class="animate-rise">
            <p class="font-medium">{{ __('hosts.takeover.before_title') }}</p>
            <p class="mt-1">{{ __('hosts.takeover.before_body') }}</p>
        </x-ui.alert>

        @if ($missingSettings)
            <x-ui.alert variant="warning" class="animate-rise">
                <p class="font-medium">{{ __('hosts.takeover.missing_title') }}</p>
                <p class="mt-1">{{ __('hosts.takeover.missing_body', ['settings' => implode(', ', $missingSettings)]) }}</p>
            </x-ui.alert>
        @endif

        <form wire:submit="save" class="space-y-5 rounded-lg border border-line bg-surface p-6 shadow-xs animate-rise">
            <x-ui.input name="name" wire:model="name" :label="__('hosts.field.name')" :hint="__('hosts.field.name_hint')" autofocus />

            <div class="space-y-1.5">
                <label for="datacenter" class="block text-sm font-medium text-body">{{ __('hosts.field.datacenter') }}</label>
                <select id="datacenter" wire:model="datacenter"
                        class="block w-full rounded border border-line bg-surface px-3 py-2 text-sm text-ink transition">
                    {{-- The building too, where it is known: two entries both
                         reading "Falkenstein (fsn)" are not a choice anybody can
                         make, and placing a second machine for redundancy is
                         exactly when it matters which hall it lands in. --}}
                    @foreach ($datacenters as $dc)
                        <option value="{{ $dc->code }}">{{ $dc->name }} ({{ $dc->code }})@if ($dc->facility) · {{ $dc->facility }}@endif</option>
                    @endforeach
                </select>
                @error('datacenter') <p class="text-xs text-danger">{{ $message }}</p> @enderror
            </div>

            <x-ui.input name="public_ip" wire:model="public_ip" :label="__('hosts.field.public_ip')" inputmode="numeric" placeholder="203.0.113.10" />

            <x-ui.input name="root_password" wire:model="root_password" type="password"
                        :label="__('hosts.field.root_password')" :hint="__('hosts.field.root_password_hint')" autocomplete="off" />

            <div class="flex items-center justify-end gap-3 pt-1">
                <a href="{{ route('admin.hosts') }}" wire:navigate>
                    <x-ui.button variant="secondary" type="button">{{ __('hosts.cancel') }}</x-ui.button>
                </a>
                <x-ui.button variant="primary" type="submit" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="save">{{ __('hosts.save') }}</span>
                    <span wire:loading wire:target="save">{{ __('hosts.save') }}…</span>
                </x-ui.button>
            </div>
        </form>
    @else
        {{-- Der Host steht. Ab hier ist diese Seite eine Anleitung und kein
             Formular mehr — und sie ist die EINZIGE Stelle, an der die
             Befehlszeile je zu sehen ist. --}}
        <div class="animate-rise">
            <h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('hosts.takeover.title', ['name' => $createdName]) }}</h1>
            <p class="mt-1 text-sm text-muted">{{ __('hosts.takeover.subtitle') }}</p>
        </div>

        <x-ui.alert variant="warning" class="animate-rise">
            <p class="font-medium">{{ __('hosts.takeover.once_title') }}</p>
            <p class="mt-1">{{ __('hosts.takeover.once_body') }}</p>
        </x-ui.alert>

        <ol class="space-y-4 animate-rise">
            <li class="rounded-lg border border-line bg-surface p-5 shadow-xs">
                <div class="flex items-baseline gap-2">
                    <span class="text-xs font-bold text-muted">1</span>
                    <h2 class="text-sm font-semibold text-ink">{{ __('hosts.takeover.step1_title') }}</h2>
                </div>
                <p class="mt-2 text-sm text-muted">{{ __('hosts.takeover.step1_body') }}</p>
            </li>

            <li class="rounded-lg border border-line bg-surface p-5 shadow-xs">
                <div class="flex items-baseline gap-2">
                    <span class="text-xs font-bold text-muted">2</span>
                    <h2 class="text-sm font-semibold text-ink">{{ __('hosts.takeover.step2_title') }}</h2>
                </div>
                <p class="mt-2 text-sm text-muted">{{ __('hosts.takeover.step2_body') }}</p>

                <div x-data="{ copied: false }" class="mt-3">
                    <div class="relative">
                        {{-- Umbrechen statt waagerecht rollen: aus einem Kasten
                             mit Rollbalken markiert jemand die Hälfte und merkt
                             es erst auf der Maschine. --}}
                        <pre class="max-h-56 overflow-y-auto rounded border border-line bg-canvas p-3 pr-24 font-mono text-xs leading-relaxed text-ink break-all whitespace-pre-wrap"
                             x-ref="command">{{ $command }}</pre>
                        <button type="button"
                                class="absolute right-2 top-2 inline-flex items-center gap-1 rounded border border-line bg-surface px-2 py-1 text-xs font-medium text-body hover:text-ink"
                                x-on:click="navigator.clipboard.writeText($refs.command.textContent); copied = true; setTimeout(() => copied = false, 2000)">
                            <x-ui.icon name="copy" class="size-4" x-show="!copied" />
                            <x-ui.icon name="check" class="size-4" x-show="copied" x-cloak />
                            <span x-text="copied ? @js(__('hosts.takeover.copied')) : @js(__('hosts.takeover.copy'))">{{ __('hosts.takeover.copy') }}</span>
                        </button>
                    </div>
                    <p class="mt-2 text-xs text-muted">{{ __('hosts.takeover.step2_hint', ['url' => $archiveUrl]) }}</p>
                </div>
            </li>

            <li class="rounded-lg border border-line bg-surface p-5 shadow-xs">
                <div class="flex items-baseline gap-2">
                    <span class="text-xs font-bold text-muted">3</span>
                    <h2 class="text-sm font-semibold text-ink">{{ __('hosts.takeover.step3_title') }}</h2>
                </div>
                <p class="mt-2 text-sm text-muted">{{ __('hosts.takeover.step3_body') }}</p>
                <div class="mt-3">
                    <a href="{{ route('admin.hosts.show', ['host' => $createdUuid]) }}" wire:navigate>
                        <x-ui.button variant="primary">
                            <x-slot:icon><x-ui.icon name="activity" class="size-4" /></x-slot:icon>
                            {{ __('hosts.takeover.watch') }}
                        </x-ui.button>
                    </a>
                </div>
            </li>
        </ol>

        <p class="text-xs text-muted animate-rise">{{ __('hosts.takeover.footnote') }}</p>
    @endif
</div>