<div class="mx-auto max-w-xl space-y-5">
    <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>

    <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>
</div>
