@props([
    'prefix' => '',
    'listIndex' => null,
    'countryId' => null,
    'cityId' => null,
    'districtId' => null,
    'neighbourhoodId' => null,
    'required' => false,
    'showCountry' => true,
    'showNeighbourhood' => true,
])

<div
    {{ $attributes->merge(['class' => 'location-select-group']) }}
    x-data="locationSelect(@js([
        'prefix' => $prefix,
        'listIndex' => $listIndex,
        'countryId' => $countryId,
        'cityId' => $cityId,
        'districtId' => $districtId,
        'neighbourhoodId' => $neighbourhoodId,
        'required' => $required,
        'showCountry' => $showCountry,
        'showNeighbourhood' => $showNeighbourhood,
        'messages' => [
            'country_placeholder' => __('pages.personal_info.location.country_placeholder'),
            'city_placeholder' => __('pages.personal_info.location.city_placeholder'),
            'district_placeholder' => __('pages.personal_info.location.district_placeholder'),
            'neighbourhood_placeholder' => __('pages.personal_info.location.neighbourhood_placeholder'),
            'search_placeholder' => __('pages.personal_info.location.search_placeholder'),
            'empty' => __('pages.personal_info.location.empty'),
        ],
    ]))"
>
    @include('platform.partials.location-select-fields')
</div>