{% extends 'base.html' %}

{% block css %}
th.toplevel { padding-right: 1em; }
input[type="submit"].delete { background-color: #ff7777; }
div.delete { float: right; }
td.center { text-align: center; }
{% endblock %}

{% block content %}
<h3>edit todo</h3>

<form id="form_to_watch" action="todo" method="POST">
<input type="hidden" name="todo_id" value="{{todo.id_}}" />
<input type="hidden" name="return_to" value="{{return_to}}" />
<table>

<tr>
<th class="toplevel">task</th>
<td><a href="task?id={{ todo.task.id_ }}">{{ todo.task.title.then|e }}</a></td>
</tr>

<tr>
<th class="toplevel">default effort</th>
<td>{{ todo.default_effort }}</td>
</tr>

<tr>
<th class="toplevel">efforts</th>
<td>
<table>
<tr><th>date</th><th>effort</th><th>delete</th></tr>
{% for date, effort in todo.efforts.items() %}
<tr>
<td>
<input name="effort_date" size=10 value="{{date}}" {% if todo.children and effort %}disabled{% endif %}>
</td>
<td>
<input type="number" name="effort" step=0.1 size=8 value="{{effort}}" placeholder="{{todo.default_effort}}" {% if todo.children and effort %}disabled{% endif %} />
</td>
<td>
{% if not (todo.children and effort) %}<input type="checkbox" name="delete_effort" value="{{date}}" />{% endif %}
</td>
</tr>
{% endfor %}
<tr>
<td>
<input name="effort_date" size=10 value="">
</td>
<td>
<input type="number" name="effort" step=0.1 size=8 value="" {% if todo.children %} disabled {% else %} placeholder="{{todo.default_effort}}" {% endif %} />
</td>
</tr>
</table>
</td>
</tr>

<tr>
<th class="toplevel">total effort</th>
<td>{{todo.all_days_effort}}</td>
</tr>

<tr>
<th class="toplevel">importance</th>
<td class="input">
<input type="number" name="importance" step=0.1 size=8 value="{{ todo.importance }}" />
</td>
</tr>

<tr>
<th class="toplevel">comment</th>
<td class="input">
<textarea name="comment" rows=3 cols=100>{{todo.comment|e}}</textarea>
</td>
</tr>

<tr>
<th>done</th>
<td class="input">
{% if todo.children %}✓{% else %}<input type="checkbox" name="done" {% if todo.done %}checked{% endif %}/>{% endif %}
</td>
</tr>

<tr>
<th class="toplevel">day tags</th>
<td>
{% for tag in tags | sort %}
{% if tag in todo.task.tags.now %}
&nbsp;✓
{% else %}
<input type="checkbox" name="day_tag_{{tag|e}}"{% if tag in todo.day_tags %} checked{% endif %}/>
{% endif %} {{ tag }}
<br />
{% endfor %}
add: <input name="joined_day_tags" value="" size=100 >
</td>
</tr>

<tr>
<th class="toplevel">parents</th>
<td>
<ul>
{% for parent in todo.parents %}
<li><a href="todo?id={{parent.id_}}">{{parent.title}}</a>
{% endfor %}
</ul>
</td>
</tr>

<tr>
<th class="toplevel">children</th>
<td>
<table class="alternating">
<tr>
<th>adopt</th><th>effort</th><th>title</th><th>comments</th>
</tr>
{% for todo in child_todos %}
<tr>
<td class="center"><input name="adopt_child" type="checkbox" value="{{todo.id_}}" checked/></td>
<td class="number">{{ '{:2.1f}'.format(todo.all_days_effort) }} {% if todo.done %}✓{% else %}&nbsp;{% endif %}</td>
<td><a href="todo?id={{todo.id_}}">{{todo.day.date}} {{todo.title}}</a></td>
</tr>
{% endfor %}
<tr>
<th colspan=4>--------</th>
</tr>
{% for todo in filtered_todos %}
<tr>
<td class="center"><input name="adopt_child" type="checkbox" value="{{todo.id_}}" /></td>
<td class="number">{{ '{:2.1f}'.format(todo.all_days_effort) }} {% if todo.done %}✓{% else %}&nbsp;{% endif %}</td>
<td><a href="todo?id={{todo.id_}}">{{todo.day.date}} {{todo.title}}</a></td>
</tr>
{% endfor %}
</table>
</td>
</tr>

</table>
<input class="update" name="update" type="submit" value="update" />
<div class="delete">
<input class="delete" type="submit" name="delete" value="delete" />
</div>

<hr />
{% include 'tagfilters.html' %}
<br />
from: <input name="start" {% if start_date %}value="{{ start_date }}"{% endif %} placeholder="yesterday" />
to: <input name="end" {% if end_date %}value="{{ end_date }}"{% endif %} placeholder="2030-12-31" />
search: <input name="search" value="{{search|e}}" />
<input type="submit" name="filter" value="filter" />

</form>
{% include 'watch_form.html' %}
<script>
mere_filter_inputs = mere_filter_inputs.concat(['search', 'start', 'end']);
</script> 
{% endblock %}