<!DOCTYPE html>
<html>
<head>
    <title>Flask Ping Example</title>
</head>
<body>
    <h1>Machine Uptime</h1>
    <table>
        <tr>
            <th>URL</th>
            <th>Status</th>
        </tr>
        {% for url in urls %}
        <tr>
            <td>{{ url }}</td>
            <td id="{{ loop.index }}">Waiting for response...</td>
        </tr>
        {% endfor %}
    </table>

    <script>
        function pingUrl() {
            const url = document.getElementById('urlInput').value;
            fetch(`/ping?url=${encodeURIComponent(url)}`)
                .then(response => response.text())
                .then(text => {
                    const statusCell = document.getElementById('status');
                    statusCell.innerText = text;
                });
        }

        function pingAllUrls() {
            const rows = document.getElementsByTagName('tr');
            for (let i = 1; i < rows.length; i++) {
                const urlCell = rows[i].cells[0];
                const statusCell = rows[i].cells[1];
                const url = urlCell.innerText;
                fetch(`/ping?url=${encodeURIComponent(url)}`)
                    .then(response => response.text())
                    .then(text => {
                        statusCell.innerText = text;
                    });
            }
        }

        setTimeout(pingAllUrls, 500); // Wait for 5 seconds and then call pingAllUrls
    </script>
</body>
</html>
