{% extends "base.html" %}
{% block body_class %}page-full{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
{% endblock %}
{% block content %}
<div id="map"></div>
<div class="map-panel">
  <b>{{ site_name }}</b><br>
  <span id="status">lade...</span><br><br>
  <div class="panel-toggle-row"><input type="checkbox" id="tracksToggle" checked> <label for="tracksToggle">Tracks anzeigen</label></div>
  <div class="legend-dot"><svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M9.33 5.96 14.67 9.33v1.34l-5.34-1.69v3.58L11.33 13.67v1l-3-.67-3 .67v-1l2-1.11V8.98L2 10.67V9.33l5.33-3.37V2.33c0-.55.45-1 1-1s1 .45 1 1v3.63Z"/></svg></div>Flugzeug<br>
  <span class="legend-line"></span>Track (Höhe)<br>
  <div class="track-legende">
    <span><span class="track-swatch" style="background:#ff1744"></span>&lt;2k</span>
    <span><span class="track-swatch" style="background:#ff9100"></span>2-5k</span>
    <span><span class="track-swatch" style="background:#ffea00"></span>5-10k</span>
    <span><span class="track-swatch" style="background:#00e5ff"></span>10-20k</span>
    <span><span class="track-swatch" style="background:#2979ff"></span>20-30k</span>
    <span><span class="track-swatch" style="background:#b388ff"></span>&gt;30k</span>
  </div>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const MAP_CONFIG = {
  center: [{{ center_lat }}, {{ center_lon }}],
  siteName: {{ site_name|tojson }},
  aircraftIconUrl: {{ aircraft_icon_url|tojson }},
  countryFlags: {{ country_flags|tojson }}
};
</script>
{% endblock %}
{% block scripts_extra %}
<script src="/static/js/map.js"></script>
{% endblock %}