{{ define "main" }}
<h1 id="{{ .Title | urlize }}">{{ .Title | markdownify }}</h1>

{{ .Content }}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

<div id="map" style="height: 500px; width: 100%; border-radius: 4px; margin-bottom: 1rem;"></div>

<script>
  var map = L.map('map').setView([30, 0], 2);

  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  var places = [
    {{ range .Pages }}
      {{ if and .Params.lat .Params.lon }}
      {
        title: {{ .Title }},
        lat: {{ .Params.lat }},
        lon: {{ .Params.lon }},
        url: {{ .RelPermalink }}
      },
      {{ end }}
    {{ end }}
  ];

  var bounds = [];
  places.forEach(function(place) {
    var marker = L.marker([place.lat, place.lon]).addTo(map);
    marker.bindPopup('<a href="' + place.url + '">' + place.title + '</a>');
    bounds.push([place.lat, place.lon]);
  });

  if (bounds.length > 0) {
    map.fitBounds(bounds, { padding: [50, 50] });
  }
</script>

<ul>
  {{ range .Pages.ByDate.Reverse }}
    {{ .Render "li" }}
  {{ end }}
</ul>

{{ end }}

{{ define "aside" }}
{{ if .Params.description }}
<p>{{ .Params.description }}</p>
{{ end }}
{{ end }}