@php($editing = $country->exists)
<x-admin.layout :title="$editing ? __('Edit :name', ['name' => $country->name]) : __('New country')">
    <x-admin.page-header :title="$editing ? __('Edit :name', ['name' => $country->name]) : __('New country')" :back="route('admin.countries.index')" />

    <form method="POST" action="{{ $editing ? route('admin.countries.update', $country) : route('admin.countries.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="__('Details')" class="lg:col-span-2">
            <div class="grid gap-5 sm:grid-cols-2">
                <div class="sm:col-span-2"><x-admin.input name="name" :label="__('Name')" :value="$country->name" required /></div>
                <x-admin.input name="iso2" :label="__('ISO code (2 letters)')" :value="$country->iso2" maxlength="2" required :placeholder="__('e.g. US')" />
                <x-admin.input name="iso3" :label="__('ISO code (3 letters)')" :value="$country->iso3" maxlength="3" :placeholder="__('e.g. USA')" />
                <x-admin.input name="phone_code" :label="__('Dialling code')" :value="$country->phone_code" required :placeholder="__('e.g. +1')" />
                <x-admin.input name="flag" :label="__('Flag emoji')" :value="$country->flag" maxlength="16" :placeholder="__('e.g. 🇺🇸')" />
                <x-admin.input name="currency_code" :label="__('Currency code')" :value="$country->currency_code" maxlength="3" required :placeholder="__('e.g. USD')" />
                <x-admin.input name="currency_symbol" :label="__('Currency symbol')" :value="$country->currency_symbol" maxlength="8" required :placeholder="__('e.g. $')" />
                <div class="sm:col-span-2">
                    <x-admin.timezone-select :label="__('Default timezone')" :value="$country->timezone" :placeholder="__('The app timezone')"
                                             :hint="__('Cities without their own timezone use this one.')" />
                </div>
            </div>
        </x-admin.card>

        <x-admin.card class="self-start">
            <x-admin.toggle name="is_active" :label="__('Active')" :checked="$country->is_active" />
            <div class="mt-5 flex gap-2">
                <x-admin.button type="submit">{{ $editing ? __('Save changes') : __('Create country') }}</x-admin.button>
                <x-admin.button variant="secondary" :href="route('admin.countries.index')">{{ __('Cancel') }}</x-admin.button>
            </div>
        </x-admin.card>
    </form>
</x-admin.layout>