<div class="card mt-6">
    <h2 class="pitt-primary font-bold text-2xl mb-4">📈 ELO Rating History</h2>
    <canvas id="ratingChart"></canvas>
</div>

<script>
    const chartData = {
        labels: {{ labels | json }},
        datasets: [
            {
                label: 'ELO Rating',
                data: {{ data | json }},
                borderColor: '#003594',
                backgroundColor: 'rgba(0, 53, 148, 0.1)',
                borderWidth: 3,
                fill: true,
                tension: 0.4,
                pointRadius: 4,
                pointBackgroundColor: '#FFB81C',
                pointBorderColor: '#003594',
                pointBorderWidth: 2,
            }
        ]
    };

    const ctx = document.getElementById('ratingChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: chartData,
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    display: true,
                    labels: {
                        font: { size: 14 },
                        color: '#003594'
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: false,
                    grid: { color: 'rgba(0, 53, 148, 0.1)' },
                    ticks: { color: '#003594' }
                },
                x: {
                    grid: { color: 'rgba(0, 53, 148, 0.05)' },
                    ticks: { color: '#003594' }
                }
            }
        }
    });
</script>
