<x-ui.modal>
    <div class="flex items-center justify-between">
        <h3 class="text-base font-semibold text-ink">{{ __('datacenters.edit_title') }}</h3>
        <span class="rounded bg-surface-2 px-2 py-0.5 font-mono text-xs text-muted">{{ $code }}</span>
    </div>

    <div class="mt-4 space-y-4">
        {{-- Editable only while nothing references it. The code is not merely a
             foreign key: each host's DNS name was minted from it and exists at
             the provider, and the machine's own hostname was set from it while
             it was built. Renaming a code with hosts in it produces a datacenter
             called hel full of machines called fsn-01 — so once anything depends
             on it the field is a fact, and the reason is named rather than left
             for the operator to guess at. --}}
        <div>
            <label class="text-sm font-medium text-body" for="dc-code">{{ __('datacenters.code') }}</label>
            @if ($codeFree)
                <input id="dc-code" type="text" wire:model="code" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 font-mono text-sm text-ink" />
                <p class="mt-1 text-xs text-muted">{{ __('datacenters.code_hint') }}</p>
            @else
                <input id="dc-code" type="text" value="{{ $code }}" disabled
                       class="mt-1.5 w-full cursor-not-allowed rounded-md border border-line bg-surface-2 px-3 py-2 font-mono text-sm text-muted" />
                <p class="mt-1 text-xs text-muted">{{ __('datacenters.code_locked', ['hosts' => $hostCount, 'orders' => $orderCount]) }}</p>
            @endif
            @error('code')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="text-sm font-medium text-body" for="dc-name">{{ __('datacenters.name') }}</label>
            <input id="dc-name" type="text" wire:model="name" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-ink" />
            @error('name')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="text-sm font-medium text-body" for="dc-facility">{{ __('datacenters.facility') }}</label>
            <input id="dc-facility" type="text" wire:model="facility" placeholder="fsn-dc-15"
                   class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-ink" />
            <p class="mt-1 text-xs text-muted">{{ __('datacenters.facility_hint') }}</p>
            @error('facility')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="text-sm font-medium text-body" for="dc-location">{{ __('datacenters.location') }}</label>
            <select id="dc-location" wire:model="location" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-body">
                <option value="">{{ __('datacenters.no_country') }}</option>
                @if ($originalLocation !== '' && ! array_key_exists($originalLocation, $countries))
                    <option value="{{ $originalLocation }}">{{ $originalLocation }}</option>
                @endif
                {{-- $cc/$cname, not $code/$name: those are the component's own
                     properties, and a loop variable of the same name silently
                     replaces them for the rest of the file. Harmless while
                     nothing below the loop read them — which stopped being true
                     the moment the code became an editable field above. --}}
                @foreach ($countries as $cc => $cname)
                    <option value="{{ $cc }}">{{ $cname }} ({{ $cc }})</option>
                @endforeach
            </select>
            @error('location')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
        </div>
    </div>

    {{-- The one lifecycle action a location needs, and the form did not offer
         it: a datacenter could be created and never switched off again. --}}
    <div class="mt-5 rounded-lg border border-line bg-surface-2 p-4">
        <x-ui.checkbox name="active" wire:model="active" :label="__('datacenters.active_label')" />
        <p class="mt-1.5 pl-7 text-xs text-muted">{{ __('datacenters.active_hint') }}</p>
    </div>

    <x-slot:footer>
        <div class="flex justify-end gap-3">
            <x-ui.button variant="secondary" x-on:click="Livewire.dispatch('closeModal')">{{ __('datacenters.cancel') }}</x-ui.button>
            <x-ui.button variant="primary" wire:click="save" wire:loading.attr="disabled">{{ __('datacenters.save') }}</x-ui.button>
        </div>
    </x-slot:footer>
</x-ui.modal>
