<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>{{ gdata.title }} | Tracks</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		{% if not gdata.insecure %}
			<!-- TODO: When the track listing is on a separate JSON file, the "unsafe-inline" can be removed from "script-src" -->
			<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; frame-src 'none'; img-src 'self' data: https://*.tile.openstreetmap.org https://*.tile.opentopomap.org https://map.valentim.org https://server.arcgisonline.com;">
		{% endif %}
		<link id="static-location" href="{{ gdata.static }}"/>
		<!-- D3 -->
		<script src="{{ gdata.static }}lib/d3@5.16.0.min.js"></script>
		<!-- Leaflet -->
		<script src="{{ gdata.static }}lib/leaflet@1.6.0.min.js"></script>
		<link rel="stylesheet" href="{{ gdata.static }}lib/leaflet@1.6.0.css"/>
		<!-- Leaflet GPX -->
		<script src="{{ gdata.static }}lib/leaflet-gpx@1.5.0.min.js"></script>
		<!-- Leaflet Elevation -->
		<script src="{{ gdata.static }}lib/leaflet-elevation@1.3.4.min.js"></script>
		<link rel="stylesheet" href="{{ gdata.static }}lib/leaflet-elevation@1.3.4.min.css"/>

		<link rel="stylesheet" href="{{ gdata.static }}gpx/style.css"/>
	</head>
	<body>
		<div id="map" data-default-tile="{{ default_tile }}"></div>
		<script>
			GLOBAL_DATA = {
				'tracks': {
					{% for track in tracks %}
						{{ track.title | tojson }}: {{ track.url.as_posix() | tojson }},
					{% endfor %}
				}
			}
		</script>
		<!-- TODO: move this to the header -->
		<script src="{{ gdata.static }}gpx/multiple.js" ></script>
	</body>
</html>
