<div class="wp-rengine-admin">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
					  xml:space="preserve">
				<path fill="#474A9F" d="M23.661,13.982c0.078,0.189,0.116,0.439,0.116,0.749c0,0.144-0.022,0.426-0.065,0.847
					c-0.521-0.298-0.782-0.782-0.782-1.447c0-0.365,0.116-0.548,0.349-0.548C23.445,13.583,23.572,13.717,23.661,13.982z M32.977,19.406
					c0.283,0.919,0.619,1.841,0.733,2.786c0.142,1.173-0.359,2.24-1.366,2.826c-2.014,1.173-3.167,2.843-3.699,5.099
					c-0.341,1.452-1.7,2.333-3.239,2.36c-2.5,0.042-3.379,0-5.014,1.247c-0.857,0.652-1.7,1.27-2.873,1.276
					c-1.027,0.006-1.75-0.239-2.522-0.96c-1.352-1.266-2.927-1.69-4.778-1.59c-2.366,0.125-3.401-0.714-4.12-2.957
					c-0.134-0.418-0.273-0.834-0.401-1.254c-0.261-0.851-0.746-1.534-1.482-2.041c-0.525-0.362-1.044-0.735-1.555-1.117
					c-1.228-0.917-1.768-2.359-1.283-3.798c1.096-3.263,1.101-3.074-0.001-6.347c-0.475-1.414-0.166-2.758,1.233-3.758
					c2.197-1.57,2.829-2.065,3.632-4.891C6.71,4.641,7.994,3.768,9.695,3.74c0.043-0.001,0.088-0.005,0.131,0.001
					c2.124,0.301,3.886-0.396,5.51-1.773c1.336-1.134,3.053-1.062,4.315-0.021c1.436,1.186,2.529,1.95,5.163,1.81
					c0.493-0.026,1.022,0.003,1.502,0.132c1.055,0.282,1.817,0.953,2.256,1.966c0.08,0.18,0.158,0.367,0.195,0.559
					c0.39,2.048,1.531,3.497,3.308,4.597c1.612,0.998,1.998,2.449,1.42,4.245c-0.167,0.521-0.335,1.043-0.514,1.562
					C32.687,17.681,32.71,18.535,32.977,19.406z M26.42,15.528c0-0.188-0.11-0.282-0.332-0.282c-0.133,0-0.266,0.047-0.398,0.142
					c-0.133,0.094-0.294,0.186-0.482,0.275c0.01-0.145,0.017-0.277,0.017-0.399v-0.332c0-0.865-0.178-1.549-0.533-2.054
					c-0.354-0.504-0.887-0.754-1.597-0.749c-0.708,0.006-1.268,0.225-1.678,0.658c-0.41,0.432-0.615,0.974-0.615,1.628
					c0,0.655,0.235,1.27,0.707,1.845c0.471,0.577,1.11,0.921,1.92,1.031c-0.311,1.507-0.71,2.699-1.198,3.575
					c-0.665,1.197-1.44,1.796-2.328,1.796c-0.786,0-1.418-0.643-1.895-1.929c0.266-0.543,0.499-1.092,0.699-1.646
					c0.586-1.639,0.88-3.02,0.88-4.14c0-0.542-0.152-0.98-0.456-1.313c-0.306-0.333-0.752-0.498-1.338-0.498
					c-0.788,0-1.355,0.229-1.706,0.689c-0.349,0.459-0.523,1.055-0.523,1.787c0,1.972,0.222,3.734,0.665,5.286
					c-0.875,1.164-1.806,1.747-2.793,1.747c-0.211,0-0.393-0.033-0.548-0.099c-0.399-0.178-0.604-0.51-0.615-0.998
					c0.011-1.02,0.333-2.849,0.964-5.486c0.122-0.51,0.184-0.925,0.184-1.247c0-0.742-0.146-1.33-0.433-1.762
					c-0.354-0.543-0.915-0.814-1.68-0.814c-0.764,0-1.418,0.2-1.96,0.598C8.781,13.224,8.5,13.722,8.5,14.331
					c0,0.3,0.085,0.449,0.257,0.449s0.324-0.044,0.458-0.132c0.133-0.089,0.262-0.184,0.391-0.283c0.127-0.1,0.254-0.194,0.382-0.283
					c0.127-0.089,0.268-0.133,0.424-0.133c0.454,0,0.682,0.449,0.682,1.346c0,0.41-0.084,0.967-0.25,1.67
					c-0.167,0.705-0.391,1.603-0.674,2.693c-0.282,1.093-0.424,1.766-0.424,2.021c0,1.064,0.292,1.842,0.873,2.335
					c0.583,0.493,1.367,0.739,2.353,0.739c1.441,0,2.727-0.714,3.857-2.144c0.676,1.43,1.551,2.144,2.626,2.144
					c1.297-0.011,2.389-0.448,3.274-1.313c0.743-0.742,1.342-1.828,1.796-3.257c0.244-0.743,0.438-1.763,0.583-3.059
					c0.398-0.144,0.717-0.355,0.955-0.632C26.301,16.216,26.42,15.895,26.42,15.528z M17.983,14.796
					c-0.071-0.176-0.18-0.266-0.324-0.266c-0.288,0-0.432,0.449-0.432,1.346c0,0.899,0.077,1.802,0.232,2.71
					c0.421-1.098,0.631-2.162,0.631-3.192C18.091,15.173,18.055,14.974,17.983,14.796z"/>
				</svg>
				<h2><strong>Start/End Locations</strong></h2>
			</div>
		</div>
	</div>
</div>
<form action="{{panel_url('WPRengine::wp-rengine-places')}}" method="post" class="form-inline" >
<div class="wp-rengine-admin">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h3>Choose location type</h3>
				<div class="row">
					<div class="form-group col-sm-12 padd10t">
						<label for="wpRengineLocationsMode">Locations search form Mode: </label>
						{% if wpRengineLocationsMode != "auto" %}
							 <input type="radio" name="wpRengineLocationsMode" id="wpRengineLocationsMode" value="auto" > Auto (Google Places Autocomplete)
							 <input type="radio" name="wpRengineLocationsMode" id="wpRengineLocationsMode" value="predefined" checked="checked"> Predefined (default)<br>

						{% else %}
							<input type="radio" name="wpRengineLocationsMode" id="wpRengineLocationsMode" value="auto" checked="checked"> Auto (Google Places Autocomplete)

							<input type="radio" name="wpRengineLocationsMode" id="wpRengineLocationsMode" value="predefined"  > Predefined (default)<br>
							<p class="label label-warning"> Google maps api Key REQUIRED in auto mode</p>
							<div class="padd20t"><label for="">Paste Google Maps API KEY (get it <a href="https://cloud.google.com/maps-platform" target="_blank">here</a>):</label> <input type="text" class="form-control" name="wpRengineMapsApiKey" id="wpRengineMapsApiKey" value="{{wpRengineMapsApiKey}}"></div>
							 {% endif %}
						<p class="help-block">By choosing auto autocomplete mode (google places locations) there is always the risk, user to put an out of range location!</p>
					</div>
				</div>
				<div class="row padd10t">
					<div class="form-group col-sm-12 padd10t">
						<label for="wpRengineCurrentMode">Client Currenct Location Mode: </label>
						{% if wpRengineCurrentMode == "true" %}
							 <input type="radio" name="wpRengineCurrentMode" id="wpRengineCurrentMode" value="true" checked="checked"> Yes
							 <input type="radio" name="wpRengineCurrentMode" id="wpRengineCurrentMode" value="false" > No (default)<br>
						{% else %}
							<input type="radio" name="wpRengineCurrentMode" id="wpRengineCurrentMode" value="true" > Yes
							 <input type="radio" name="wpRengineCurrentMode" id="wpRengineCurrentMode" value="false" checked="checked"> No (default)<br>
							 {% endif %}
						<p class="help-block">The use of currenct location mode is only available for mobile devices or laptops/pcs that support location services and support only HTTPS websites!</p>
					</div>
				</div>
				<div class="row">
					<div class="form-group col-sm-12 padd10t">
						<label for="">Results biased towards the given coordinates:</label>
						<input type="text" class="form-control" name="base-coordinates" value="{{baseCoordinates}}" placeholder="(lat, lng)">
						<p class="help-block">Type coordinates (with the brackets), and a radius in meters that you want the autocomplete results to be biased. </p>
					</div>
					<div class="form-group col-sm-12 padd10t">
						<label for="">Radius (in meters) from the given coordinates:</label>
						<input type="text" class="form-control" name="base-radius" value="{{baseRadius}}" placeholder="10000">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="wp-rengine-admin">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h3>Predefined Locations</h3>
				<p class="label label-info "> You can add here predifined locations. If you don't add anything, plugin will take as predifined locations all Users/affiliates with "DESK" role from workadu's platform (<a href="https://app.workadu.com/companyadmin/users" target="_blank"> See platform locations</a>) </p>
				{% for parking in parkings %}
					<div class="parking-group row padd20t">
						<div class="form-group col-md-6">
							<label for="parking_name[{{loop.index}}]">Location Name: </label>
							<input type="text" class="form-control" name="parking_name[{{loop.index}}]" value="{{parking.parking_name}}" placeholder="parking name">
						</div>
						<div class="form-group col-md-4">
							<label for="parking_coordinates[{{loop.index}}]">Location Coordinates: </label>
							<input type="text" class="form-control" name="parking_coordinates[{{loop.index}}]" value="{{parking.parking_coordinates}}" placeholder="(lat,lng)">
						</div>
						<div class="col-md-2 padd20t">
							<a href="#" class="parking-row-add"><span class="dashicons dashicons-plus"></span></a>
							<a href="#" class="parking-row-del"><span class="dashicons dashicons-minus"></span></a>
						</div>
					</div>
				{% else %}
					<div class="parking-group row padd20t">
						<div class="form-group col-md-6">
							<label for="parking_name[1]">Parking Name</label>
							<input type="text" class="form-control" name="parking_name[1]" value="" placeholder="parking name">
						</div>
						<div class="form-group col-md-4">
							<label for="parking_coordinates[1]">Parking Coordinates</label>
							<input type="text" class="form-control" name="parking_coordinates[1]" value="" placeholder="(lat,lng)">
						</div>
						<div class="col-md-2 padd20t">
							<label for="parking-row-add">&nbsp;</label>
							<a href="#" class="parking-row-add"><span class="dashicons dashicons-plus"></span></a>
							<a href="#" class="parking-row-del"><span class="dashicons dashicons-minus"></span></a>
						</div>
					</div>
				{% endfor %}
			
			</div>
		</div>
	</div>
</div>

<div class="row wp-rengine-admin">
	<div class="form-group col-sm-12 text-right padd20t">
		<button type="submit" class="btn btn-success">Update Locations Settings</button>
	</div>
</div>
</form>
