{% extends "header.html" %} {% block content %}
<header>
    <h1 class="title">Leaderboard</h1>
</header>
<table class="table">
    <thead>
        <tr>
            <th>Position</th>
            <th>Name</th>
            <th>Elo</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody id="leaderboard-body">
        {% for row in data %}
        <tr>
            <td>{{ row['position'] }}</td>
            <td>{{ row['name'] }}</td>
            <td>{{ row['elo'] }}</td>
            <td>{{ row['username'] }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<script>
    async function fetchLeaderboardData() {
        try {
            const response = await fetch("http://localhost:5000/leaderboard");
            if (!response.ok) return;

            const data = await response.json();

            const tableBody = document.getElementById("leaderboard-body");

            tableBody.innerHTML = "";

            data.forEach((row) => {
                const tr = document.createElement("tr");
                tr.innerHTML = `
                    <td>${row.position}</td>
                    <td>${row.name}</td>
                    <td>${row.elo}</td>
                    <td>${row.username}</td>
                `;
                tableBody.appendChild(tr);
            });
        } catch (error) {
            console.error("Failed to fetch leaderboard data:", error);
        }
    }

    // Poll the server every 5 seconds
    setInterval(fetchLeaderboardData, 5000);

    // Initial load
    fetchLeaderboardData();
</script>

{% endblock %}