{% extends "base.html" %}
{% block title %}
Toppers Tasks
{% endblock %}
{% block content %}
{% for category, message in get_flashed_messages(with_categories=True) %}
<div class="alert alert-{{ category }}" role="alert">
    {{ message }}
</div>
{% endfor %}
{% if not completed %}
<form action="/addtask" method="post"
    class="d-flex flex-row mb-3">
    <input class="form-control form-control-lg me-3" type="text"
        name="task-text"
        id="task-text"
        placeholder="New Task">
    <button class="btn btn-primary" type="submit">
        <i class="bi-plus-circle"></i>
    </button>
</form>
{% endif %}
<div class="row">
    {% for task in tasks %}
    <div class="task-card" id="task-{{task.id}}">
        <a class="task-toggler" href="#task-details-{{task.id}}"
            data-bs-toggle="collapse">
            <i class="bi-list"></i>
        </a>
        <div class="task-text">{{task.tasktext}}</div>
        <div id="task-details-{{task.id}}" class="collapse task-details mt-3">
            <table class="table table-hover">
                <tbody>
                    <tr>
                        <td>Created By</td>
                        <td>{{ task.user.username }}</td>
                    </tr>
                    <tr>
                        <td>Created Time</td>
                        <td>{{ task.created_datetime }}</td>
                    </tr>
                    <tr>
                        <td>Due By</td>
                        <td>{% if task.due %}{{ task.due }}
                            {% else %}
                            <form action="/updatetask"
                                method="post">
                                <input type="text"
                                    name="task-id"
                                    value="{{task.id}}" hidden>
                                <input type="datetime-local" name="due"
                                    id="due">
                                <button class="btn btn-primary"
                                    type="submit">Update</button>
                            </form>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <td>Assignees</td>
                        <td>
                            <div class="d-flex flex-row">
                                <a href="#assignees-{{task.id}}"
                                    data-bs-toggle="collapse"
                                    class="btn btn-primary me-3">
                                    <i class="bi-plus-circle"></i>
                                </a>
                                <p>{{ task.assignees }}</p>
                            </div>
                            <div class="collapse mt-1"
                                id="assignees-{{task.id}}">
                                <form action="/updatetask"
                                    method="post"
                                    class="d-flex flex-row">
                                    <input type="text" name="task-id"
                                        value="{{task.id}}"
                                        hidden>
                                    <select name="assignee"
                                        id="assignee-{{task.id}}"
                                        class="form-control">
                                        {% for user in users %}
                                        <option
                                            value="{{user.id}}">{{user.username}}</option>
                                        {% endfor %}
                                    </select>
                                    <button type="submit"
                                        class="btn btn-primary">
                                        Add Assignee
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>
        <div class="mt-2">
            <form action="/updatetask" method="post">
                <input type="text" name="task-id" value="{{task.id}}" hidden>
                <input type="text" name="completed" value="bruh" hidden>
                {% if not task.completed %}
                <button type="submit" class="btn btn-success max-wack">
                    <i class="bi-check-circle"></i>
                    Complete Task
                </button>
                {% else %}
                <button type="submit" class="btn btn-danger max-wack">
                    <i class="bi-x-circle"></i>
                    Incomplete Task
                </button>
                {% endif %}
            </form>
        </div>
    </div>
    {% endfor %}
</div>
{% if not completed %}
<div class="row">
    <a href="/completed" class="btn btn-primary">
        Completed Tasks
    </a>
</div>
{% endif %}
{% endblock %}