@php
    $address = $address ?? null;
    $inputClass = 'mt-2 h-12 w-full rounded-xl border-zinc-300 bg-white px-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white';
    $countryFieldId = 'address_country_id_' . md5(($defaultLabel ?? 'address') . '_' . ($address?->id ?? 'new'));
@endphp

<div class="grid gap-5 md:grid-cols-2">
    <div>
        <label for="address_label" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Label</label>
        <input id="address_label" name="label" value="{{ old('label', $address?->label ?? $defaultLabel ?? 'Registered office') }}" class="{{ $inputClass }}">
    </div>

    <div>
        <label for="address_attention" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Attention</label>
        <input id="address_attention" name="attention" value="{{ old('attention', $address?->attention) }}" class="{{ $inputClass }}">
    </div>

    <div class="md:col-span-2">
        <label for="address_line_1" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Address line 1</label>
        <input id="address_line_1" name="line_1" value="{{ old('line_1', $address?->line_1) }}" class="{{ $inputClass }}" required>
    </div>

    <div>
        <label for="address_line_2" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Address line 2</label>
        <input id="address_line_2" name="line_2" value="{{ old('line_2', $address?->line_2) }}" class="{{ $inputClass }}">
    </div>

    <div>
        <label for="address_line_3" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Address line 3</label>
        <input id="address_line_3" name="line_3" value="{{ old('line_3', $address?->line_3) }}" class="{{ $inputClass }}">
    </div>

    <div>
        <label for="address_locality" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Town / City</label>
        <input id="address_locality" name="locality" value="{{ old('locality', $address?->locality) }}" class="{{ $inputClass }}" required>
    </div>

    <div>
        <label for="address_administrative_area" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">County / State / Region</label>
        <input id="address_administrative_area" name="administrative_area" value="{{ old('administrative_area', $address?->administrative_area) }}" class="{{ $inputClass }}">
    </div>

    <div>
        <label for="address_postal_code" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Postcode / ZIP</label>
        <input id="address_postal_code" name="postal_code" value="{{ old('postal_code', $address?->postal_code) }}" class="{{ $inputClass }}">
    </div>

    <div class="wms-select2-field">
        <label for="{{ $countryFieldId }}" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">
            Country
        </label>

        <select
            id="{{ $countryFieldId }}"
            name="country_id"
            data-wms-select2
            data-placeholder="Search and select country"
            class="wms-select2-control"
            required
        >
            <option value=""></option>

            @foreach ($countries as $country)
                <option
                    value="{{ $country->id }}"
                    @selected((int) old('country_id', $address?->country_id) === $country->id)
                >
                    {{ $country->display_name ?: $country->common_name ?: $country->name }}
                </option>
            @endforeach
        </select>
    </div>
</div>

<div class="mt-6">
    <button class="h-12 rounded-xl bg-green-600 px-5 text-sm font-semibold text-white shadow-sm shadow-green-950/20 transition hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/40">
        Save address
    </button>
</div>