{% extends "layout.html" %}
{% block body %}
<script>

var baseurl = '../' + {{ view[0]['value'] }} + '/' + {{ view[1]['value'] }} + '/';

function changeStatus(id) {
    if (document.getElementById("task_" + id).checked)
        window.location.href = baseurl + "check/?id=" + id;
    else window.location.href = baseurl + "uncheck/?id=" + id;
}

function changePanic(id, panic) {
    if (!panic)
        window.location.href = baseurl + "panic/?id=" + id;
    else window.location.href = baseurl + "unpanic/?id=" + id;
}

function addTask() {
    var desc = escape(document.getElementById("newTask").value);
    window.location.href = baseurl + 'add/?desc=' + desc;
}

function removeTask(id) {
    window.location.href = baseurl + 'remove/?id=' + id;
}

</script>
<div id="yearweekpanel">
    {% for navpart in view %}
        <div class="navpart arial">
            <div style="float: left; margin-left: 100px;"><a class="yearweekcontrols" href="{{ navpart['prevpath'] }}"><<</a></div>
            <div>{{ navpart['name'] }} {{ navpart['value'] }}</div>
            <div style="float: right; margin-right: 100px;"><a class="yearweekcontrols" href="{{ navpart['nextpath'] }}">>></a></div>
        </div>
    {% endfor %}
</div>
<div id="taskpanel">
    <ul id="tasklist">
    {% for task in tasks %}
        <li class="{% if task.done %}done{% elif task.panic %}panic{% else %}notdone{% endif %}">
        <div class="taskinfo">
        {{ task.start_week }} - 
        {% if task.done %}
            {{ task.end_week }}
        {% endif %}
        </div>
        <input type="checkbox" id="task_{{ task.id }}" {% if task.done %}checked{% endif %} onclick="changeStatus({{ task.id }})" />
        
        <span class="taskcontrols arial">
        <a class="panicbutton {% if task.done %}notvisible{% elif task.panic %}notdone{% else %}panic{% endif %}" href="javascript:changePanic({{ task.id }}, {{ task.panic }});">panic</a>
        <a class="removebutton {% if task.done %}done{% else %}notdone{% endif %}" href="javascript:removeTask({{ task.id }});">remove</a>
        </span>
        <span{% if task.panic and not task.done %} style="font-weight: bold;"{% endif %}>
        {{ task.description }}
        </span>
        </li>
    {% else %}
    No tasks.
    {% endfor %}
    </ul>
</div>
<div id="addtaskpanel">
    <input id="newTask" style="width: 73%;" />
    <input style="float: right; width: 23%;" type="button" value="Add task" onclick="addTask()" />
</div>
{% endblock %}