{{define "location-geocode"}}
<!-- Hidden fields for location data -->
<input type="hidden" id="address-country" name="address-country"/>
<input type="hidden" id="address-postcode" name="address-postcode"/>
<input type="hidden" id="address-place" name="address-place"/>
<input type="hidden" id="address-region" name="address-region"/>
<input type="hidden" id="address-street" name="address-street"/>
<input type="hidden" id="latitude" name="latitude"/>
<input type="hidden" id="longitude" name="longitude"/>
<input type="hidden" id="latlng-accuracy-type" name="latlng-accuracy-type"/>
<input type="hidden" id="latlng-accuracy-value" name="latlng-accuracy-value"/>
<div class="col-md-6">
	<div class="mb-3 position-relative">
		<label for="addressInput" class="form-label">Enter address</label>
		<input type="text" class="form-control" id="address" name="address" 
			   placeholder="Start typing an address (min 3 characters)">
		<div id="suggestions" class="suggestions-container list-group d-none"></div>
	</div>
	<div class="mt-3">
		<!-- Structured Location Display -->
		<div id="locationDisplayContainer" class="mt-4 d-none">
			<h5 class="mb-3">Location Details</h5>
			<div class="location-card p-3 mb-3">
				<div class="location-detail">
					<div class="detail-label">Street Address</div>
					<div id="streetAddress" class="detail-value">-</div>
				</div>
				
				<div class="location-detail">
					<div class="detail-label">Post Code</div>
					<div id="postCode" class="detail-value">-</div>
				</div>
				
				<div class="location-detail">
					<div class="detail-label">District/Place</div>
					<div id="district" class="detail-value">-</div>
				</div>
				
				<div class="location-detail">
					<div class="detail-label">Region/State</div>
					<div id="region" class="detail-value">-</div>
				</div>
				
				<div class="location-detail">
					<div class="detail-label">Country</div>
					<div id="country" class="detail-value">-</div>
				</div>
			</div>
		</div>
	</div>
</div>
{{end}}