{% extends "layout.html" %}

{% block title %}Stats par type - OpenEventDatabase{% endblock %}

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

{% block header %}Statistiques par type d'évènement (what){% endblock %}

{% block content %}
<p>Total: <strong>{{ total_events }}</strong> évènements</p>
<table>
	<thead>
		<tr>
			<th>Type (what)</th>
			<th>Nombre</th>
			<th>Actions</th>
		</tr>
	</thead>
	<tbody>
		{% for what, count in counts %}
		<tr>
			<td>{{ what }}</td>
			<td>{{ count }}</td>
			<td class="actions">
				<a href="/event?what={{ what }}" target="_blank">Voir JSON</a>
				<a href="/demo/stats?what={{ what }}#map">Voir sur la carte</a>
			</td>
		</tr>
		{% endfor %}
	</tbody>
</table>

{% if selected_what %}
	<h2 id="map">Carte: {{ selected_what }}</h2>
	<div id="mapDiv" class="map-embed"></div>
{% endif %}
{% endblock %}

{% block scripts %}
{% if selected_what %}
<script>
	const map = new maplibregl.Map({
		container: 'mapDiv',
		style: 'https://tiles.openfreemap.org/styles/liberty',
		center: [2.3522, 48.8566],
		zoom: 4
	});
	map.addControl(new maplibregl.NavigationControl());
	fetch('https://api.openeventdatabase.org/event?what={{ selected_what }}&limit=500')
		.then(r => r.json())
		.then(data => {
			if (!data.features || !data.features.length) return;
			const bounds = new maplibregl.LngLatBounds();
			data.features.forEach(f => {
				if (f.geometry && f.geometry.type === 'Point') {
					const c = f.geometry.coordinates;
					new maplibregl.Marker().setLngLat(c).addTo(map);
					bounds.extend(c);
				}
			});
			if (!bounds.isEmpty()) map.fitBounds(bounds, { padding: 40, maxZoom: 12 });
		});
</script>
{% endif %}
{% endblock %}