{% extends 'base.html' %}

{% block css %}
td.number, td.checkbox { text-align: center; }
td { vertical-align: middle; }
td button { padding: 0em; }
th.centered { text-align: center; }
ul { margin: 0; }
details > summary {
    list-style-type: none;
}
details > summary.has_dependers {
    list-style-type: '▶';
}
details[open] > summary.has_dependers {
    list-style-type: '▼';
}
details > summary.has_deps::after {
    content: '▶';
}
details[open] > summary.has_deps::after {
    content: '▼';
}
{% endblock %}

{% block content %}
<h3>do todos</h3>

<form id="form_to_watch" action="do_todos" method="POST">
{% include 'tagfilters.html' %}
<br />
<input name="hide_done" type="checkbox" {% if hide_done %}checked{% endif %} /> hide done
<input id="filter_button" type="submit" name="filter" value="filter" />
<p>
| <a href="do_todos?date={{prev_date}}">prev</a> | {{day.date}} | <a href="do_todos?date={{next_date}}">next</a> | 
comment: <input name="day_comment" value="{{day.comment|e}}">
<input class="update" type="submit" name="update" value="update">
<input type="hidden" name="date" value="{{day.date}}" />
</p>

<p>
task quick-add: <input name="choose_task" size=50 list="tasks" autocomplete="off">
don't adopt, make new: <input type="checkbox" name="dont_adopt" />
</p>
<datalist id="tasks">
{% for task in all_tasks %}
<option value="{{task.id_}}">({{task.subtask_depth}}) {{task.title.now}}</option>
{% endfor %}
</datalist>

{% if adoptable_past_todos %}
<p>
<details>
<summary>
there are adoptable/unfinished past todos ({{adoptable_past_todos|count}})
</summary>
<table class="alternating">
<tr>
<th>adopt?</th><th>date</th><th>title</th><th>comment</th>
</tr
{% for todo in adoptable_past_todos %}
<tr>
<td class="checkbox"><input name="choose_todo" type="checkbox" value="{{todo.id_}}"></td>
<td>{{todo.earliest_date}}</td>
<td><a href="todo?id={{todo.id_}}">{{todo.title|e}}</a></td>
<td>{{todo.comment|e}}</td>
</tr>
{% endfor %}
</table>
</details>
</p>
{% endif %}

<table class="alternating">
<tr>
<th {% if sort=='done' %}class="desc"{% endif %}>
<a href="?sort=done">done</a>
</th>
<th class="centered{% if sort=='default_effort' %} desc{% endif %}">
<a href="?sort=default_effort">effort</a>
</th>
<th {% if sort=='importance' %}class ="desc"{% endif %}>
<a href="?sort=importance">importance</a>
</th>
<th {% if sort=='title' %}class="desc"{% endif %}>
<a href="?sort=title">todo</a>
</th>
<th>comment</th>
</tr>

{% for todo in todos %}
<tr>
<input name="todo_id" value="{{todo.id_}}" type="hidden" >
<td class="checkbox">
<input name="done" type="checkbox" value="{{todo.id_}}" {% if todo.done %}checked{% endif %} {% if todo.deps_done == false %}disabled{% endif %}>
</td>
<td class="number">
<input class="effort_input" name="effort" type="number" step=0.1 size=7 value="{% if todo.day_effort is not none %}{{todo.day_effort}}{% endif %}" placeholder={{"%.1f"|format(todo.task.default_effort.then)}} >
</td>
<td class="number">
<input name="importance" type="number" step=0.1 size=7 value={{todo.importance}} } >
</td>
<td>
{% if todo.dependers|length > 0 or todo.deps|length > 0 %}
<details>
<summary class="{% if todo.dependers|length > 0 %}has_dependers{% endif %} {% if todo.deps|length > 0 %}has_deps{% endif %}">
{% endif %}
<a href="todo?id={{todo.id_}}&return_to=do_todos">{{todo.title|e}}</a>
{% if todo.dependers|length > 0 or todo.deps|length > 0 %}
</summary>
{% if todo.dependers|length > 0 %}
dependers:
<ul>
{% for path in todo.depender_paths %}
<li>{% for depender_todo in path %}<a href="todo?id={{depender_todo.id_}}&return_to=do_todos">{{ depender_todo.title|e }}</a> ▶ {% endfor %}…
{% endfor %}
</ul>
{% endif %}
{% if todo.deps|length > 0 %}
depends on:
<ul>
{% for dep_todo in todo.deps %}
<li>[{% if dep_todo.done %}✓{% else %} {% endif %}] <a href="todo?id={{dep_todo.id_}}&return_to=do_todos">{{ dep_todo.title|e }}</a>{% if dep_todo.deps|length > 0 %} ▶{% endif %}
{% endfor %}
</ul>
{% endif %}
</details>
{% endif %}
</td>
<td>
<input name="effort_comment" type="text" size=100 value="{{todo.comment|e}}" />
</td>
</tr>
{% endfor %}

</table>
<input id="update_button" class="update" type="submit" name="update" value="update">
</form>

{% include 'watch_form.html' %}
<script>
mere_filter_inputs = mere_filter_inputs.concat(['hide_done']);
var effort_inputs = document.getElementsByClassName("effort_input");
for (let i = 0; i < effort_inputs.length; i++) {
    let input = effort_inputs[i];
    let button = document.createElement('button');
    button.innerHTML = '+' + parseFloat(input.placeholder).toFixed(1);
    button.onclick = function(event) {
        event.preventDefault();
        if (input.value) {
            input.value = parseFloat(input.value) + parseFloat(input.placeholder);
        } else {
            input.value = parseFloat(input.placeholder);
        }
        input.value = parseFloat(input.value).toFixed(1);
        changes_to_commit = true; 
    };
    input.insertAdjacentElement('afterend', button);
}
</script>
{% endblock %}