{{-- Expects: $customers, $field (the wire:model name), $label, optional $hint and $optional. --}}
<div>
    <x-label for="{{ $field }}-search" value="{{ $label }}" />
    <x-input id="{{ $field }}-search" type="text" class="mt-1 block w-full" wire:model.live.debounce.300ms="customerSearch" placeholder="{{ __('Type to find an organisation') }}" />
    <select id="{{ $field }}" wire:model="{{ $field }}" aria-label="{{ $label }}" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
        <option value="">{{ ($optional ?? true) ? __('None') : __('Choose an organisation') }}</option>
        @foreach ($customers as $customer)
            <option value="{{ $customer->id }}">{{ $customer->lifecycle === 'active' ? $customer->name : $customer->name.' ('.__(\App\Models\Customer::LIFECYCLES[$customer->lifecycle] ?? $customer->lifecycle).')' }}</option>
        @endforeach
    </select>
    @isset($hint)
        <p class="mt-1 text-xs text-slate-400">{{ $hint }}</p>
    @endisset
    <x-input-error for="{{ $field }}" class="mt-2" />
</div>