{% extends 'base.html' %}

{% block content %}
<h1>{% block title %} ToDos {% endblock %}</h1>
<div id="todoList">
    {% for todo in todos %}
    <div>
        {% if todos[todo].done%}
        <input type="checkbox" style="margin-right: 2mm; " onclick="checkTodo({{todo}})" checked/><font color="green">{{todos[todo].message}}</font>
        {% else %}
        <input type="checkbox" style="margin-right: 2mm; " onclick="checkTodo({{todo}})"/>{{todos[todo].message}}
        {% endif %}
    </div>
    {% endfor %}
</div>

<script>
    async function checkTodo(id){
        const response = await fetch("http://127.0.0.1:5000/checktodo", {
            method: "POST",
            body: id,
        });
        fetch("/reloadChecklist", {
            method: "GET"
            }).then(response => {
            return response.text();
            })
            .then(html => {
            todoList.innerHTML = html
            })
    }

    // check alarms in here too
    alarms = {{ alarms|tojson }};
    function checkAlarms(){
        for(var i = 0; i < alarms.length; i++){
            
            const [dateComponents, timeComponents] = alarms[i].datetime.split(' ');

            const [day, month, year] = dateComponents.split('.');
            const [hours, minutes] = timeComponents.split(':');

            const date = new Date(+year, +month - 1, +day, +hours, +minutes);
            if(date <=new Date()){
                postAlarm(alarms[i]);
                alert(alarms[i].message);
                alarms.splice(i, 1);

            }  
        }
        setTimeout(checkAlarms, 15000);
    }
    checkAlarms();
</script>

{% endblock %}