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

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

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

                <div class="grid gap-5 sm:grid-cols-2">
                    <x-ui.field label="Country" name="country" :value="$location->country" required/>
                    <x-ui.field label="Country code" name="country_code" :value="$location->country_code"
                                required maxlength="2" hint="Two-letter ISO code, e.g. US"
                                class="uppercase"/>
                </div>

                <div class="grid gap-5 sm:grid-cols-2">
                    <x-ui.field label="City" name="city" :value="$location->city" required/>
                    <x-ui.field label="Flag" name="flag" :value="$location->flag"
                                hint="Optional emoji. Derived from the country code if blank."/>
                </div>

                <x-ui.field label="Display name" name="display_name" :value="$location->display_name"
                            required hint="What customers see, e.g. United States — New York"/>

                <x-ui.field label="Sort order" name="sort_order" type="number"
                            :value="$location->sort_order ?? 0"
                            hint="Lower sorts first in the location picker."/>

                <label class="flex cursor-pointer items-center gap-2.5 select-none">
                    <input type="checkbox" name="is_active" value="1"
                           @checked(old('is_active', $location->is_active ?? true))
                           class="h-4 w-4 rounded border-line-strong bg-abyss text-electric-500
                                  focus:ring-2 focus:ring-electric-500/40 focus:ring-offset-0">
                    <span class="text-sm text-silver-300">Active</span>
                </label>

                {{-- Sets expectations: active is necessary but not sufficient. --}}
                <p class="text-xs text-silver-500">
                    An active location is still hidden from customers until at least one of its
                    servers is online and under capacity.
                </p>

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

</x-layouts.admin>