{% extends "kin/base.html" %}
{% load static %}
{% block title %}Statistics{% endblock %}
{% block content %}
<h1>Statistics</h1>
<div class="stats"><div class="stat"><b>{{ total }}</b><span>people</span></div><div class="stat"><b>{{ sex.M }}</b><span>male</span></div><div class="stat"><b>{{ sex.F }}</b><span>female</span></div></div>
<div class="grid2">
<section class="card"><h2>Surname distribution</h2>{% for s, n, pct in surnames %}<div class="bar"><span class="lbl">{{ s }}</span><span class="fill" style="width:{{ pct }}%"></span><span class="n">{{ n }}</span></div>{% endfor %}</section>
<section class="card"><h2>Lifespan by generation</h2>
<table class="table slim"><thead><tr><th>Gen</th><th>People</th><th>Avg</th><th>Min</th><th>Max</th></tr></thead><tbody>{% for l in lifespans %}<tr><td>{{ l.generation }}</td><td>{{ l.count }}</td><td>{{ l.average }}</td><td>{{ l.min }}</td><td>{{ l.max }}</td></tr>{% empty %}<tr><td colspan="5" class="muted">No complete lifespans yet.</td></tr>{% endfor %}</tbody></table>
<p class="muted">Years between birth and death for people with both dates. Generation 1 are the earliest recorded ancestors.</p></section></div>
<section class="card"><h2>Places</h2>
<div id="map" class="map" hidden></div>
{{ places|json_script:"places-data" }}
<table class="table slim"><tbody>{% for p in places %}<tr><td>{{ p.name }}</td><td>{{ p.count }} events</td><td class="muted">{{ p.lat }}, {{ p.lon }}</td></tr>{% empty %}<tr><td class="muted">No places with coordinates.</td></tr>{% endfor %}</tbody></table>
<p class="muted">The interactive map loads Leaflet from cdnjs when online; the table above always works.</p></section>
{% endblock %}