Index.html

{% extends 'base.html' %}
{% block title %} Home{% endblock title %} 
{% block body %}

    <div class="container my-3">
        <h2>Add a Todo</h2>
        <form action="/" method="POST">
            <div class="mb-3">
              <label for="title" class="form-label">Todo Title</label>
              <input type="text" class="form-control" name="title" id="title" aria-describedby="emailHelp"> 
            </div>
            <div class="mb-3">
              <label for="desc" class="form-label">Todo Description</label>
              <input type="text" class="form-control" name="desc" id="desc">
            </div>
            
            <button type="submit" class="btn btn-dark">Submit</button>
          </form>
    </div>
    <div class="container my-3">
        <h2>Your Todos</h2>
        
                {% if allTodo|length == 0 %}
                   
                <div class="alert alert-dark" role="alert">
                    No Todos found. Add your first todo 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">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.date_created}}</td>
                <td>
                  <a href="/update/{{todo.sno}}" type="button" class="btn btn-outline-dark btn-sm mx-1">Update</button>
                  <a href="/delete/{{todo.sno}}" type="button" class="btn btn-outline-dark btn-sm mx-1">Delete</button>
                
                </td>
              </tr>
              
              {% endfor %}
            </tbody>
            </table>
              {% endif %}
               
           
    </div>
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    -->

{% endblock body %}