{% extends 'layout.html' %}
{% block content %}

<div class="grid-container">

    {% if current_user == user.id %}
        <h1>Task-Übersicht für {{ user.username }}</h1>
    {% endif %}

    {% for message in messages %}
        <p id="messages" style="background-color: red">{{message}}</p>
    {% endfor %}

    {% if tasks %}
        <form action="" method="post">
        {% csrf_token %}

            <div class="grid-x grid-margin-x">

                {% regroup tasks by task_list as section_list %}
                {% for group in section_list %}

                    <div class="cell">
                    <ul class="no-bullet">

                    <h3>{{ group.grouper }}</h3>

                    {% for task in group.list %}

                    <div class="grid-x">

                        <div class="cell medium-3 large-3 small-10">
                            <input type="checkbox" name="checkbox" value="{{ task.id }}" {% if task.completed %} checked {% endif %}>
                            {{ task.title }}</a>
                        </div>

                        <div class="cell medium-4 large-4 small-10">
                            {% if task.due_date %}
                                Fälligkeitsdatum: {{ task.due_date|date:"d.m.Y" }}
                            {% endif %}
                        </div>

                        <div class="cell medium-4 large-4 small-10">
                            {% if task.assigned_to %}
                                nur dir zugewiesen!
                            {% endif %}
                        </div>
                    </div>

                    {% endfor %}

                    </ul>
                    </div>

                {% endfor %}

                <div class="cell">
                <ul class="no-bullet">

                    <input type="submit" class="button" name="btn_checkbox" value="Task abschließen">

                </ul>
                </div>
            </div>
        </form>
    {% else %}
        <div class="grid-x">
            <div class="cell">
                keine Tasks in dieser Liste für dich.
            </div>
        </div>
    {% endif %}

    <h2>Andere Task-Übersicht anzeigen</h2>

    <form action="" method="post">
    {% csrf_token %}

    <div class="grid-x grid-margin-x">
        <div class="cell medium-4 large-3 small-10">
            <label>Task-Gruppe
            <select id="id_tasklist" name="tasklist">
                <option value="all">
                    alle Task-Gruppen
                </option>
                {% for elem in tasklists %}
                    <option value="{{ elem.id }}">
                        {{ elem.name }}
                    </option>
                {% endfor %}
            </select>
            </label>
        </div>

        <div class="cell medium-4 large-3 small-10">
            <label>Tasks
            <select id="id_task" name="tasks">
                <option value="own">
                    nur die eigenen Tasks
                </option>
                <option value="all">
                    die an alle zugewiesenen Tasks
                </option>
            </select>
            </label>
        </div>

        <div class="cell medium-4 large-3 small-10">
            <label>Aktion
            <select id="id_action" name="action">
                <option value="show_incompleted" {% if not current_action %} selected {% endif %}>unvollständige Tasks</option>
                <option value="show_all" {% if current_action %} selected {% endif %}>alle Tasks</option>
            </select>
            </label>
        </div>

        <div class="cell medium-3 large-3 small-10 align-self-bottom">
            <input type="submit" class="button" name="btn_user" value="Anzeigen">
        </div>
    </div>

    </form>


    <h2>Neuen Task hinzufügen</h2>

    <form action="" method="post">
    {% csrf_token %}

        <div class="grid-x grid-margin-x">

            {{ formset.management_form }}

            {% for form in formset %}
            <div class="cell medium-3 large-2 small-10">
                {{ form.label }}
                {{ form }}
            </div>
            {% endfor %}

            <div class="cell medium-3 large-2 small-10 align-self-bottom">
                <input type="submit" class="button" name="btn_input" value="Hinzufügen">
            </div>

        </div>

    </form>

</div>

{% endblock %}
