{{ header }}
<div class="breadcrumbs">
  <div class="container">
       <div class="current-name">   
        {% set last = breadcrumbs|length %}
        {% set i = 0 %}
        {% for breadcrumb, crumbInfo in breadcrumbs %}  
            {% set i = i + 1 %}     
            {% if i == last  %} 
            {{ crumbInfo.text }}
          {% endif %}  
        {% endfor %}
      </div>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
</div>
<div class="container">
  <!-- <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul> -->
  
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
		<div class="info-contact row">
			<div class="col-sm-6 col-xs-12 info-store">
			  {% if image %} 
				<div id="map-canvas"><img src="{{ image }} " alt="{{ store }} " title="{{ store }} " /></div>
			   {% else %} 
				<div id="map-canvas"></div>
				<script src="https://maps.googleapis.com/maps/api/js?key={{soconfig.get_settings('mapkeys')}}"></script>
				<script type="text/javascript">
					
					function showLatLgn() {
						var geocoder = new google.maps.Geocoder();
						var latlng = new google.maps.LatLng({{soconfig.get_settings('mapgeocode')}});

						geocoder.geocode({"latLng": latlng}, function (results, status) {
						
							if (status == google.maps.GeocoderStatus.OK) {
							
								var add = results[1].formatted_address; //this is the full address
								var myOptions = {
									zoom: {{soconfig.get_settings('mapzoom')}},
									center: latlng,
									mapTypeId: google.maps.MapTypeId.ROADMAP
								};
								var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
								var marker = new google.maps.Marker({
									map: map,
									position: latlng
								});
								marker.setTitle('Address');
								attachSecretMessage(marker,add);
							} else {
								try {
									alert("Address not found");
								} catch (e) {
								}
							}

						})
					}
					
				
					
					function attachSecretMessage(marker, message) {
						var infowindow = new google.maps.InfoWindow(
							{
								content: message
							});
						google.maps.event.addListener(marker, 'click', function () {
							infowindow.open(marker.get('map'), marker);
						});
					}
					
					
					function showLocation() {
						var address = "{{soconfig.get_settings('mapaddress')}}";
						var geocoder = new google.maps.Geocoder();
						geocoder.geocode({"address": address}, function (results, status) {
							// If the Geocoding was successful
							if (status == google.maps.GeocoderStatus.OK) {
								var myOptions = {
									zoom: {{soconfig.get_settings('mapzoom')}},
									scaleControl: false,
									scrollwheel: false,
									disableDoubleClickZoom: true,
									center: results[0].geometry.location,

									mapTypeId: google.maps.MapTypeId.ROADMAP
								};
								var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

								// Add a marker at the address.
								var marker = new google.maps.Marker({
									map: map,
									position: results[0].geometry.location
								});
								marker.setTitle('Address');
								attachSecretMessage(marker, address);
							} else {
								try {
									alert(address + " not found");
								} catch (e) {
								}
							}
						});
					}
					
					
					{% if soconfig.get_settings('mapaddress') is empty %}
						google.maps.event.addDomListener(window, 'load', showLatLgn);
					{% else %}
						google.maps.event.addDomListener(window, 'load', showLocation);
					{% endif %} 

				</script>
				  
				{% endif %}   
			</div>
			
			<div class="col-sm-6 col-xs-12 contact-form">
			   <form action="{{ action }} " method="post" enctype="multipart/form-data" class="form-horizontal">
				<fieldset>
					<legend><h2>{{ text_contact }} </h2></legend>
					 <p>{{ comment }}</p>
                  
				  <div class="form-group required">
					<div class="col-sm-12">
					  <input type="text" name="name" value="{{ name }}" id="input-name" class="form-control" placeholder="{{ entry_name }} *"/>
					  {% if error_name %} 
					  <div class="text-danger">{{ error_name }} </div>
					  {% endif %} 
					</div>
				  </div>
				  <div class="form-group required">
					<div class="col-sm-12">
					  <input type="text" name="email" value="{{ email }}" id="input-email" class="form-control" placeholder="{{ entry_email }} *" />
					  {% if error_email %} 
					  <div class="text-danger">{{ error_email }} </div>
					  {% endif %} 
					</div>
				  </div>
				  <div class="form-group required">
					<div class="col-sm-12">
					  <textarea name="enquiry" value="{{ entry_enquiry }}" rows="10" id="input-enquiry" placeholder="{{ entry_enquiry }} *" class="form-control">{{ enquiry }}</textarea>
					  {% if error_enquiry %} 
					  <div class="text-danger">{{ error_enquiry }} </div>
					  {% endif %} 
					</div>
				  </div>
				  {{ captcha }} 
				</fieldset>
				<div class="buttons">
				  <div class="pull-left">
					<button class="btn btn-info" type="submit"><span>{{ button_submit }} </span></button>
				  </div>
				</div>
			  </form>
			</div>
		</div>
		
		
      
	  
      
      
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
{{ footer }}