<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta charset="UTF-8">
	<title>eGSIM</title>

	{% block fonts %}
		<!-- load font now, set font later when loaded (otherwise it could not be applied) -->
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Encode+Sans+Semi+Condensed&family=Encode+Sans+Condensed&display=swap" rel="stylesheet">
	{% endblock %}

	{% block fontloadingscript %}
		<script type="text/javascript">
		document.fonts.ready.then(() => {  // https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts
			var style = document.createElement('style');
			style.type = 'text/css';
			style.innerHTML = `
				body{
					font-family: 'Encode Sans Semi Condensed', Helvetica, sans-serif;
				}
				h1, h2, h3, h4, h5, h6, nav > a, label{
					font-family: 'Encode Sans Condensed', Helvetica, sans-serif;
				}
			`;
			document.head.appendChild(style);
		});
		</script>
	{% endblock %}

	{% block head %}
	{% if vue %}
		{% if debug %}
		<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
		{% else %}
		<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.prod.js"></script>
		{% endif %}
	{% endif %}
	
	{% if axios %}
	<script src="https://cdn.jsdelivr.net/npm/axios@1.3.4/dist/axios.min.js"></script>
	{% endif %}

	<!-- BOOTSTRAP CSS must be loaded before custom classes if we want to override it -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
		  rel="stylesheet"
		  integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
		  crossorigin="anonymous">

	{% if leaflet %}
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
	<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
	<!-- library-related css here: -->
	<style>/* use our font, not leaflet's: */ .leaflet-container { font-family: inherit !important; }</style>
	{% endif %}

	{% if fontawesome %}
	<!-- font awesome (e.g. required by easybutton & sidebar) FIXME: CHECK LICENSE (MIT) -->
	<link rel="stylesheet" type="text/css"
		  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<!-- <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css" rel="stylesheet"> -->
	{% endif %}

	{% if plotly %}
		{% if debug %}
			<script src="https://cdn.jsdelivr.net/npm/plotly.js-cartesian-dist@2.14.0/plotly-cartesian.js"></script>
		{% else %}
			<script src="https://cdn.jsdelivr.net/npm/plotly.js-cartesian-dist-min@2.14.0/plotly-cartesian.min.js"></script>
		{% endif %}
		<!-- library-related css here: -->
		<style>/* hide upper-right toolbar in plots: */ div.modebar.modebar--hover{ display: none; }</style>
	{% endif %}

	<!-- egsim base css. Load at the real end:  -->
	<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">
	{% endblock %}

	{% block extra-head %}
	{% endblock %}

	<link rel="shortcut icon" href="{% static 'img/favicon.png' %}" type="image/png"/>
</head>

<body>
{% block body %}{% endblock %}
</body>
{% block after-body %}{% endblock %}
</html>
