Toppers-Tasks/templates/home.html

{% 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 %}
<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>
<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" id="task-id"
                                    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>

                </tbody>
            </table>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}