{% extends "ToDo/base.html" %}
{% block content %}
{% load crispy_forms_tags %}
{% load tz %}

<style>
    {% if request.user_agent.is_mobile %}
        .list-title {
            font-size: 7ch;
        }
    {% else %}
        .list-title {
            font-size: 12ch;
        }
    {% endif %}
</style>

{% if tasklist != "Tasks" %}
    <a class="list-title" href="{% url 'tasklist-edit' tasklist.pk %}"
        style="text-decoration: none; text-overflow: ellipsis; font-weight: 900; color:slateblue">
        <center>
            {{ tasklist.title }}
        </center>
    </a>
{% else %}
    <a class="list-title" style="text-decoration: none; font-weight: 900; color:slateblue">
        <center>Tasks</center>
    </a>
{% endif %}
<br>

<form action="/createTask/" id="todo-add-form" method="POST" name="add_form">
    {% csrf_token %}
    <fieldset class="form-group dark-mode-assist">
        <legend class="border-bottom mb-4">New ToDo in {{ tasklist.title }}!</legend>
        {{ add_form|crispy }}
        <p id="hidden-parent-list" style="display: none;">{{ tasklist.title }}</p>
        <div class="form-group">
            <button class="btn btn-outline-info" type="submit" name="add-task">Add</button>
        </div>
    </fieldset>
</form>

{% if todos %}
    <ul id="todo-list" class="list-group content-section">
        {% for todo in todos %}
            <li id="todo-item-{{ todo.pk }}" class="list-group-item hoverable-item dark-mode-assist-section big-list-item">
                <button style="float:left" onclick="toggleTodo({{ todo.pk }}, 'check', 'single-view')"
                    class="btn btn-outline-success">
                    <i class="fa fa-check"></i>
                </button>
                <a style="margin-left: 7px; color:inherit; text-decoration: none; font-size: 2.5ch;"
                    href="{% url 'todo-detailed' todo.title todo.pk %}"> {{ todo.title }}
                </a>
                
                {% if todo.num_of_subtasks != 0 %}
                    <i title="Task has subtasks" style="font-size: 20px; color: aqua;" class="fas fa-tasks"></i> 
                {% endif %}
                {% if todo.has_notes %}
                    <i title="Task has notes" style="font-size: 20px; color: coral;" class="far fa-sticky-note"></i>
                {% endif %}
                {% if todo.has_attachments %}
                    <i title="Task has attachments" style="font-size: 20px; color:pink;" class="fas fa-paperclip"></i>
                {% endif %}
                {% if todo.due_date %}
                    <br>
                {% endif %}
                {% if todo.due_date %}
                    <i title="Task has due date" style="font-size: 20px; color: {{ todo.due_date_color }}" class="far fa-clock"></i>
                    <small class="text-muted">{{ todo.due_date|timezone:request.user.profile.timezone|date:"F d" }}</small>
                {% endif %}


                <button data-toggle="modal" data-target="#exampleModalCenter{{ todo.pk }}" style="float: right;"
                    class="btn btn-outline-danger">
                    <i class="fas fa-trash"></i>
                </button>
                {% if todo.important %}
                    <button id="todo-important-{{ todo.pk }}" onclick="toggleImportant({{ todo.pk }}, 'unmark')"
                        style="float: right; margin-right:3px" class="btn btn-warning"><i class="fas fa-star"></i>
                    </button>
                {% else %}
                    <button id="todo-important-{{ todo.pk }}" onclick="toggleImportant({{ todo.pk }}, 'mark')"
                        style="float: right; margin-right:3px" class="btn btn-secondary">
                        <i class="fas fa-star"></i>
                    </button>
                {% endif %}
            </li>
            <div class="modal fade" id="exampleModalCenter{{ todo.pk }}" tabindex="-1" role="dialog"
                aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content dark-mode-assist-section">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLongTitle">Confirm the deletion</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            Are you sure you want to delete this task permanently?
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button data-dismiss="modal" onclick="deleteItem('todo', {{ todo.pk }})" type="submit"
                                class="btn btn-danger">Yes, I am sure</button>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </ul>

{% else %}
    <ul id="todo-list" class="list-group content-section" style="display: none;">
    </ul>
{% endif %}


{% if completed_todos %}
    <div id="completed-tasks">
        <a class="btn btn-outline-warning" data-toggle="collapse" href="#multiCollapseExample2" role="button"
                aria-expanded="false" aria-controls="multiCollapseExample2">See completed tasks</a>
        <div class="row">
                <div class="col">
                <div class="collapse multi-collapse" id="multiCollapseExample2">
                    <br>
                    <div class="card card-body dark-mode-assist-section">
                        <ul id="todo-list-completed" class="list-group content-section">
                            {% for todo in completed_todos %}
                                <li id="todo-item-{{ todo.pk }}-completed" class="hoverable-item list-group-item dark-mode-assist-section big-list-item">
                                    <button style="float:left" onclick="toggleTodo({{ todo.pk }}, 'uncheck', 'single-view')"
                                        class="btn btn-success">
                                        <i class="fa fa-check"></i> 
                                    </button>
                                    <a style="margin-left: 7px; color:inherit; text-decoration: none; font-size: 2.5ch;"
                                        href="{% url 'todo-detailed' todo.title todo.pk %}"> 
                                        <s>{{ todo.title }}</s>
                                    </a>
                                    <br><b style="color:chocolate">Completed on: {{ todo.date_completed|timezone:request.user.profile.timezone|date:"F d" }}</b>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endif %}

<div id="completed-tasks" style="display: none; ">
    <a class="btn btn-outline-warning" data-toggle="collapse" href="#multiCollapseExample3" role="button"
            aria-expanded="false" aria-controls="multiCollapseExample3">See completed tasks</a>
    <div class="row">
            <div class="col">
            <div class="collapse multi-collapse" id="multiCollapseExample3">
                <br>
                <div class="card card-body dark-mode-assist-section">
                    <ul id="todo-list-completed" class="list-group content-section">                       
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<br><br><br><br>

{% endblock content %}