{{ template "sync/layout/authenticated.html" . }}

{{ define "title" }}Stadia{{ end }}
{{ define "extraheader" }}
	<script
		type="text/javascript"
		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
	></script>
	<link
		href="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css"
		rel="stylesheet"
	/>
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
		}

		#map {
			position: absolute;
			top: 0;
			bottom: 0;
			width: 100%;
		}
	</style>
{{ end }}
{{ define "content" }}
	<body>
		<div id="map"></div>
		<script type="text/javascript">
			var map = new maplibregl.Map({
				container: "map",
				style: "https://tiles.stadiamaps.com/styles/alidade_satellite.json", // Style URL; see our documentation for more options
				center: [12, 53], // Initial focus coordinate
				zoom: 4,
			});
			map.on("load", () => {
				//let coords = [-119.3444741, 36.3260431 ];
				let coords = [-119.34384512198031, 36.3260431000042];
				map.jumpTo({
					center: coords,
					zoom: 19,
				});
				const marker = new maplibregl.Marker({
					color: "#FF0000",
					draggable: true,
				})
					.setLngLat(coords)
					.addTo(map);
				marker.on("dragend", (e) => {
					console.log("Marker moved to", e);
				});
			});

			// MapLibre GL JS does not handle RTL text by default,
			// so we recommend adding this dependency to fully support RTL rendering if your style includes RTL text
			maplibregl.setRTLTextPlugin(
				"https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js",
			);

			// Add zoom and rotation controls to the map.
			map.addControl(new maplibregl.NavigationControl());
		</script>
	</body>
{{ end }}
