{% 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=='2' %}
		/* show both */
			@media (orientation: landscape) {
					#map, #view {
						display: inline-block;
						width: 50%;
						height: 100%;
					}
					#view { float:right; }
				}
			@media (orientation: portrait) {
				#map, #view {
					width: 100%;
					height: 50%;
				}
				#view { bottom:0; }
		}
		{% elif mapuser.settings.showStreetview and disp=='1' %}
		/* show streetview */
			#map { display:none; }
			#view {
				width: 100%;
				height: 100%;
			}
		{% else %}
		/* show map */
			#map {
				width: 100%;
				height: 100%;
			}
			#view { display:none; }
		{% endif %}
	</style>
{% endblock %}

{% block main %}
	<div id='inactive-mask' class='page-mask'></div>
	<div id='inactive-message' class='popup' style="display:none">
		<p>The map has been deactivated due to inactivity.  Move the mouse around the page to reactivate the map. </p>
	</div>

	{% if user and user.isNewUser %}
	<div id='welcome-mask' class='page-mask' style="display:block"></div>
	<div id='welcome' class='popup'>

		<div class='topbar'>
			<h2>Welcome!</h2>
			<div class='close' onclick="$('#welcome').hide();$('#welcome-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();$('#welcome-mask').hide();">Got it!</a>
		</div>

	</div>
	{% endif %}

	<!-- Map -->
	{% if disp!='1' %}
		<div id='map'></div>
	{% endif %}

	<!-- Streetview -->
	{% if mapuser.settings.showStreetview and disp!='0' %}
		<div id='view'><img id='viewImg' alt="Streetview image"/></div>
	{% endif %}

	<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' %}
		<link rel="stylesheet" type="text/css" href="/static/css/.controls.min.css">
		<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 -->
	<!-- TODO: Move to own script file, maybe with https://github.com/brooklynDev/JShare -->
	<script>
		const mapuser = JSON.parse('{{mapuser |dump|safe}}')
		const mapKey = '{{mapKey|safe}}'
		const noHeader = "{{noHeader |safe}}"
		const disp = "{{disp |safe}}" // 0=map, 1=streetview, 2=both
		const userid = "{{user._id |safe}}"
		const token = "{{user.sk32 |safe}}"
	</script>

	<!-- Imports -->
	<script type="application/javascript" src="https://maps.googleapis.com/maps/api/js?key={{mapKey|safe}}&callback=initMap"
    async defer></script>
	<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.slim.js" integrity="sha256-jniDwC1PC9OmGoyPxA9VpGvgwDYyxsMqu5Q4OrF5wNY=" crossorigin="anonymous"></script>
	<script type="application/javascript" src="/static/js/.map.min.js"></script>

{% endblock %}