@php
    $required = '<span class="text-red-600 dark:text-red-400">*</span>';
    $textInput =
        'mt-2 min-h-11 w-full rounded-xl border-zinc-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100';
    $textareaInput =
        'mt-2 min-h-28 w-full rounded-xl border-zinc-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100';
    $labelClass = 'text-sm font-semibold text-zinc-900 dark:text-zinc-100';
@endphp

<div class="grid gap-5 md:grid-cols-3">
    <div>
        <label class="{{ $labelClass }}" for="alpha2">Alpha-2 {!! $required !!}</label>
        <input id="alpha2" name="alpha2" maxlength="2" value="{{ old('alpha2', $country->alpha2) }}"
            class="{{ $textInput }} uppercase" placeholder="GB" />
        @error('alpha2')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label class="{{ $labelClass }}" for="alpha3">Alpha-3 {!! $required !!}</label>
        <input id="alpha3" name="alpha3" maxlength="3" value="{{ old('alpha3', $country->alpha3) }}"
            class="{{ $textInput }} uppercase" placeholder="GBR" />
        @error('alpha3')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label class="{{ $labelClass }}" for="numeric">Numeric {!! $required !!}</label>
        <input id="numeric" name="numeric" maxlength="3" value="{{ old('numeric', $country->numeric) }}"
            class="{{ $textInput }}" placeholder="826" />
        @error('numeric')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label class="{{ $labelClass }}" for="name">Canonical ISO name {!! $required !!}</label>
        <input id="name" name="name" value="{{ old('name', $country->name) }}" class="{{ $textInput }}" />
        @error('name')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label class="{{ $labelClass }}" for="official_name">Official name</label>
        <input id="official_name" name="official_name" value="{{ old('official_name', $country->official_name) }}"
            class="{{ $textInput }}" />
        @error('official_name')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label class="{{ $labelClass }}" for="common_name">Common name</label>
        <input id="common_name" name="common_name" value="{{ old('common_name', $country->common_name) }}"
            class="{{ $textInput }}" />
        @error('common_name')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label class="{{ $labelClass }}" for="display_name">Display name override</label>
        <input id="display_name" name="display_name" value="{{ old('display_name', $country->display_name) }}"
            class="{{ $textInput }}" />
        @error('display_name')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label class="{{ $labelClass }}" for="native_name">Native name</label>
        <input id="native_name" name="native_name" value="{{ old('native_name', $country->native_name) }}"
            class="{{ $textInput }}" />
        @error('native_name')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label class="{{ $labelClass }}" for="capital">Capital</label>
        <input id="capital" name="capital" value="{{ old('capital', $country->capital) }}"
            class="{{ $textInput }}" />
        @error('capital')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>
</div>

<div class="mt-8 border-t border-zinc-200 pt-6 dark:border-zinc-800">
    <h2 class="text-base font-semibold text-zinc-900 dark:text-zinc-100">Regional and sovereignty metadata</h2>
    <div class="mt-4 grid gap-5 md:grid-cols-3">
        <div>
            <label class="{{ $labelClass }}" for="iso_status">ISO lifecycle status {!! $required !!}</label>
            <select id="iso_status" name="iso_status" class="{{ $textInput }}">
                @foreach (\Modules\Countries\Support\Iso3166::statuses() as $status)
                    <option value="{{ $status }}" @selected(old('iso_status', $country->iso_status ?? 'official') === $status)>
                        {{ str($status)->replace('_', ' ')->title() }}</option>
                @endforeach
            </select>
            @error('iso_status')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="sovereignty_status">Sovereignty status</label>
            <input id="sovereignty_status" name="sovereignty_status"
                value="{{ old('sovereignty_status', $country->sovereignty_status) }}" class="{{ $textInput }}" />
            @error('sovereignty_status')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="continent">Continent</label>
            <input id="continent" name="continent" value="{{ old('continent', $country->continent) }}"
                class="{{ $textInput }}" />
            @error('continent')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="region">Region</label>
            <input id="region" name="region" value="{{ old('region', $country->region) }}"
                class="{{ $textInput }}" />
            @error('region')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="subregion">Subregion</label>
            <input id="subregion" name="subregion" value="{{ old('subregion', $country->subregion) }}"
                class="{{ $textInput }}" />
            @error('subregion')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="intermediate_region">Intermediate region</label>
            <input id="intermediate_region" name="intermediate_region"
                value="{{ old('intermediate_region', $country->intermediate_region) }}"
                class="{{ $textInput }}" />
            @error('intermediate_region')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>
    </div>
</div>

<div class="mt-8 border-t border-zinc-200 pt-6 dark:border-zinc-800">
    <h2 class="text-base font-semibold text-zinc-900 dark:text-zinc-100">Logistics, billing and web metadata</h2>
    <div class="mt-4 grid gap-5 md:grid-cols-3">
        <div>
            <label class="{{ $labelClass }}" for="flag_emoji">Flag emoji</label>
            <input id="flag_emoji" name="flag_emoji" value="{{ old('flag_emoji', $country->flag_emoji) }}"
                class="{{ $textInput }}" />
            @error('flag_emoji')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="calling_code">Calling code</label>
            <input id="calling_code" name="calling_code" value="{{ old('calling_code', $country->calling_code) }}"
                class="{{ $textInput }}" placeholder="+44" />
            @error('calling_code')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="tld">Top-level domain</label>
            <input id="tld" name="tld" value="{{ old('tld', $country->tld) }}"
                class="{{ $textInput }}" placeholder=".uk" />
            @error('tld')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="currency_code">Currency code</label>
            <input id="currency_code" name="currency_code" maxlength="3"
                value="{{ old('currency_code', $country->currency_code) }}" class="{{ $textInput }} uppercase"
                placeholder="GBP" />
            @error('currency_code')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="currency_name">Currency name</label>
            <input id="currency_name" name="currency_name"
                value="{{ old('currency_name', $country->currency_name) }}" class="{{ $textInput }}" />
            @error('currency_name')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="currency_symbol">Currency symbol</label>
            <input id="currency_symbol" name="currency_symbol"
                value="{{ old('currency_symbol', $country->currency_symbol) }}" class="{{ $textInput }}" />
            @error('currency_symbol')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="latitude">Latitude</label>
            <input id="latitude" name="latitude" type="number" step="0.0000001"
                value="{{ old('latitude', $country->latitude) }}" class="{{ $textInput }}" />
            @error('latitude')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="longitude">Longitude</label>
            <input id="longitude" name="longitude" type="number" step="0.0000001"
                value="{{ old('longitude', $country->longitude) }}" class="{{ $textInput }}" />
            @error('longitude')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="sort_order">Sort order</label>
            <input id="sort_order" name="sort_order" type="number" min="0"
                value="{{ old('sort_order', $country->sort_order ?? 0) }}" class="{{ $textInput }}" />
            @error('sort_order')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="ioc_code">IOC code</label>
            <input id="ioc_code" name="ioc_code" value="{{ old('ioc_code', $country->ioc_code) }}"
                class="{{ $textInput }} uppercase" />
            @error('ioc_code')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="fifa_code">FIFA code</label>
            <input id="fifa_code" name="fifa_code" value="{{ old('fifa_code', $country->fifa_code) }}"
                class="{{ $textInput }} uppercase" />
            @error('fifa_code')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="postal_code_format">Postal-code format</label>
            <input id="postal_code_format" name="postal_code_format"
                value="{{ old('postal_code_format', $country->postal_code_format) }}"
                class="{{ $textInput }}" />
            @error('postal_code_format')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div class="md:col-span-3">
            <label class="{{ $labelClass }}" for="flag_svg_url">Flag SVG URL</label>
            <input id="flag_svg_url" name="flag_svg_url" value="{{ old('flag_svg_url', $country->flag_svg_url) }}"
                class="{{ $textInput }}" />
            @error('flag_svg_url')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div class="md:col-span-3">
            <label class="{{ $labelClass }}" for="flag_png_url">Flag PNG URL</label>
            <input id="flag_png_url" name="flag_png_url" value="{{ old('flag_png_url', $country->flag_png_url) }}"
                class="{{ $textInput }}" />
            @error('flag_png_url')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>
    </div>
</div>

<div class="mt-8 border-t border-zinc-200 pt-6 dark:border-zinc-800">
    <h2 class="text-base font-semibold text-zinc-900 dark:text-zinc-100">JSON metadata</h2>
    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Use valid JSON. Examples: languages as <code
            class="rounded bg-zinc-100 px-1 dark:bg-zinc-800">["en"]</code>, timezones as <code
            class="rounded bg-zinc-100 px-1 dark:bg-zinc-800">["Europe/London"]</code>.</p>
    <div class="mt-4 grid gap-5 md:grid-cols-3">
        <div>
            <label class="{{ $labelClass }}" for="languages">Languages JSON</label>
            <textarea id="languages" name="languages" class="{{ $textareaInput }}">{{ old('languages', $country->languages ? json_encode($country->languages, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) : '') }}</textarea>
            @error('languages')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="timezones">Timezones JSON</label>
            <textarea id="timezones" name="timezones" class="{{ $textareaInput }}">{{ old('timezones', $country->timezones ? json_encode($country->timezones, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) : '') }}</textarea>
            @error('timezones')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="metadata">Metadata JSON</label>
            <textarea id="metadata" name="metadata" class="{{ $textareaInput }}">{{ old('metadata', $country->metadata ? json_encode($country->metadata, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) : '') }}</textarea>
            @error('metadata')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>
    </div>
</div>

<div class="mt-8 border-t border-zinc-200 pt-6 dark:border-zinc-800">
    <h2 class="text-base font-semibold text-zinc-900 dark:text-zinc-100">Operational support</h2>
    <div class="mt-4 grid gap-5 md:grid-cols-3">
        <label
            class="flex items-center gap-3 rounded-2xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-950">
            <input type="hidden" name="is_active" value="0" />
            <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $country->exists ? $country->is_active : true))
                class="rounded border-zinc-300 text-blue-600 focus:ring-blue-500" />
            <span><span class="block text-sm font-semibold">Supported {!! $required !!}</span><span
                    class="block text-xs text-zinc-500">Available in WMS selectors and workflows.</span></span>
        </label>

        <label
            class="flex items-center gap-3 rounded-2xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-950">
            <input type="hidden" name="independent" value="0" />
            <input type="checkbox" name="independent" value="1" @checked(old('independent', $country->independent))
                class="rounded border-zinc-300 text-blue-600 focus:ring-blue-500" />
            <span><span class="block text-sm font-semibold">Independent state</span><span
                    class="block text-xs text-zinc-500">Used for reporting and compliance filters.</span></span>
        </label>

        <label
            class="flex items-center gap-3 rounded-2xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-950">
            <input type="hidden" name="un_member" value="0" />
            <input type="checkbox" name="un_member" value="1" @checked(old('un_member', $country->un_member))
                class="rounded border-zinc-300 text-blue-600 focus:ring-blue-500" />
            <span><span class="block text-sm font-semibold">UN member</span><span
                    class="block text-xs text-zinc-500">Optional global reference attribute.</span></span>
        </label>

        <div>
            <label class="{{ $labelClass }}" for="source">Source</label>
            <input id="source" name="source" value="{{ old('source', $country->source) }}"
                class="{{ $textInput }}" />
            @error('source')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="source_version">Source version</label>
            <input id="source_version" name="source_version"
                value="{{ old('source_version', $country->source_version) }}" class="{{ $textInput }}" />
            @error('source_version')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="{{ $labelClass }}" for="last_synced_at">Last synced at</label>
            <input id="last_synced_at" name="last_synced_at" type="datetime-local"
                value="{{ old('last_synced_at', $country->last_synced_at?->format('Y-m-d\\TH:i')) }}"
                class="{{ $textInput }}" />
            @error('last_synced_at')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div class="md:col-span-3">
            <label class="{{ $labelClass }}" for="address_format">Address format</label>
            <textarea id="address_format" name="address_format" class="{{ $textareaInput }}">{{ old('address_format', $country->address_format) }}</textarea>
            @error('address_format')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>
    </div>
</div>