@props([
    'labels' => true,
    'model' => 'model',
    'direction' => 'col',
    'colsize' => 12,
    'copyToCb' => null,
])

<div class="row gy-1">
    <div @class(["col-sm-$colsize"])>
        <x-ui.input :label="$labels? __('Line 1') : ''"
            model="{{ $model.'.line1' }}"
            :placeholder="__('Line 1')"
            :direction="$direction"
            :copy-to-cb="$copyToCb"
        />
    </div>
    <div @class(["col-sm-$colsize"])>
        <x-ui.input :label="$labels? __('Line 2') : ''"
            model="{{ $model.'.line2' }}"
            :placeholder="__('Line 2')"
            :direction="$direction"
            :copy-to-cb="$copyToCb"
        />
    </div>
    <div @class(["col-sm-$colsize"])>
        <x-ui.input :label="$labels? __('Zip Code') : ''"
            wire:key="address-zip-code-{{ $model }}"
            wire:model.debounce.300ms="{{ $model.'.zip_code' }}" 
            :autocomplete-results="$this->getAddressAutocompleteResults($model.'.zip_code')"
            :autocomplete-value-model="$model.'.city'"
            :placeholder="__('Zip Code')" 
            :direction="$direction"
            autocomplete="{{ time() }}"
            :copy-to-cb="$copyToCb"
        />
    </div>
    <div @class(["col-sm-$colsize"])>
        <x-ui.input :label="$labels? __('City') : ''"
            wire:key="address-city-{{ $model }}"
            wire:model.debounce.300ms="{{ $model.'.city' }}" 
            :autocomplete-results="$this->getAddressAutocompleteResults($model.'.city')"
            :autocomplete-model="$model.'.zip_code'"
            :autocomplete-value-model="$model.'.city'"
            :placeholder="__('City')" 
            :direction="$direction"
            autocomplete="{{ time() }}"
            :copy-to-cb="$copyToCb"
        />
    </div>
    <div @class(["col-sm-$colsize"])>
        <x-ui.select :label="$labels? __('Country') : ''" model="{{ $model.'.country' }}" :placeholder="__('Country')" 
            :options="$this->country_codes" select2search="1" :direction="$direction" />
    </div>
</div>