{% extends "content.html" %}

{% block content %}
<p class="mb-2">Pictures I took around the world</p>

<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" class="w-full h-halfscreen"></div>

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

{% for wallpaper in wallpapers %}
<script>
    var marker = L.marker({{ wallpaper.location.gps }}).addTo(map);
    marker.bindPopup(`<a target="_blank" href="{{ wallpaper.file }}">{{ wallpaper.location.precise }}</a><br>{{ wallpaper.location.broad }}<br><b>{{ wallpaper.date }}</b>`);
</script>
{% endfor %}
{% endblock %}