{% 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 class='page-mask'></div>
	<div id='welcome' class='popup'>
	
		<div class='topbar'>
			<h2>Welcome!</h2>
			<div class='close' onclick="$('#welcome').hide();$('.page-mask').hide();">✖️</div>
		</div>
		
		<p>This is your map.  It's publicly avaliable at <a href="{{newuserurl}}">{{newuserurl}}</a>.  You can change that URL 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 the <b><a href="/help">help</a></b> page.  </p>
		
		<div class='buttons'>
			<a class='btn main' onclick="$('#welcome').hide();$('.page-mask').hide();">Got it!</a>
		</div>
		
	</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 and mapuser._id != 'demo' %}
		<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()}}

	<!-- Variables from server-side -->
	<script>
		const mapuser = JSON.parse('{{mapuser |dump|safe}}'),
			mapKey = "{{mapApi |safe}}",
			noHeader = "{{noHeader |safe}}",
			disp = "{{disp |safe}}", // 0=map, 1=streetview, 2=both
			userid = "{{user._id |safe}}",
			token = "{{user.sk32 |safe}}";
	</script>
	
	<!-- Webpacked bundles -->
	<script type="application/javascript" src="/static/js/dist/map.js"></script>
	{% if user.id == mapuser.id %}
		<script type="application/javascript" src="/static/js/dist/controls.js"></script>
	{% endif %}
	
{% endblock %}