{% extends 'base.html' %}

{% block content %}

        <h3>Documentando lo que vale la pena desde 1337</h3>
        <div id="map" style="height: 33rem; border-style: groove; border-radius: 22px; border-width: 4px;"></div>
        <script>
            //setView([51.505, -0.09], 13);
            var map = new L.map('map', center=([20.57, -100.38], zoom=13));
            var user_marker = new L.marker([20.57, -100.38]);
            var user_radial = new L.circle(L.circle(user_marker.latlng))
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors'
            }).addTo(map);

            //{% for pin in pins %}
            //var marker = L.marker([{{ pin.lat }}, {{ pin.lng }}]).addTo(map)
            //    .bindPopup("<b>{{ pin.description }}</b><br><img src='{{ pin.photo }}' width='100'>");
            //{% endfor %}

            //var live_location = map.locate()
            //if (navigator.geolocation) {
            //    navigator.geolocation.getCurrentPosition((position)) => {
                    // change map position
            //        };
            //    };
            //var youarehere = L.marker([latlng.lat, latlng.lng]).addTo(map);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors'
            }).addTo(map);

            
            // Geolocation function
            function onLocationFound(e) {
                var radius = e.accuracy / 2;  // Accuracy of the location

                // Add a pin (marker) at the user's location
                user_marker = L.marker(e.latlng).addTo(map)
                    .bindPopup("Te detectamos en un radio de " + radius + " metros de este punto").openPopup();

                // Add a circle around the user's location
                user_radial = L.circle(e.latlng, radius).addTo(map);

                // Center the map on the user's location
                map.setView(e.latlng, 13);  // Adjust zoom level as needed
                //return marker, radial;
            }

            // Error handling for geolocation
            function onLocationError(e) {
                alert(e.message);
            }

            // Use Leaflet's built-in location detection
            map.on('locationfound', onLocationFound);
            map.on('locationerror', onLocationError);

            // Start the location detection
            map.locate({setView: true, maxZoom: 16});
            map.on('click', function(e) {
                var latlng = e.latlng;
                //document.getElementById('lat').value = latlng.lat;
                //document.getElementById('lng').value = latlng.lng;
                map.flyTo(e.latlng, zoom=18);
                //map.eachLayer( function (layer)) {
                //    console.log(layer);
                //    map.removeLayer(layer);
                //};
                //marker.remove();
                //radial.remove();
                user_marker.setLatLng(e.latlng).bindPopup("Tenemos que hablar").openPopup();;
                user_radial.remove();
                //setLanLng(e.latlng);
            });
            
        </script>
{% endblock %}