{% load static %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

{{ form.media }}
<script type="text/javascript" src="{% static 'js/location.js' %}"></script>

<style>
#map{
	height:24rem;
	margin-top:auto;
	margin-bottom:auto;
}
input{
	width:inherit;
}
.form-group{
	margin-top:1rem;
	margin-bottom:1rem;
}
</style>

<div id="location" class="container container-table" data-map-options="{{ map_options }}" data-marker-options="{{ marker_options }}">
	<div class="row justify-content-center my-auto mx-auto bg-light">
			<div id="map" class="col-12 col-sm-6">
			<!-- Map will be embedded here -->
			</div>
			<div id="location_details" class="col-12 col-sm-6 my-auto" style="display:none">
				<form id="location_form" action="" method="POST">
					{% csrf_token %}
					{{form.place_id.as_hidden}}
					<div class="form-row">
						<div class="form-group col-6 col-sm-12">
							{{form.place}}
						</div>
						<div class="form-group col-6 col-sm-12">
							{{form.city}}
						</div>
					</div>
					<div class="form-row">
						<div class=" form-group col-6 col-sm-12">
							{{form.state}}
						</div>
						<div class="form-group col-6 col-sm-12">
							{{form.country}}
						</div>
					</div>
					<div class="form-row">
						<div class="form-group col-6 col-sm-12">
							{{form.latitude}}
						</div>
						<div class="form-group col-6 col-sm-12">
							{{form.longitude}}
						</div>
					</form>
				</div>
			</div>
	</div>
	<div class="row justify-content-center">
		<div class="row">
			<div class="form-group pr-2 pt-1">
				{{form.location}}
			</div>
			<div class="form-group pt-1">
				<button class="btn btn-primary btn-sm" name="button" onclick="enable_and_submit()">Submit Location</button>
			</div>
		</div>
		
	</div>
</div>

<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', initAutocomplete); // Function that will be called when the window first loads
</script>