{% extends "base.html" %}
{% block title %}Karte · Radeln ohne Alter{% endblock %}
{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
{% endblock %}
{% block content %}
<h1>Fahrten-Karte</h1>
<p class="muted">Abholorte der anstehenden und erledigten Fahrten. Farbe = Status.</p>
<div id="map" class="full-map"></div>
{% endblock %}

{% block scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
  const map = L.map("map").setView([49.240, 6.985], 13);
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19, attribution: "© OpenStreetMap"
  }).addTo(map);

  fetch("{% url 'rides_geojson' %}")
    .then((r) => r.json())
    .then((data) => {
      const layer = L.geoJSON(data, {
        pointToLayer: (f, latlng) =>
          L.circleMarker(latlng, {
            radius: 9, weight: 2, color: "#fff",
            fillColor: f.properties.color, fillOpacity: 0.95,
          }),
        onEachFeature: (f, l) =>
          l.bindPopup(
            `<strong>${f.properties.label}</strong><br>${f.properties.status} · ${f.properties.when}` +
            `<br><a href="${f.properties.url}">Details →</a>`
          ),
      }).addTo(map);
      if (data.features.length) map.fitBounds(layer.getBounds().pad(0.2));
    });
</script>
{% endblock %}