{% extends 'base.html' %}
{% block css %}
td.number { text-align: right; }
table.alternating tr:nth-child(even) {
    background-color: #cccccc;
}
table.alternating tr:nth-child(odd) {
    background-color: #ffffff;
}
th { text-align: left; background-color: white; border: 1px solid black; }
th.desc { background: linear-gradient(to bottom, white, grey); }
{% endblock %}
{% block content %}
<form action="pick_tasks" method="POST">
{% 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 type="submit" name="filter" value="filter" />
</form>

<h3>pick todos for day</h3>
<p><a href="pick_tasks?date={{prev_date}}">prev</a> | {{day.date}} | <a href="pick_tasks?date={{next_date}}">next</a> | {{day.comment}}</p>
<form id="form_to_watch" action="{{action|e}}" method="POST">
<input type="hidden" name="date" value="{{day.date}}" />
<input id="pick_upper" type="submit" value="pick" />
<table class="alternating">
<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_}}">{% if "cancelled" in todo.contemporary_tags %}<s>{% endif %}{% if "deadline" in todo.contemporary_tags %}DEADLINE: {% endif %}<a href="todo?id={{todo.id_}}&return_to=pick_tasks" />{{todo.path|e}}{{todo.title|e}}</a>{%if "cancelled" in todo.contemporary_tags%}</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.day.date}} {{todo.task.title.then|e}}</a></td>
<td>{{todo.comment|e}}</td>
</tr>
{% endfor %}
<th colspan=4>tasks</th>
{% for task in 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 type="hidden" name="search" value="{{search|e}}" />
<input id="pick_lower" type="submit" value="pick" />
</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();
            formHasChanged = true;
        }
    }
    neighbor.insertAdjacentElement('afterend', button);
}
make_selectables_toggler('pick_upper', 'chosen_todo');
make_selectables_toggler('pick_lower', 'choose_task');
</script>
{% endblock %}