<!DOCTYPE html>
<html lang="en"
      th:replace="~{admin/dashboard/layout:: parent(~{::#content},~{::title},~{::script})}">
<head>
    <title >Write A Task</title>
</head>
<body>
    <!-- Page content-->
        <section class="content" id="content">

                <div class="row">
                    <div class="col-md-6">
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">Add New Task</h3>
                                <div class="card-tools">
                                    <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                        <i class="fas fa-minus"></i>
                                    </button>
                                </div>
                            </div>
                            <form role="form"  th:action="@{/admin/tasks/save}"  action="#" th:object="${task}" method="post">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="title">Name</label>
                                        <input type="text" id="title" th:field="*{title}"  class="form-control" placeholder="Enter name here" />
                                        <div th:if="${#fields.hasErrors('title')}" th:errors="*{title}"></div>
                                    </div>
                                    <div class="form-group">
                                        <label for="description">Description</label>
                                        <textarea id="description" class="form-control" th:field="*{description}" name="description" placeholder="Enter Description here" ></textarea>
                                        <div th:if="${#fields.hasErrors('description')}" th:errors="*{description}"></div>
                                    </div>
                                    <div class="form-group">
                                       <input type="submit" value="Create Task" class="btn btn-success float-right">
                                    </div>
                                </div>
                                <!-- /.card-body -->
                              </form >
                        </div>
                        <!-- /.card -->
                    </div>
                    <div class="col-md-6">
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">Task List</h3>
                                <div class="card-tools">
                                    <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                        <i class="fas fa-minus"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div  th:each="ptask : ${taskList}" >
                                    <ul class="list-group">
                                        <!-- Tasks will be added here dynamically -->
                                        <div class="card collapsed-card">
                                            <div class="card-header">
                                                <h3 class="card-title">
                                                    <a th:href="@{'/admin/tasks/complete/'+${ptask.id}}" type="button" class="btn btn-tool delete-btn" data-task-id="${ptask.id}" title="Complete Task">
                                                        <i class="fas fa-check"></i>
                                                    </a>
                                                    <span th:text="${ptask.title}"></span>
                                                </h3>
                                                <div class="card-tools">
                                                    <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                                        <i class="fas fa-plus"></i>
                                                    </button>
                                                    <a th:href="@{'/admin/tasks/update/'+${ptask.id}}" type="button" class="btn btn-tool edit-btn"  data-task-id="${ptask.id}" title="Edit Task">
                                                        <i class="fas fa-pencil-alt"></i>
                                                    </a>
                                                    <a th:href="@{'/admin/tasks/delete/'+${ptask.id}}" type="button" class="btn btn-tool delete-btn" data-task-id="${ptask.id}" title="Delete Task">
                                                        <i class="fas fa-trash-alt"></i>
                                                    </a>
                                                </div>

                                            </div>
                                            <div class="card-body edit-input" style="display: none;">
                                                <p th:text="${ptask.description}"></p>
                                            </div>
                                        </div>
                                    </ul>
                                </div>

                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->

                    </div>
                    <!-- /.card -->
                </div>
            </section>
<br />
</body>

</html>
