<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <title>Active votes</title>
    <style>
        body {
            background-color: transparent;
            color: white;
            width: 400px;
            position: absolute;
            bottom: 0; left: 0;
        font-weight: bold;
        }
    </style>
    <script>
        function checkForUpdates() {
            fetch('/updateVotes')
                .then(response => response.json())
                .then(data => {
                    if (data.updated) {
                        console.log('Votes have changed, refreshing the page...');
                        window.location.reload();  // Refresh if votes have changed
                    } else {
                        console.log('No changes detected.'); // Log if no changes
                    }
                })
                .catch(error => console.error('Error fetching updated votes:', error));
        }

        setInterval(checkForUpdates, 15 * 1000); // Check every 15 seconds
    </script>
</head>
<body>
    {% if votes %}
        <table>
            <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            {% for vote in votes %}
                <tr>
                    <td>{{ vote[2] }}</td>
                    {% if vote[1] == 1 %}
                    <td>{{ vote[1] }} vote</td>
                    {% else %}
                    <td>{{ vote[1] }} votes</td>
                    {% endif %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% endif %}
</body>
</html>
