{% extends "base.html" %}
{% block title %}Route — AHDX{% endblock %}
{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/leaflet/leaflet.css') }}">
{% endblock %}
{% block body %}
<a href="{{ url_for('routes') }}">&larr; Routes</a>
<h1>{{ route['filename'] }}</h1>
<p class="muted">{{ (route['start_date'] or '')[:19] }} · {{ route['point_count'] }} points</p>

<div class="card" style="padding: 0; overflow: hidden;">
  <div id="map" style="height: 460px;"></div>
</div>
<p class="muted">Track is from your data. Map tiles come from OpenStreetMap over the network.</p>

<script src="{{ url_for('static', filename='vendor/leaflet/leaflet.js') }}"></script>
<script>
// [lat, lon] pairs, which is the order Leaflet wants.
const PTS = {{ points|tojson }};
(function () {
  const box = document.getElementById("map");
  if (!PTS.length) { box.innerHTML = "<p class='muted' style='padding:16px;'>No GPS points in this route.</p>"; return; }
  const map = L.map(box);
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19,
    attribution: "&copy; OpenStreetMap contributors",
  }).addTo(map);
  const line = L.polyline(PTS, { color: "#0a84ff", weight: 4 }).addTo(map);
  map.fitBounds(line.getBounds(), { padding: [20, 20] });
  L.circleMarker(PTS[0], { radius: 6, color: "#2e7d32", fillOpacity: 1 }).addTo(map).bindTooltip("Start");
  L.circleMarker(PTS[PTS.length - 1], { radius: 6, color: "#c0392b", fillOpacity: 1 }).addTo(map).bindTooltip("End");
})();
</script>
{% endblock %}