@php $editing = $server->exists; @endphp

<x-layouts.admin
    :title="$editing ? 'Edit server' : 'Register server'"
    :heading="$editing ? 'Edit server' : 'Register server'">

    <div class="max-w-3xl space-y-6">
        @unless ($editing)
            <x-ui.alert variant="info" title="What happens next">
                The server is created in <strong>Provisioning</strong> and will not receive
                customers yet. You'll get a one-time agent token to install on the node. Add an
                IP pool, then the node's first heartbeat promotes it to Online automatically.
            </x-ui.alert>
        @endunless

        <x-ui.card>
            <form method="POST"
                  action="{{ $editing ? route('admin.servers.update', $server) : route('admin.servers.store') }}"
                  class="space-y-5">
                @csrf
                @if ($editing) @method('PUT') @endif

                <div class="grid gap-5 sm:grid-cols-2">
                    <x-ui.field label="Server name" name="name" :value="$server->name" required
                                hint="Internal label, e.g. zylo-nyc-01"/>

                    <div class="space-y-1.5">
                        <label for="vpn_location_id" class="block text-sm font-medium text-silver-200">
                            Location <span class="text-danger" aria-hidden="true">*</span>
                        </label>
                        <select id="vpn_location_id" name="vpn_location_id" required
                                class="block w-full rounded-lg border border-line-strong bg-abyss px-3.5 py-2.5
                                       text-sm text-silver-100 focus:border-electric-500 focus:outline-none
                                       focus:ring-2 focus:ring-electric-500/40">
                            <option value="">Choose a location…</option>
                            @foreach ($locations as $location)
                                <option value="{{ $location->id }}"
                                    @selected(old('vpn_location_id', $server->vpn_location_id) == $location->id)>
                                    {{ $location->display_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('vpn_location_id')
                            <p class="text-xs text-danger">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="grid gap-5 sm:grid-cols-2">
                    <x-ui.field label="Public IP address" name="ip_address" :value="$server->ip_address"
                                required hint="What clients connect to."/>
                    <x-ui.field label="WireGuard port" name="wireguard_port" type="number"
                                :value="$server->wireguard_port" required/>
                </div>

                <x-ui.field label="Hostname" name="hostname" :value="$server->hostname"
                            hint="Optional. For your reference only — configs use the IP address."/>

                <x-ui.field label="Server public key" name="public_key" :value="$server->public_key"
                            hint="Optional — the node reports this on first heartbeat if left blank."
                            class="font-mono text-xs"/>

                <div class="grid gap-5 sm:grid-cols-3">
                    <x-ui.field label="Capacity" name="capacity" type="number"
                                :value="$server->capacity" required hint="Max peers"/>
                    <x-ui.field label="Provider" name="provider" :value="$server->provider"/>
                    <x-ui.field label="Operating system" name="operating_system"
                                :value="$server->operating_system"/>
                </div>

                <div class="grid gap-5 sm:grid-cols-2">
                    <x-ui.field label="DNS override" name="dns" :value="$server->dns"
                                hint="Blank uses {{ config('zylovpn.wireguard.dns') }}"/>
                    <x-ui.field label="MTU override" name="mtu" type="number" :value="$server->mtu"
                                hint="Blank uses {{ config('zylovpn.wireguard.mtu') }}"/>
                </div>

                <div class="space-y-1.5">
                    <label for="notes" class="block text-sm font-medium text-silver-200">Notes</label>
                    <textarea id="notes" name="notes" rows="3"
                              class="block w-full rounded-lg border border-line-strong bg-abyss px-3.5 py-2.5
                                     text-sm text-silver-100 focus:border-electric-500 focus:outline-none
                                     focus:ring-2 focus:ring-electric-500/40">{{ old('notes', $server->notes) }}</textarea>
                </div>

                <div class="flex gap-3 pt-2">
                    <x-ui.button type="submit">
                        {{ $editing ? 'Save changes' : 'Register server' }}
                    </x-ui.button>
                    <x-ui.button variant="ghost"
                                 :href="$editing ? route('admin.servers.show', $server) : route('admin.servers.index')">
                        Cancel
                    </x-ui.button>
                </div>
            </form>
        </x-ui.card>
    </div>

</x-layouts.admin>