{% extends 'base.html' %}
{% load cms_tags menu_tags %} 
{% load i18n satchmo_category satchmo_google satchmo_util satchmo_currency satchmo_discounts app_plugins normalize_decimal common_tags thumbnail %}
{% load facebook_connect  %}
	{% block content %}
	<section id="title-bar">
			<div class="page-width">
				<h1>{%trans "Our Branches"%}</h1>
				
			</div>
		</section>
		<section id="contents">
			<div class="page-width">
				<div class="form-cover branches clearfix">
					<div class="left">
					<h2>{{ request.REQUEST.title }}</h2>
					<div class="recursive-form mt-20 lbl-description clearfix">
						<h2>{{list.location}}</h2>
							<ul>
							<li><label>{% trans "Address" %}</label></li>
							<li>{{ request.REQUEST.contact }}</li></ul>
							<ul>
							<li><label>{% trans "Phone" %} </label></li>
							<li>{{ request.REQUEST.phone }}</li>
							</ul>
							<ul>
							<li><label>{% trans "Fax" %} </label></li>
							<li>{% trans "+965 24843977" %}</li>
							</ul>
							<ul>
								<li><label>{% trans "Email" %} </label></li>
								<li>{% trans "info@naif.com.kw" %} </li>
							</ul>
							<ul>
							<li><a href="/location/"><input type="button" value="{% trans "Back" %}" class="width-105"></a></li>
							<li></li>
							</ul>
					</div>	
					</div>
					<div class="right">
						<div class="map-cover">
						<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
						<div style="overflow:hidden;height:450px;width:665px;"><div id="gmap_canvas" style="height:450px;width:665px;">
							<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
							<script type="text/javascript">
							var myLatlng = new google.maps.LatLng({{ request.REQUEST.lat }},{{ request.REQUEST.long }});
							// Create a Google Map at the latitude/longitude returned by the Geocoder.
							var myOptions = {
							  zoom: 16,
							  center: myLatlng,
							  mapTypeId: google.maps.MapTypeId.ROADMAP
							};
							var map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
							
							// Add a marker at the address.
							var marker = new google.maps.Marker({
							  map: map,
							  position: myLatlng,
							  title:"{{ request.REQUEST.title }}"
							});
							</script>
						</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		{% endblock %}