index.html

{% extends 'base.html' %}
{% block body %}
<br>
<div class="container">
    <h3> Enter your task below:</h3>
    <form action="/" method="POST">
        <div class="mb-3">
            <label for="title" class="form-label">Title</label>
            <input type="text" class="form-control" name="title" id="title">
        </div>
        <div class="mb-3">
            <label for="desc" class="form-label">Description</label>
            <input type="text" class="form-control" name="desc" id="desc">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
<div class="container my-3">
    <h3>Your TO-DO List</h3>
    {% if allTodo|length == 0 %}
    <div class="alert alert-dark" role="alert">
        No Record Present! Add your tasks now
    </div>

    {% else %}
    <table class="table">
        <thead>
        <tr>
            <th scope="col">SNo.</th>
            <th scope="col">Title</th>
            <th scope="col">Description</th>
            <th scope="col">Created Time</th>
            <th scope="col">Actions</th>
        </tr>
        </thead>
        <tbody>
        {% for todo in allTodo %}
        <tr>
            <th scope="row">{{loop.index}}</th>
            <td>{{todo.title}}</td>
            <td>{{todo.desc}}</td>
            <td>{{todo.created}}</td>
            <td><a href="/update/{{todo.sno}}" type="button" class="btn btn-outline-dark btn-sm ">Update</a>
                <a href="/delete/{{todo.sno}}" type="button" class="btn btn-outline-dark btn-sm ">Delete</a></td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    {% endif %}
</div>
{% endblock body %}