{{define "title"}}
    stats
{{end}}

{{define "body"}}
    <p id="app"></p>

    <script>
        window.addEventListener("load", () => {
            setInterval(fetchStats, 100);
        });

        async function fetchStats() {
            let stats = await fetch("/api/stats");
            stats = await stats.json();
            document.getElementById("app").innerHTML = jsonToHtml(stats);
        }

        function jsonToHtml(json) {
            if (json === null || typeof json !== "object") {
                return String(json);
            }

            let html = "<ul>";
            for (const [key, value] of Object.entries(json)) {
                html += `<li>${key}: ${typeof value === "object" && value !== null ? jsonToHtml(value) : String(value)}</li>`;
            }
            html += "</ul>";
            return html;
        }
    </script>
{{end}}