Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>

    <main class="container">
        <div class="row vh-100">
            <div class="col-lg-6 col-md-8 col-10 p-3 m-auto border rounded-3 shadow">
                <h1 class="p-2 text-primary text-center border-bottom">
                    Todo List
                </h1>
                <form action="{% url 'todo-add' %}" method="post">
                    {% csrf_token %}
                    <div class="input-group mb-3">
                        <input class="form-control" type="text" name="todo" placeholder="Enter your new todo">
                        <button type="submit" class="btn btn-primary">Add</button>
                    </div>
                </form>
                <ul class="list-group list-group-flush overflow-auto" style="max-height: 300px;">

                    {% for item in todos %}

                        <li class="list-group-item d-flex justify-content-between">
                            <a href="" class="btn btn-outline-danger">Delete</a>

                            {% if item.status %}

                                <p class="my-auto">
                                    <del>{{ item.text }}</del>
                                </p>
                                <a href="{% url 'todo-update' item.id %}" class="btn btn-outline-primary">Redo</a>

                            {% else %}

                                <p class="my-auto">{{ item.text }}</p>
                                <a href="{% url 'todo-update' item.id %}" class="btn btn-outline-secondary">Done</a>

                            {% endif %}


                        </li>

                    {% endfor %}

                </ul>
            </div>
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>