{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-3">
    <h3>Draw/Edit Custom Zones</h3>
    <div id="map" style="height: 600px;"></div>
</div>

<script>
    const map = L.map('map').setView([0.1, 37.0], 7);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    const drawnItems = new L.FeatureGroup().addTo(map);
    const drawControl = new L.Control.Draw({
        edit: { featureGroup: drawnItems },
        draw: { polygon: true, marker: true, polyline: false, rectangle: true, circle: false }
    });
    map.addControl(drawControl);

    map.on(L.Draw.Event.CREATED, function (e) {
        drawnItems.addLayer(e.layer);
        const geojson = e.layer.toGeoJSON();
        console.log("Drawn GeoJSON:", geojson);
        // Optionally send to backend
        // fetch('/api/save_geometry', {method: 'POST', body: JSON.stringify(geojson)})
    });
</script>
{% endblock %}