{# Map functionality is now handled by the map Stimulus controller #}

<div class="row pt-4 mb-4" {{ stimulus_controller('map') }} >
	<h5>Géolocalisation</h5>
	<div class="col-md-8">
		<div id="mapcontainer" 
			data-map-target="map" 
			data-default-map-icon-url="{{ asset('img/icons/defaultMapIcon.png') }}"
			style="height:300px;">&nbsp;
		</div>
	</div>
	<div class="col-md-4">
		<div class="col-md-12">
			<div class="form-floating">
				<input type="text" name="form[{{mapable.itemPrefix}}GeoX|float]" class="form-control" id="input-GeoX" placeholder="{{mapable.geoX}}" value="{{mapable.geoX}}">
				<label for="input-GeoX">GeoX</label>
			</div>
		</div>
		<div class="col-md-12">
			<div class="form-floating">
				<input type="text" name="form[{{mapable.itemPrefix}}GeoY|float]" class="form-control" id="input-GeoY" placeholder="{{mapable.geoY}}" value="{{mapable.geoY}}">
				<label for="input-GeoY">GeoY</label>
			</div>
		</div>
		<div class="col-md-12">
			<div class="form-floating">
				<input type="text" name="form[{{mapable.itemPrefix}}GeoZoom|int]" class="form-control" id="input-GeoZoom" placeholder="{{mapable.geoZoom}}" value="{{mapable.geoZoom}}">
				<label for="input-GeoZoom">Zoom</label>
			</div>
		</div>

		<div class="col-md-12 text-end mt-4">
			<button class="btn btn-info btn-lg" id="mapAddressSearch" type="button">
				Rechercher la géolocalisation
			</button>
		</div>
	</div>
</div>