{{define "title"}}Timeline — Talas Wiki{{end}}

{{define "content"}}
<div class="breadcrumb"><a href="/">/</a> / <span>timeline</span></div>
<h1>Timeline d'activite</h1>
<p class="subtitle">Modifications par jour sur les 90 derniers jours.</p>
<div id="timeline-container" style="margin-top:16px;border:1px solid var(--border);background:var(--bg-alt);padding:16px;overflow-x:auto"></div>
{{end}}

{{define "scripts"}}
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
fetch('/api/timeline').then(function(r){return r.json()}).then(function(data){
    var container = document.getElementById('timeline-container');
    var cellSize = 14, gap = 2, cols = data.length;
    var width = Math.max(cols * (cellSize + gap), container.offsetWidth);
    var height = cellSize + 40;

    var svg = d3.select('#timeline-container').append('svg').attr('width', width).attr('height', height);
    var maxCount = d3.max(data, function(d){return d.count}) || 1;

    var color = d3.scaleLinear().domain([0, maxCount]).range(['#1a1a2e', '#a3be8c']);

    svg.selectAll('rect').data(data).enter().append('rect')
        .attr('x', function(d,i){ return (cols - 1 - i) * (cellSize + gap); })
        .attr('y', 0).attr('width', cellSize).attr('height', cellSize).attr('rx', 2)
        .attr('fill', function(d){ return d.count > 0 ? color(d.count) : '#1a1a2e'; })
        .attr('stroke', '#2e3440').attr('stroke-width', 0.5)
        .append('title').text(function(d){ return d.date + ': ' + d.count + ' pages'; });

    // Date labels
    data.forEach(function(d, i) {
        if (i % 7 === 0) {
            svg.append('text').attr('x', (cols - 1 - i) * (cellSize + gap))
                .attr('y', cellSize + 16).attr('font-size', 8).attr('fill', '#4c566a')
                .attr('font-family', 'JetBrains Mono, monospace')
                .text(d.date.substring(5));
        }
    });
});
</script>
{{end}}