{% extends "layout.html" %}

{% block title %}Event {{ id }} - OpenEventDatabase{% endblock %}

{% block css %}
<style>
    #map { width:100%; height: 360px; border:1px solid #ddd; border-radius:4px; }
    table { width:100%; border-collapse: collapse; margin-top:12px; }
    th, td { padding: 6px 8px; border-bottom: 1px solid #eee; text-align:left; }
    th { background:#f9fafb; }
</style>
{% endblock %}

{% block header %}Évènement {{ id }}{% endblock %}

{% block content %}
<div id="map"></div>
<table>
    <thead><tr><th>Clé</th><th>Valeur</th></tr></thead>
    <tbody>
        {% for key, value in properties.items()|sort %}
        <tr>
            <td>{{ key }}</td>
            <td>{{ value }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}

{% block scripts %}
<script>
    const f = JSON.parse('{{ feature_json|safe }}');
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://tiles.openfreemap.org/styles/liberty',
        center: f.geometry && f.geometry.coordinates ? f.geometry.coordinates : [2.3522,48.8566],
        zoom: 12
    });
    map.addControl(new maplibregl.NavigationControl());
    if (f.geometry && f.geometry.type === 'Point') {
        new maplibregl.Marker().setLngLat(f.geometry.coordinates).addTo(map);
    }
</script>
{% endblock %}