{% extends 'base.html' %}

{% block css %}
#pick_upper, #pick_lower { margin-right: 1em; }
{% endblock %}

{% block content %}
<h3>pick todos for day</h3>

<form id="form_to_watch" action="pick_tasks" method="POST">

<p>
<a href="pick_tasks?date={{prev_date}}">prev</a> | {{day.date}} | <a href="pick_tasks?date={{next_date}}">next</a> | {{day.comment}}
</p>

<input type="hidden" name="date" value="{{day.date}}" />
<input class="update" id="pick_upper" name="update" type="submit" value="pick" />
<input type="hidden" name="search" value="{{search|e}}" />
<table>

<tr>
<th colspan=5>task quick-add: <input name="choose_task" size=50 list="tasks"></th>
</tr>
<datalist id="tasks">
{% for task in all_tasks %}
<option value="{{task.id_}}">{{task.title.now}}</option>
{% endfor %}
</datalist>

<tr>
<th>do</th>
<th {% if sort=='effort' %}class="desc"{% endif %}>
<a href="?sort=effort">effort</a>
</th>
<th {% if sort=='title' %}class="desc"{% endif %}>
<a href="?sort=title">what</a>
</th>
<th>comment</th>
</tr>

{% for todo in chosen_todos %}
<tr>
<td class="checkbox">
<input name="chosen_todo" {% if todo.done or todo.day_effort %}class="protected"{% endif %} type="checkbox" value="{{todo.id_}}" checked>
</td>
<td class="number">
{% if todo.day_effort %}{{todo.day_effort}}&nbsp;{% else %}({{todo.default_effort}}){% endif %}{% if todo.done and not "cancelled" in todo.contemporary_tags%}✓{% else %}&nbsp;{% endif %}
</td>
<td>
<a href="todo?id={{todo.id_}}&return_to=pick_tasks">
{% if "cancelled" in todo.tags.now %}<s>{% endif %}
{{todo.path|e}}{{todo.title|e}}
{%if "cancelled" in todo.tags.now %}</s>{% endif %}
</a>
</td>
<td>
{{todo.comment|e}}
</td>
</tr>
{% endfor %}

<tr>
<th colspan=4>earlier todos to continue</th>
</tr>

{% for todo in relevant_todos %}
<tr>
<td class="checkbox">
<input name="choose_todo" type="checkbox" value="{{todo.id_}}">
</td>
<td class="number">
{{todo.all_days_effort}}/{{todo.default_effort}}
</td>
<td>
<a href="todo?id={{todo.id_}}">{{todo.dated_title|e}}</a>
</td>
<td>
{{todo.comment|e}}
</td>
</tr>
{% endfor %}

<tr>
<th colspan=4>tasks</th>
</tr>

{% for task in filtered_tasks %}
<tr>
<td class="checkbox">
<input name="choose_task" type="checkbox" value="{{task.id_}}">
</td>
<td class="number">
({{task.default_effort.then}})&nbsp;
</td>
<td>
<a href="task?id={{ task.id_ }}&return_to=pick_tasks" />{{ task.title.then|e }}</a>
</td>
<td>
{{task.comment|e}}
</td>
</tr>
{% endfor %}

</table>
<input id="update_button" class="update" id="pick_lower" name="update" type="submit" value="pick" />
<br />
{% include 'tagfilters.html' %}
<br />
<input name="hide_chosen_tasks" type="checkbox" {% if hide_chosen_tasks %}checked{% endif %} /> hide chosen tasks<br />
search: <input name="search" value="{{search|e}}" />
<input id="filter_button" type="submit" name="filter" value="filter" />
</form>

{% include 'watch_form.html' %}
<script>
function make_selectables_toggler(neighbor_id, input_name) {
    var neighbor = document.getElementById(neighbor_id);
    var button = document.createElement('button');
    button.textContent = 'toggle selectables';
    button.onclick = function(event) {
        event.preventDefault();
        let checkboxes = document.getElementsByName(input_name);
        for (let i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].classList.contains('protected')) { 
                continue;	
    	}
            checkboxes[i].click();
            changes_to_comit = true;
        }
    }
    neighbor.insertAdjacentElement('afterend', button);
}
make_selectables_toggler('pick_upper', 'chosen_todo');
make_selectables_toggler('pick_lower', 'choose_task');
</script>
{% endblock %}