@props([
    'uid' => uniqid(),
    'mapId' => 'geo_map',
    'mapHeight' => '400px',
    'searchPlaceholder' => 'Buscar ubicación',
])

<x-vuexy-admin::card.basic title="Ubicación">
    <x-vuexy-admin::form.textarea :uid="$uid" name="location_search" label="Dirección de búsqueda" :placeholder="$searchPlaceholder" rows="2" button-icon="ti ti-map-pin-search" onClickButton="clearCoordinates()" />
    <div class="row">
        <x-vuexy-admin::form.input :uid="$uid" model="lat" label="Latitud" type="number" step="0.000001" max="90" min="-90" parentClass="col-6" align="center" size="small" />
        <x-vuexy-admin::form.input :uid="$uid" model="lng" label="Longitud" type="number" step="0.000001" max="180" min="-180" parentClass="col-6" align="center" size="small" />
    </div>
    <div style="height: {{ $mapHeight }}; z-index: 1;" id="locationMap_{{ $uid }}"></div>
</x-vuexy-admin::card.basic>