{{-- R24: the form scrolls, the title and the buttons do not. This modal is the
     reason the rule exists — with eight fields it was taller than the window and
     its own save button was off the bottom of it. --}}
<x-ui.modal :title="__('edit_customer.title')" :subtitle="__('edit_customer.subtitle')">
    <form id="edit-customer" wire:submit="save" class="space-y-4">
        <div class="grid gap-4 sm:grid-cols-2">
            <x-ui.input name="name" wire:model="name" :label="__('edit_customer.name')" />
            <x-ui.input name="contactName" wire:model="contactName" :label="__('edit_customer.contact')" />
        </div>

        <div class="grid gap-4 sm:grid-cols-2">
            <div>
                <x-ui.input name="email" type="email" wire:model="email" :label="__('edit_customer.email')" />
                {{-- Said before it is done, not after: the address is the portal
                     login and the key everything matching by address uses. --}}
                <p class="mt-1.5 text-xs text-muted">{{ __('edit_customer.email_hint') }}</p>
            </div>
            <x-ui.input name="phone" wire:model="phone" :label="__('edit_customer.phone')" />
        </div>

        <div class="grid gap-4 sm:grid-cols-2">
            <div>
                <label class="text-sm font-medium text-body" for="customerType">{{ __('edit_customer.type') }}</label>
                <select id="customerType" wire:model="customerType"
                        class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-body">
                    {{-- No "nobody asked" option: once somebody has answered, the
                         answer stands until it is replaced by the other one. An
                         empty selection here leaves the record as it was, and the
                         hint says which that is. --}}
                    <option value="">{{ __('edit_customer.type_keep') }}</option>
                    @foreach ($types as $type)
                        <option value="{{ $type }}">{{ __('customer_detail.type_'.$type) }}</option>
                    @endforeach
                </select>
                <p class="mt-1.5 text-xs text-muted">{{ __('edit_customer.type_hint') }}</p>
            </div>

            <div>
                <x-ui.input name="vatId" wire:model="vatId" :label="__('edit_customer.vat_id')" placeholder="ATU12345678" />
                <p class="mt-1.5 text-xs text-muted">{{ __('edit_customer.vat_hint') }}</p>
            </div>
        </div>

        <div>
            <p class="block text-sm font-medium text-body">{{ __('edit_customer.address') }}</p>
            <div class="mt-1.5 space-y-3">
                <x-ui.input name="billingStreet" wire:model="billingStreet" :label="__('settings.billing_street')" />
                <div class="grid gap-3 sm:grid-cols-[140px_minmax(0,1fr)]">
                    <x-ui.input name="billingPostcode" wire:model="billingPostcode" :label="__('settings.billing_postcode')" />
                    <x-ui.input name="billingCity" wire:model="billingCity" :label="__('settings.billing_city')" />
                </div>
                <x-ui.input name="billingCountry" wire:model="billingCountry" :label="__('settings.billing_country')" />
            </div>
        </div>

        <div class="max-w-56">
            <label class="text-sm font-medium text-body" for="locale">{{ __('edit_customer.locale') }}</label>
            <select id="locale" wire:model="locale"
                    class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-body">
                <option value="">{{ __('edit_customer.locale_default') }}</option>
                @foreach ($locales as $code)
                    <option value="{{ $code }}">{{ __('edit_customer.locale_'.$code) }}</option>
                @endforeach
            </select>
            {{-- What it actually decides: the language of the mail they get. --}}
            <p class="mt-1.5 text-xs text-muted">{{ __('edit_customer.locale_hint') }}</p>
        </div>
    </form>

    <x-slot:footer>
        <div class="flex flex-wrap gap-2">
            {{-- form=, because the button now lives outside the <form> it submits:
                 that is the price of a footer that does not scroll away, and it
                 is an HTML attribute rather than a workaround. --}}
            <x-ui.button type="submit" form="edit-customer" variant="primary"
                         wire:loading.attr="disabled" wire:target="save">
                {{ __('edit_customer.save') }}
            </x-ui.button>
            {{-- Livewire.dispatch, not Alpine's: the modal listens for a Livewire
                 event of that name, and the Alpine form silently does nothing. --}}
            <x-ui.button variant="secondary" x-on:click="Livewire.dispatch('closeModal')">
                {{ __('edit_customer.cancel') }}
            </x-ui.button>
        </div>
    </x-slot:footer>
</x-ui.modal>