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

<!--forms-->
<div class="container my-3">
    <h3>Add Todo</h3>
    <form action="/" method="POST">
        <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">Todo Title</label>
            <input type="text" class="form-control" name="title" id="exampleInputEmail1" aria-describedby="emailHelp">
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Todo Description</label>
            <input type="text" class="form-control" name="desc" id="exampleInputPassword1">
        </div>
        <button type="submit" class="btn btn-light btn-outline-dark">Add</button>
    </form>
</div>

<!--table-->
<div class="container my-3">
    <h3> Your Todo list </h3>
    {% if allTodo|length==0 %}
    <div class="alert alert-info" role="alert">
        No todos added!
    </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="/delete/{{todo.sno}}" type="button"
                        class="btn btn-light btn-outline-dark mx-2">Delete</button>
                        <a href="/update/{{todo.sno}}" type="button"
                            class="btn btn-light btn-outline-dark mx-2">Update</button></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
    crossorigin="anonymous"></script>
{% endblock %}