@php($editing = $city->exists)
<x-admin.layout :title="$editing ? __('Edit :name', ['name' => $city->name]) : __('New city')">
    <x-slot:head>@vite('resources/js/zone-map.js')</x-slot:head>

    <x-admin.page-header :title="$editing ? __('Edit :name', ['name' => $city->name]) : __('New city')" :back="route('admin.cities.index')" />

    <form method="POST" action="{{ $editing ? route('admin.cities.update', $city) : route('admin.cities.store') }}" class="grid max-w-5xl grid-cols-1 gap-6 lg:grid-cols-3">
        @csrf
        @if ($editing) @method('PUT') @endif

        <x-admin.card :title="__('Centre')" :padding="false" class="lg:col-span-2">
            <div id="city-center-picker" class="h-96"
                 data-lat-input="latitude" data-lng-input="longitude"
                 data-center="{{ json_encode($center) }}"
                 data-tile-url="{{ setting('map.tile_url') }}"
                 data-tile-attribution="{{ setting('map.tile_attribution') }}"></div>
            <div class="grid gap-4 border-t border-gray-200 px-5 py-4 sm:grid-cols-2 dark:border-gray-800">
                <x-admin.input name="latitude" type="number" step="any" :label="__('Latitude')" :value="$city->latitude" required />
                <x-admin.input name="longitude" type="number" step="any" :label="__('Longitude')" :value="$city->longitude" required />
            </div>
            <p class="px-5 pb-4 text-sm text-gray-500 dark:text-gray-400">{{ __('Click the map or drag the pin: maps for this city open here.') }}</p>
        </x-admin.card>

        <div class="space-y-6">
            <x-admin.card :title="__('Details')">
                <div class="space-y-4">
                    <x-admin.input name="name" :label="__('Name')" :value="$city->name" required />
                    <x-admin.searchable-select name="country_id" :label="__('Country')" :options="$countries" :value="$city->country_id" :placeholder="__('Choose a country')" required />
                    <x-admin.timezone-select :label="__('Timezone')" :value="$city->timezone" :placeholder="__('Same as the country')"
                                             :hint="__('Set it when the country spans several timezones.')" />
                </div>
            </x-admin.card>

            <x-admin.card>
                <x-admin.toggle name="is_active" :label="__('Active')" :checked="$city->is_active" :hint="__('Drivers can only pick active cities when they sign up.')" />
                <div class="mt-5 flex gap-2">
                    <x-admin.button type="submit">{{ $editing ? __('Save changes') : __('Create city') }}</x-admin.button>
                    <x-admin.button variant="secondary" :href="route('admin.cities.index')">{{ __('Cancel') }}</x-admin.button>
                </div>
            </x-admin.card>
        </div>
    </form>
</x-admin.layout>