$ start_time = "2024-04-12T16:58:14Z"
$ end_time = "2024-04-13T02:02:59Z"
$ media_data = [
$     {
$         "name": 'Flora',
$         "latlng": [34.2040027777778, -118.126038888889],
$         "url": '/media/NGz6.jpg'
$     },
$     {
$         "name": 'Panoramic View',
$         "latlng": [34.2189916666667, -118.120330555556],
$         "url": '/media/vLqR.jpg'
$     },
$     {
$         "name": 'Muir Peak Canyon Live Oak',
$         "latlng": [34.2145527777778, -118.102355555556],
$         "url": '/media/5Htm.jpg'
$     },
$     {
$         "name": 'Flowing Fog',
$         "latlng": [34.2161, -118.1027],
$         "url": '/media/RoGT.mov'
$     },
$ ]

<link rel=stylesheet href=https://unpkg.com/leaflet/dist/leaflet.css>
<script src=https://unpkg.com/leaflet/dist/leaflet.js></script>

<div id="map"></div>
<style>#map { height: 40em; }</style>
<script>
let hikemap = L.map('map').setView([34.215, -118.115], 14)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(hikemap)

$# TODO for location in get_locations(start_time, end_time):
$for location in web.tx.db.select("locations", where=f'json_extract(locations.location, "$.properties.timestamp") > "{start_time}" and json_extract(locations.location, "$.properties.timestamp") < "{end_time}"'):
    L.geoJSON($:web.dump(location["location"])).addTo(hikemap)

let imageMarkers = $:web.dump(media_data)
imageMarkers.forEach(marker =>
    L.marker(
        marker.latlng,
        {icon: L.icon({
            iconUrl: marker.url,
            iconSize: [50, 50],
            iconAnchor: [25, 50]})})
    .bindPopup(`<img src="$${marker.url}" alt="$${marker.name}"
                style="max-width: 200px; max-height: 200px;">`)
    .addTo(hikemap)
)

const redIcon = L.icon({
  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
  iconSize: [60, 60], // Size of the icon
  iconAnchor: [12, 41], // Point of the icon which corresponds to the marker location
  popupAnchor: [1, -34], // Point from which the popup opens relative to the iconAnchor
  shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png', // Optional: Marker shadow
  shadowSize: [41, 41], // Size of the shadow
  shadowAnchor: [12, 41] // Anchor of the shadow
})
</script>

---

$for media in media_data:
    $ url = media["url"]
    $if url.endswith(".jpg"):
        <img src=$url alt="$media['name'] $media['latlng']">
    $elif url.endswith(".mov"):
        <video controls style=width:100%>
        <source src=$url type=video/quicktime>
        <source src=$(url[:-4]).mp4 type=video/mp4>
        <source src=$(url[:-4]).webm type=video/webm>
        Your browser does not support the video tag.
        </video>

---

<style>
table { width: 100% }
th { text-align: left }
</style>

<table>
<tr>
<th>Time
<th>Coordinates
<th>Altitude
<th>Motion
<th>Battery
</tr>
$for location in web.tx.db.select("locations", where=f'json_extract(locations.location, "$.properties.timestamp") > "{start_time}" and json_extract(locations.location, "$.properties.timestamp") < "{end_time}"'):
    $ location = location["location"]
    $ latitude, longitude = location["geometry"]["coordinates"]
    $ p = location["properties"]
    $if p.get("type") == "trip":
        $continue
    <tr>
    $ h, m, s = p["timestamp"].partition("T")[2].rstrip("Z").split(":")
    <td>$(int(h)-8):$m<small style=color:#586e75>:$s</small>
    <td title="+/-$p['horizontal_accuracy']"><a href=# onclick="L.marker([$longitude, $latitude],{icon:redIcon}).addTo(hikemap);return false;">$round(latitude, 6),$round(longitude, 6)</a>
    <td title="+/-$p['vertical_accuracy']">$round(p["altitude"]*3.28084)
    $ motion = p["motion"]
    <td>
    $if motion and motion != "stationary" and p["speed"]:
        <div title="$motion[0]" style=background-color:#6c71c4;color:#002b36;text-align:center;width:$(p["speed"]*25)%><span style=font-size:.75em>$p["speed"]</span></div>
    $ battery = round(p["battery_level"]*100)
    <td><div style=background-color:#\
    $if battery > 20:
        859900\
    $elif battery > 10:
        b58900\
    $else:
        dc322f\
    ;color:#002b36;display:inline-block;text-align:center;width:$(battery)%>
    $if battery > 50:
        <span style=font-size:.666em;>
        $if p["battery_state"] == "charging":
            <strong style=color:#d33682>$(battery)%</strong>
        $else:
            $(battery)%
        </span>
    $else:
        &nbsp;
    </div>
    $if battery < 50:
        <span style=display:inline-block;font-size:.666em;>
        $if p["battery_state"] == "charging":
            <strong style=color:#d33682>$(battery)%</strong>
        $else:
            $(battery)%
        </span>
    </tr>
</table>