{{ define "journey_map" }}
<div id="map" class="w-full h-full"></div>
<script>
  let protocol = new pmtiles.Protocol();
  maplibregl.addProtocol("pmtiles",protocol.tile);
  var map = new maplibregl.Map({
    container: 'map', // container id
    style: "/public/maps/protomaps-light/style.json",
  });

  const geojsonPoints = {
    "type": "FeatureCollection",
    "features": [
      {{ json .driver_journey.DriverDeparture }},
      {{ json .driver_journey.PassengerPickup }},
      {{ json .driver_journey.PassengerDrop }},
      {{ json .driver_journey.DriverArrival }}
    ]
  }

  map.on('load', async () => {
    {{if .driver_journey.JourneyPolyline}}
    var linestring = polyline.toGeoJSON('{{.driver_journey.JourneyPolyline}}');
    map.addSource('trip', {
      type: "geojson",
      data: linestring
    })
    map.addLayer({
      'id': 'trip',
      'type': 'line',
      'source': 'trip',
      'layout': {
        'line-join': 'round',
        'line-cap': 'round',
      },
      'paint': {
        'line-color': getComputedStyle(document.documentElement).getPropertyValue('--color-co-blue').trim(),
        'line-width': 4
      },
    });
    {{end}}

    // Driver departure marker
    const driverDepartureEl = document.createElement('div');
    driverDepartureEl.className = 'w-8 h-8 rounded-co bg-co-blue border border-white shadow-md flex items-center justify-center';
    driverDepartureEl.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
        </svg>
    `;
    new maplibregl.Marker({element: driverDepartureEl})
        .setLngLat({{ json .driver_journey.DriverDeparture }}.geometry.coordinates)
        .addTo(map);

    // Driver arrival marker
    const driverArrivalEl = document.createElement('div');
    driverArrivalEl.className = 'w-8 h-8 rounded-co bg-co-blue border border-white shadow-md flex items-center justify-center';
    driverArrivalEl.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
        </svg>
    `;
    new maplibregl.Marker({element: driverArrivalEl})
        .setLngLat({{ json .driver_journey.DriverArrival }}.geometry.coordinates)
        .addTo(map);

    // Passenger pickup marker
    const passengerPickupEl = document.createElement('div');
    passengerPickupEl.className = 'w-8 h-8 rounded-co bg-co-green border border-white shadow-md flex items-center justify-center';
    passengerPickupEl.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16" height="16">
            <path fill-rule="evenodd" d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
        </svg>
    `;
    new maplibregl.Marker({element: passengerPickupEl})
        .setLngLat({{ json .driver_journey.PassengerPickup }}.geometry.coordinates)
        .addTo(map);

    // Passenger drop marker
    const passengerDropEl = document.createElement('div');
    passengerDropEl.className = 'w-8 h-8 rounded-co bg-co-red border border-white shadow-md flex items-center justify-center';
    passengerDropEl.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16" height="16">
            <path fill-rule="evenodd" d="M3 2.25a.75.75 0 01.75.75v.54l1.838-.46a9.75 9.75 0 016.725.738l.108.054a8.25 8.25 0 005.58.652l3.109-.732a.75.75 0 01.917.81 47.784 47.784 0 00.005 10.337.75.75 0 01-.574.812l-3.114.733a9.75 9.75 0 01-6.594-.77l-.108-.054a8.25 8.25 0 00-5.69-.625l-2.202.55V21a.75.75 0 01-1.5 0V3A.75.75 0 013 2.25z" clip-rule="evenodd" />
        </svg>
    `;
    new maplibregl.Marker({element: passengerDropEl})
        .setLngLat({{ json .driver_journey.PassengerDrop }}.geometry.coordinates)
        .addTo(map);

    var bbox=turf.bbox(geojsonPoints)

    map.fitBounds(bbox, { padding: 50 })
  })
</script>

{{ end }}
