<!DOCTYPE html>
<html lang="en"
      th:replace="~{admin/dashboard/layout:: parent(~{::#content},~{::title},~{::script})}">
<head>
    <title >Views Task</title>
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
<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">Pending 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>
                        <div class="card-body">
                            <div  th:each="ptask : ${pendingTask}" >
                                <ul class="list-group">
                                    <!-- Tasks will be added here dynamically -->
                                    <div class="card collapsed-card">
                                        <div class="card-header">
                                            <h3 class="card-title">

                                                <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>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <div class="col-md-6">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Complete 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>
                        <div class="card-body">
                            <div  th:each="ptask : ${completeTask}" >
                                <ul class="list-group">
                                    <!-- Tasks will be added here dynamically -->
                                    <div class="card collapsed-card">
                                        <div class="card-header">
                                            <h3 class="card-title">
                                                <div class="btn btn-tool dark-icon" data-task-id="${ptask.id}" title="Completed Task">
                                                    <i class="fas fa-check "></i>
                                                </div>
                                                <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="Remove">
                                                    <i class="fas fa-times"></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>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>
