{% extends 'templates/base.html' %}
{% block title %}{{super()}}{% if mapuser.name %} | {{mapuser.name}}{% endif %}{% endblock %}

{% block head %}
	{{super()}}
	<link href="/static/css/.map.min.css" rel="stylesheet">
	<style>/* These styles include values passed from to the template from the server.  Other styles are in map.css */
		{% if noHeader!='0' %} main { top:0; } {% endif %}
		
		{% if mapuser.settings.showStreetview and disp!='0' and disp!='1' %}
		/* show both */
			@media (orientation: landscape) {
					#map, #pano {
						display: inline-block;
						width: 50%;
						height: 100%;
					}
					#pano { float:right; }
				}
			@media (orientation: portrait) {
				#map, #pano {
					width: 100%;
					height: 50%;
				}
				#pano { bottom:0; }
		}
		{% elif mapuser.settings.showStreetview and disp=='1' %}
		/* show streetview */
			#map { display:none; }
			#pano {
				width: 100%;
				height: 100%;
			}
		{% else %}
		/* show map */
			#map {
				width: 100%;
				height: 100%;
			}
			#pano { display:none; }
		{% endif %}
	</style>
{% endblock %}

{% block main %}

	{% if user and newuserurl %}
	<div id='welcome'>
	<style>
		#welcome {
			background: #111;
			padding: 3vw;
			border-radius: 2vw;
			z-index: 50;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		#welcome h1 {
			display: inline-block;
		}
		#welcome p {
			margin: 0;
		}
		#welcome .close {
			cursor: pointer;
			float: right;
		}
	</style>
	
		<h1>Welcome!</h1>
		<span class='close' onclick="$('#welcome').hide();">✖️</span>
		<p>This is your map.  It's avaliable at <a href="{{newuserurl}}">{{newuserurl}}</a>.  You can change that and other settings in <b><a href="/settings">settings</a></b>.  Set your location by clicking <b>set</b> below.  Clear it by clicking <b>clear</b>.  To track your location, click <b>track</b> or download the <a href="/android">android app</a>.  For more information, see <a href="/help">the help page</a>.  </p>
		
	</div>
	{% endif %}

	<div id='map'></div>
	<div id='pano'></div>
	
	<div id='notset' class='centered alert alert-warning'>
		{% if user.id == mapuser.id %}
			Your location is unset. You can click 'set' below to set it to your current position.
		{% else %}
			This user has no location set.  
		{% endif %}
	</div>
	
	{% if user.id == mapuser.id %}
		<div id='controls'>
		{% if mapuser.settings.showStreetview and disp!='0' %}
			<style>
				@media (orientation: portrait) {
					#controls { bottom:30px }
				}
			</style>
		{% endif %}
			
			<button id='set-loc' class='btn set' title="Click here to set your location">Set</button>
			<button id='track-loc' class='btn track' title="Click here to track your location"><i class='fa fa-crosshairs'></i>Track</button>
			<button id='clear-loc' class='btn clear' title="Click here to clear your location">Clear</button>
			
		</div>
	{% endif %}
	
{% endblock %}

{% block javascript %}
{{super()}}
	
	<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js" integrity="sha256-WKvqiY0jZHWQZIohYEmr9KUC5rEaYEOFTq+ByllJK8w=" crossorigin="anonymous"></script>
	<script type="application/javascript" src="https://maps.googleapis.com/maps/api/js?key={{mapApi}}&callback=gmapsCb" async defer></script>
	<script type="application/javascript" src="/static/js/.map.min.js"></script>
	{% if user.id == mapuser.id %}<script type="application/javascript" src="/static/js/.map-controls.min.js"></script>{% endif %}
	<script> /* Variables from server */
		
		const mapuser = JSON.parse('{{mapuser |dump|safe}}'),
			noHeader = "{{noHeader |safe}}",
			disp = "{{disp |safe}}", // 0=map, 1=streetview, 2=both
			userid = "{{user._id |safe}}",
			token = "{{user.sk32 |safe}}";
		
	</script>
	
{% endblock %}