{% extends 'default.html.twig' %}

{% block content %}
<div class="post-form-wrap">
    <h1>{{ page.title }}</h1>
    {% include 'forms/form.html.twig' ignore missing %}
    <button type="button" id="get-location" class="btn-location">Get Current Location</button>
    <p id="location-status" class="location-status"></p>
</div>

<script>
document.getElementById('get-location').addEventListener('click', function() {
    var status = document.getElementById('location-status');
    status.textContent = 'Getting location…';
    if (!navigator.geolocation) {
        status.textContent = 'Geolocation not supported by your browser.';
        return;
    }
    navigator.geolocation.getCurrentPosition(function(pos) {
        var lat = pos.coords.latitude.toFixed(6);
        var lng = pos.coords.longitude.toFixed(6);
        var latField = document.querySelector('input[name="data[lat]"]');
        var lngField = document.querySelector('input[name="data[lng]"]');
        if (latField) latField.value = lat;
        if (lngField) lngField.value = lng;
        status.textContent = 'Location set: ' + lat + ', ' + lng;
    }, function(err) {
        status.textContent = 'Could not get location: ' + err.message;
    });
});
</script>
{% endblock %}