{% extends "base.html" %}

{% block title %}Geocode to Commons{% endblock %}

{% block link %}
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
{% endblock %}

{% block script %}
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>

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


  var marker;

  map.on('click', function(e) {
      document.getElementById('info').innerHTML = '';
      if (marker) {
          // If the marker already exists, just set its new position
          marker.setLatLng(e.latlng);
      } else {
          // If the marker doesn't exist yet, create it at the clicked position
          marker = L.marker(e.latlng).addTo(map);
      }

      // Send XHR to the server
      var xhr = new XMLHttpRequest();
      xhr.open('GET', '{{ request.root_path }}/pin/' + e.latlng.lat + '/' + e.latlng.lng, true);
      xhr.onload = function() {
          if (xhr.status === 200) {
              var response = JSON.parse(xhr.responseText);
              document.getElementById('info').innerHTML = response.html;
          } else {
              console.error('Request failed. Returned status of ' + xhr.status);
          }
      };
      xhr.send();
  });

</script>

{% endblock %}

{% block style %}
<style>

/* Styles for the map */
#map {
    position: fixed;   /* This keeps the map in place when the page is scrolled */
    top: 0;            /* Starting from the top edge of the browser window */
    right: 0;          /* Positioned on the right side */
    width: 50%;        /* Half the screen width */
    height: 100%;      /* Full height of the browser window */
}

#main {
  width: 48%
}

{{ css | safe }}

</style>
{% endblock %}

{% block content %}
<div id="map"></div>
<div class="m-3" id="main">
<h1>Geocode coordinates to Commons Category</h1>

<div id="info">Click on the map</div>

</div>

{% endblock %}