{% extends 'base.html' %}

{% block content %}
    <h1>Add a New Pin</h1>
    <form method="post" enctype="multipart/form-data">
        {{ form.hidden_tag() }}
        <p>
            {{ form.description.label }}<br>
            {{ form.description(size=32) }}
        </p>
        <p>
            {{ form.photo.label }}<br>
            {{ form.photo() }}
        </p>
        <p>
            <label for="lat">Latitude:</label><br>
            <input type="text" id="lat" name="lat" readonly>
        </p>
        <p>
            <label for="lng">Longitude:</label><br>
            <input type="text" id="lng" name="lng" readonly>
        </p>
        <p>{{ form.submit() }}</p>
    </form>
    <a href="{{ url_for('index') }}">Back to map</a>

    <div id="map" style="height: 600px;"></div>
    
    <script>
        // Initial position of map and user pin
        var map = L.map('map').setView([20.57, -100.38], 13);
        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);

        map.on('click', function(e) {
            var latlng = e.latlng;
            document.getElementById('lat').value = latlng.lat;
            document.getElementById('lng').value = latlng.lng;
        });
    </script>

{% endblock %}