<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>

    <div class="container" style="height: 100vh;">
        <div class="row" style="height: 100%;">
            <div class="col-10 col-md-8 col-lg-6 mx-auto my-auto shadow p-4">
                <h1 class="text-center">Todo List</h1>

                <form action="{% url 'todo-add' %}" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="mb-2">
                        <input name="todo" type="text" class="form-control" placeholder="What do you want to do?">
                    </div>

                    <div class="mb-2">
                        <input type="submit" class="col-12 btn btn-primary" value="Save">
                    </div>
                </form>

                {% if messages %}
                    {% for message in messages %}

                        <div class="alert {{ message.tags }}" role="alert">
                            {{ message }}
                        </div>

                    {% endfor %}
                {% endif %}

                <ul class="list-group list-group-flush overflow-auto" style="max-height: 300px;">

                    {% for todo  in todos %}
                        <li class="list-group-item d-flex justify-content-between {% if todo.status %} list-group-item-success {% endif %}">
                            <a class="btn btn-light" href="/todo/delete/{{ todo.id }}">
                                <i class="bi-x-lg"></i>
                            </a>

                            {% if todo.status %}
                                <del>{{ todo.text }}</del>
                            {% else %}
                                {{ todo.text }}
                            {% endif %}

                            <a class="btn btn-light" href="/todo/update/{{ todo.id }}">
                                <i class="bi-{% if todo.status %}arrow-counterclockwise{% else %}check-lg{% endif %}"></i>
                            </a>
                        </li>
                    {% endfor %}

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


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>