{% extends "base.html" %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<style>
    #map { height: 600px; width: 100%; margin-top: 20px; border: 1px solid #ccc; }
</style>
{% endblock %}

{% block title %}Events Map{% endblock %}

{% block headers %}
<h2>Forthcoming Events Map</h2>
{% endblock headers %}

{% block content %}

<div id="map"></div>

<script>
    var map = L.map('map').setView([43.7167, 10.4], 5); // Default view (Italy approx)

    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 events = [
        {% for event in events %}
        {
            title: {{ event.title|tojson }},
            place: {{ event.place|tojson }},
            url: {{ event.url()|tojson }},
            date: {{ event.date_from.strftime('%Y-%m-%d')|tojson }},
            coordinates: {{ event.place_coordinates|tojson }}
        },
        {% endfor %}
    ];

    events.forEach(event => {
        if (event.coordinates) {
            var coords = event.coordinates.split(',');
            if (coords.length === 2) {
                var lat = parseFloat(coords[0]);
                var lon = parseFloat(coords[1]);
                if (!isNaN(lat) && !isNaN(lon)) {
                    var marker = L.marker([lat, lon]).addTo(map);
                    marker.bindPopup("<b><a href='" + event.url + "'>" + event.title + "</a></b><br>" + event.date + "<br>" + event.place);
                }
            }
        }
    });

</script>

{% endblock %}