{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='tasks.css') }}">
<script src="{{ url_for('static', filename='tasks.js') }}" defer></script>
{% endblock %}

{% macro make_task(task) %}
<li>
    <form method="post">
        <span class="view-box">
            <button class="task-id" name="action" value="mark" type="button">{{ task["id"] }}</button>
            <output class="task-value">{{ task["txt"] }}</output>
            {% for pre in task["pre"] %}
            <output class="task-pre">{{ pre }}</output>
            {% endfor %}
        </span>
        <span class="edit-box">
            <input class="task-id-editor" name="tid" size="3" placeholder="000" value="{{ task['id'] }}">
            <input class="task-value-editor" name="content" value="{{ task['txt'] }}">
            <input class="task-pre-editor" name="pre" value="{{ ','.join(task['pre']) }}">
            <button class="btn-save" name="action" value="save" type="submit">Save</button>
            <button class="btn-cancel" type="button">Cancel</button>
            <button class="btn-delete" name="action" value="delete" type="submit">Delete</button>
        </span>
        <input type="hidden" name="oid" value="{{ task['_id'] }}">
        <input type="hidden" name="done" value="{{ task['done'] }}">
    </form>
</li>
{% endmacro %}

{% block content %}
<main>
    <h2>Active Tasks:</h2>
    <ul>
        {% for task in active_tasks %}
        {{ make_task(task) }}
        {% endfor %}
        <li>
            <form method="post">
                <span class="view-box">
                    <button id="btn-new" type="button">New Task</button>
                </span>
                <span class="edit-box">
                    <input class="task-id-editor" name="tid" size="3" placeholder="000">
                    <input class="task-value-editor" name="content">
                    <input class="task-pre-editor" name="pre">
                    <button id="btn-make" name="action" value="save" type="submit">Create Task</button>
                    <button id="btn-cancel" type="button">Cancel</button>
                </span>
            </form>
        </li>
    </ul>
    <h2>Blocked Tasks:</h2>
    <ul>
        {% for task in blocked_tasks %}
        {{ make_task(task) }}
        {% endfor %}
    </ul>
    <h2>Complete Tasks:</h2>
    <ul>
        {% for task in complete_tasks %}
        {{ make_task(task) }}
        {% endfor %}
    </ul>
</main>
{% endblock %}