{{ header }}{{ column_left }}
<div id="content">
	<div class="page-header">
		<div class="container-fluid">
			<div class="pull-right">
				<button type="submit" form="form-jetimpex_google_map" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary">
					<i class="fa fa-save"></i>
				</button>
				<a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a>
			</div>
			<h1>{{ heading_title }}</h1>
			<ul class="breadcrumb">
				{% for breadcrumb in breadcrumbs %}
					<li><a href="{{ breadcrumb['href'] }}">{{ breadcrumb['text'] }}</a></li>
				{% endfor %}
			</ul>
		</div>
	</div>
	<div class="container-fluid">
		{% if (error_warning) %}
			<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
				<button type="button" class="close" data-dismiss="alert">&times;</button>
			</div>
		{% endif %}
		{% if (error_marker_width) %}
			<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_marker_width }}
				<button type="button" class="close" data-dismiss="alert">&times;</button>
			</div>
		{% endif %}
		{% if (error_marker_height) %}
			<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_marker_height }}
				<button type="button" class="close" data-dismiss="alert">&times;</button>
			</div>
		{% endif %}
		{% if (error_zoom) %}
			<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_zoom }}
				<button type="button" class="close" data-dismiss="alert">&times;</button>
			</div>
		{% endif %}
		{% if (error_marker_active) %}
			<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_marker_active }}
				<button type="button" class="close" data-dismiss="alert">&times;</button>
			</div>
		{% endif %}
		{% if (error_marker) %}
			<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_marker }}
				<button type="button" class="close" data-dismiss="alert">&times;</button>
			</div>
		{% endif %}
		{% if (error_styles) %}
			<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_styles }}
				<button type="button" class="close" data-dismiss="alert">&times;</button>
			</div>
		{% endif %}
		{% if (error_geocode) %}
			<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_geocode }}
				<button type="button" class="close" data-dismiss="alert">&times;</button>
			</div>
		{% endif %}
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_edit }}</h3>
			</div>
			<div class="panel-body">
				<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-jetimpex_google_map" class="form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-name">{{ entry_name }}</label>
						<div class="col-sm-10">
							<input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control" />
							{% if (error_name) %}
								<div class="text-danger">{{ error_name }}</div>
							{% endif %}
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-name">{{ entry_key }}</label>
						<div class="col-sm-10">
							<input type="text" name="jetimpex_google_map_key" value="{{ jetimpex_google_map_key }}" placeholder="{{ entry_key }}" id="input-name" class="form-control" />
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
						<div class="col-sm-10">
							<select name="status" id="input-status" class="form-control">
								{% if (status) %}
									<option value="1" selected="selected">{{ text_enabled }}</option>
									<option value="0">{{ text_disabled }}</option>
								{% else %}
									<option value="1">{{ text_enabled }}</option>
									<option value="0" selected="selected">{{ text_disabled }}</option>
								{% endif %}
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-zoom"><span data-toggle="tooltip" title="{{ help_zoom }}">{{ entry_zoom }}</span></label>
						<div class="col-sm-10">
							<input type="text" name="jetimpex_google_map_zoom" id="input-zoom" class="form-control" value="{% if (jetimpex_google_map_zoom) %}{{ jetimpex_google_map_zoom }}{% else %}{{ '14' }}{% endif %}">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-type">{{ entry_type }}</label>
						<div class="col-sm-10">
							<select name="jetimpex_google_map_type" id="input-type" class="form-control">
								{% if (jetimpex_google_map_type) %}
									<option value="1" {% if (jetimpex_google_map_type == 1) %} selected="selected" {% endif %} >{{ text_type_roadmap }}</option>
									<option value="2" {% if (jetimpex_google_map_type == 2) %} selected="selected" {% endif %} >{{ text_type_land }}</option>
									<option value="3" {% if (jetimpex_google_map_type == 3) %} selected="selected" {% endif %} >{{ text_type_hybrid }}</option>
									<option value="4" {% if (jetimpex_google_map_type == 4) %} selected="selected" {% endif %} >{{ text_type_satellite }}</option>
								{% else %}
									<option value="1" selected="selected">{{ text_type_roadmap }}</option>
									<option value="2">{{ text_type_land }}</option>
									<option value="3">{{ text_type_hybrid }}</option>
									<option value="4">{{ text_type_satellite }}</option>
								{% endif %}
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-sensor">{{ entry_sensor }}</label>
						<div class="col-sm-10">
							<select name="jetimpex_google_map_sensor" id="input-sensor" class="form-control">
								{% if (jetimpex_google_map_sensor) %}
									<option value="true" selected="selected">{{ text_true }}</option>
									<option value="false">{{ text_false }}</option>
								{% else %}
									<option value="true">{{ text_true }}</option>
									<option value="false" selected="selected">{{ text_false }}</option>
								{% endif %}
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-width">
							<span data-toggle="tooltip" title="{{ help_size }}">{{ entry_width }}</span>
						</label>
						<div class="col-sm-10">
							<input type="text" name="jetimpex_google_map_width" id="input-width" class="form-control" value="{% if (jetimpex_google_map_width) %}{{ jetimpex_google_map_width }}{% else %}{{ '100%' }}{% endif %}">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-height">
							<span data-toggle="tooltip" title="{{ help_size }}">{{ entry_height }}</span>
						</label>
						<div class="col-sm-10">
							<input type="text" name="jetimpex_google_map_height" id="input-height" class="form-control" value="{% if (jetimpex_google_map_height) %}{{ jetimpex_google_map_height }}{% else %}{{ '200px' }}{% endif %}">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-styles"><span data-toggle="tooltip" title="{{ help_styles }}">{{ entry_styles }}</span></label>
						<div class="col-sm-10">
							<textarea name="jetimpex_google_map_styles" id="input-styles" class="form-control">
								{% if (jetimpex_google_map_styles) %}
									{{ jetimpex_google_map_styles }}
								{% else %}
									{{ '' }}
								{% endif %}
							</textarea>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-disable">
							<span data-toggle="tooltip" title="{{ help_disable_ui }}">{{ entry_disable_ui }}</span>
						</label>
						<div class="col-sm-10">
							<select name="jetimpex_google_map_disable_ui" id="input-disable" class="form-control">
								{% if (jetimpex_google_map_disable_ui == 'true') %}
									<option value="true" selected="selected">{{ text_true }}</option>
									<option value="false">{{ text_false }}</option>
								{% else %}
									<option value="true">{{ text_true }}</option>
									<option value="false" selected="selected">{{ text_false }}</option>
								{% endif %}
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-scrollwheel">
							<span data-toggle="tooltip" title="{{ help_scrollwheel }}">{{ entry_scrollwheel }}</span>
						</label>
						<div class="col-sm-10">
							<select name="jetimpex_google_map_scrollwheel" id="input-scrollwheel" class="form-control">
								{% if (jetimpex_google_map_scrollwheel == 'true') %}
									<option value="true" selected="selected">{{ text_true }}</option>
									<option value="false">{{ text_false }}</option>
								{% else %}
									<option value="true">{{ text_true }}</option>
									<option value="false" selected="selected">{{ text_false }}</option>
								{% endif %}
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-draggable">
							<span data-toggle="tooltip" title="{{ help_draggable }}">{{ entry_draggable }}</span>
						</label>
						<div class="col-sm-10">
							<select name="jetimpex_google_map_draggable" id="input-draggable" class="form-control">
								{% if (jetimpex_google_map_draggable == 'true') %}
									<option value="true" selected="selected">{{ text_true }}</option>
									<option value="false">{{ text_false }}</option>
								{% else %}
									<option value="true">{{ text_true }}</option>
									<option value="false" selected="selected">{{ text_false }}</option>
								{% endif %}
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-image">{{ entry_image }}</label>
						<div class="col-sm-10">
							<a href="" id="thumb-image" data-toggle="image" class="img-thumbnail">
								<img src="{% if (jetimpex_google_map_marker) %}{{ map_marker }}{% else %}{{ placeholder }}{% endif %}" alt="" title="" data-placeholder="{{ placeholder }}"/>
							</a>
							<input class="form-control" type="hidden" name="jetimpex_google_map_marker" value="{{ jetimpex_google_map_marker }}" id="input-image">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-active-image">
							<span data-toggle="tooltip" title="{{ help_active_image }}">{{ entry_active_image }}</span>
						</label>
						<div class="col-sm-10">
							<a href="" id="thumb-image2" data-toggle="image" class="img-thumbnail">
								<img src="{% if (jetimpex_google_map_marker_active) %}{{ map_marker_active }}{% else %}{{ placeholder }}{% endif %}" alt="" title="" data-placeholder="{{ placeholder }}"/>
							</a>
							<input class="form-control" type="hidden" name="jetimpex_google_map_marker_active" value="{{ jetimpex_google_map_marker_active }}" id="input-active-image">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-marker-width">{{ entry_marker_width }}</label>
						<div class="col-sm-10">
							<input type="text" name="jetimpex_google_map_marker_width" id="input-marker-width" class="form-control" value="{% if jetimpex_google_map_marker_width %}{{ jetimpex_google_map_marker_width }}{% else %}{{ '' }}{% endif %}">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="input-marker-height">{{ entry_marker_height }}</label>
						<div class="col-sm-10">
							<input type="text" name="jetimpex_google_map_marker_height" id="input-marker-height" class="form-control" value="{% if jetimpex_google_map_marker_height %}{{ jetimpex_google_map_marker_height }}{% else %}{{ '' }}{% endif %}">
						</div>
					</div>
					<div id="markers">
						{%set address_count = 0 %}
						{% if (jetimpex_google_map_address is defined) %}
							{% for i, address in jetimpex_google_map_address %}
								{% if (jetimpex_google_map_address[i] is not empty and jetimpex_google_map_geocode[i] is not empty) %}
									<div class="marker{{ i }}">
										<div class="form-group">
											<h4 class="col-sm-2 text-right">Marker: {{ i + 1 }}</h4>
											<div class="col-sm-10 text-right">
												<button type="button" onclick="removeMarker({{ i }});" data-toggle="tooltip" title="{{ text_remove_marker }}" class="btn btn-danger">
													<i class="fa fa-minus-circle"></i>
												</button>
											</div>
											<div class="clearfix "></div>
										</div>
										<div class="form-group required">
											<label class="col-sm-2 control-label" for="input-geocode{{ i }}">
												<span data-toggle="tooltip" title="{{ help_geocode }}">{{ entry_geocode }}</span>
											</label>
											<div class="col-sm-10">
												<input name="jetimpex_google_map_geocode[]" id="input-geocode{{ i }}"
												class="form-control" value="{{ jetimpex_google_map_geocode[i] }}">
											</div>
										</div>
										<div class="form-group required">
											<label class="col-sm-2 control-label" for="input-address{{ i }}">{{ entry_address }}</label>
											<div class="col-sm-10">
												<input name="jetimpex_google_map_address[]" id="input-address{{ i }}" class="form-control" value="{{ jetimpex_google_map_address[i] }}">
											</div>
										</div>
									</div>
									{%set address_count = address_count + 1 %}
								{% endif %}
							{% endfor %}
						{% endif %}
					</div>
					<div class="text-right">
						<button type="button" onclick="addMarker();" data-toggle="tooltip" title="{{ text_add_marker }}" class="btn btn-primary">
							<i class="fa fa-plus-circle"></i>
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	var address_count ={{ address_count }};
	function addMarker() {
		html = '<div class="marker' + address_count + '">';
		html += '<div class="form-group">';
		html += '	<h4 class="col-sm-2 text-right">Marker: ' + (address_count + 1) + '</h4>';
		html += '	<div class="col-sm-10 text-right">';
		html += '		  <button type="button" onclick="removeMarker(' + address_count + ');" data-toggle="tooltip" title="{{ text_remove_marker }}" class="btn btn-danger">' +
		'<i class="fa fa-minus-circle"></i></button>  ';
		html += '	</div>';
		html += '</div>';
		html += '<div class="form-group required">';
		html += '	<label class="col-sm-2 control-label" for="input-geocode' + address_count + '"><span data-toggle="tooltip" title="{{ help_geocode }}">{{ entry_geocode }}</span></label>';
		html += '	<div class="col-sm-10">';
		html += '		<input name="jetimpex_google_map_geocode[]" id="input-geocode' + address_count + '" class="form-control" value="">   ';
		html += '	</div>';
		html += '</div>';
		html += '<div class="form-group required">';
		html += '	<label class="col-sm-2 control-label" for="input-address' + address_count + '">{{ entry_address }}</label>';
		html += '	<div class="col-sm-10">';
		html += '		<input name="jetimpex_google_map_address[]" id="input-address' + address_count + '" class="form-control" value="">   ';
		html += '	</div>';
		html += '</div>';
		html += '</div>';
		$('#markers').append(html);
		address_count++;
	}

	function removeMarker(index) {
		var el = '.marker' + index;
		$(el).remove();
		$('.tooltip').remove();
	}
</script>
{{ footer }}