<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Today's to-do List</title>
    <style>
        body {
            background-color: transparent;
            width: 400px;
        }
    </style>
    <script>
        function checkForUpdates() {
            fetch('/updateTodo')
                .then(response => response.json())
                .then(data => {
                    if (data.updated) {
                        console.log('List has 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 list:', error));
        }

        setInterval(checkForUpdates, 15 * 1000); // Check every 15 seconds
    </script>
</head>
<body>
    {% if items %}
        <h4>Today's to-do List</h4>
        <ul id="todo-list">
            {% for item in items %}
                <li style="text-decoration: {{ 'line-through' if item.crossed == 'yes' else 'none' }};">
                    {{ item.name }}
                </li>
            {% endfor %}
        </ul>
    {% else %}
        <h4>Nothing on the to-do list yet</h4>
    {% endif %}
</body>
</html>
