{% extends 'layouts/vertical.html' %}

{% block title %}Kanban Board{% endblock title %}

{% block page_content %}

<div class="container-fluid">

    {% set title='Kanban Board' %}
    {% set subtitle='Projects' %}
    {% include 'partials/page-title.html' %}

    <div class="outlook-box kanban-app">
        <div class="card h-100 mb-0 flex-grow-1">
            <div class="card-header border-light align-items-center gap-2">
                <!-- Search Bar -->
                <div class="app-search">
                    <input type="search" class="form-control" placeholder="Search tasks...">
                    <i data-lucide="search" class="app-search-icon text-muted"></i>
                </div>

                <!-- Filter Controls -->
                <div class="d-flex flex-wrap align-items-center gap-2">
                    <!-- Department Filter -->
                    <div class="app-search">
                        <select class="form-select form-control">
                            <option selected>Department</option>
                            <option value="Design">Design</option>
                            <option value="Development">Development</option>
                            <option value="UI/UX">UI/UX</option>
                            <option value="Marketing">Marketing</option>
                            <option value="Finance">Finance</option>
                            <option value="QA">QA</option>
                        </select>
                        <i data-lucide="briefcase" class="app-search-icon text-muted"></i>
                    </div>


                    <!-- Due Date Filter -->
                    <div class="app-search">
                        <select class="form-select form-control">
                            <option selected>Due Date</option>
                            <option value="Today">Today</option>
                            <option value="This Week">This Week</option>
                            <option value="This Month">This Month</option>
                        </select>
                        <i data-lucide="calendar-clock" class="app-search-icon text-muted"></i>
                    </div>
                </div>

                <!-- Apply Filter Button -->
                <button type="submit" class="btn btn-secondary ms-lg-auto"><i class="ti ti-plus me-1"></i> Add New Card
                </button>
            </div>

            <div class="card-body p-0">
                <div class="kanban-content bg-light bg-opacity-40">

                    <!-- TODO Data-->
                    <div class="kanban-board">
                        <div class="kanban-item py-2 px-3 d-flex align-items-center">
                            <h5 class="m-0">To Do (6)</h5>
                            <a href="#!" class="ms-auto btn btn-sm btn-icon rounded-circle btn-primary"><i
                                    class="ti ti-plus"></i></a>
                        </div>
                        <div class="kanban-board-group px-3" data-simplebar data-simplebar-md>
                            <ul data-plugins="sortable">
                                <li class="kanban-item">
                                    <div class="card shadow border-light mb-2">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge p-1 badge-soft-success"><i
                                                        class="ti ti-point-filled"></i> Design</span>
                                                <div class="ms-auto">
                                                    <div class="dropdown">
                                                        <a href="#"
                                                           class="btn btn-icon btn-sm  btn-ghost-light text-muted"
                                                           data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-share me-2"></i>Share</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-edit me-2"></i>Edit</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-ban me-2"></i>Block</a></li>
                                                            <li><a class="dropdown-item text-danger" href="#"><i
                                                                    class="ti ti-trash me-2"></i>Delete</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <h5 class="mb-3">
                                                <a href="#!" class="link-reset">AI Analytics Dashboard</a>
                                            </h5>

                                            <div class="d-flex justify-content-between">
                                                <div class="avatar-group avatar-group-xs">
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-2.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-3.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-5.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-1.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                    <h5 class="fs-base mb-0 fw-medium">25 May, 2025</h5>
                                                </div>
                                            </div>

                                            <div class="mt-3">
                                                <div class="d-flex align-items-center justify-content-between mb-2">
                                                    <p class="mb-0 text-muted fw-semibold fs-xxs">Progress</p>
                                                    <p class="fw-semibold mb-0">65%</p>
                                                </div>
                                                <div class="progress" style="height: 5px;">
                                                    <div class="progress-bar bg-success" style="width: 65%;"></div>
                                                </div>
                                            </div>

                                        </div>
                                    </div> <!-- end card-->
                                </li>

                                <li class="kanban-item">
                                    <div class="card shadow border-light mb-2">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge p-1 badge-soft-warning"><i
                                                        class="ti ti-point-filled"></i> Development</span>
                                                <div class="ms-auto">
                                                    <div class="dropdown">
                                                        <a href="#"
                                                           class="btn btn-icon btn-sm btn-ghost-light text-muted"
                                                           data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-share me-2"></i>Share</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-edit me-2"></i>Edit</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-ban me-2"></i>Block</a></li>
                                                            <li><a class="dropdown-item text-danger" href="#"><i
                                                                    class="ti ti-trash me-2"></i>Delete</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <h5 class="mb-3">
                                                <a href="#!" class="link-reset">Marketing Landing Page Redesign</a>
                                            </h5>

                                            <div class="mb-3">
                                                <img src="{{ config.ASSETS_ROOT }}/images/kanban/img-1.png" alt=""
                                                     class="rounded img-fluid">
                                            </div>

                                            <div class="d-flex justify-content-between">
                                                <div class="avatar-group avatar-group-xs">
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-6.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-4.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-8.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                    <h5 class="fs-base mb-0 fw-medium">10 Jun, 2025</h5>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </li>

                                <li class="kanban-item">
                                    <div class="card shadow border-light mb-2">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge p-1 badge-soft-info"><i
                                                        class="ti ti-point-filled"></i> UI/UX</span>
                                                <div class="ms-auto">
                                                    <div class="dropdown">
                                                        <a href="#"
                                                           class="btn btn-icon btn-sm  btn-ghost-light text-muted"
                                                           data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-share me-2"></i>Share</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-edit me-2"></i>Edit</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-ban me-2"></i>Block</a></li>
                                                            <li><a class="dropdown-item text-danger" href="#"><i
                                                                    class="ti ti-trash me-2"></i>Delete</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <h5 class="mb-3">
                                                <a href="#!" class="link-reset">E-Commerce Website Redesign</a>
                                            </h5>

                                            <div class="d-flex justify-content-between">
                                                <div class="avatar-group avatar-group-xs">
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-4.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-6.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-7.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-8.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                    <h5 class="fs-base mb-0 fw-medium">28 May, 2025</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div> <!-- end card-->
                                </li> <!-- end kanban item-->

                                <li class="kanban-item">
                                    <div class="card shadow border-light mb-2">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge p-1 badge-soft-warning"><i
                                                        class="ti ti-point-filled"></i> App Development</span>
                                                <div class="ms-auto">
                                                    <div class="dropdown">
                                                        <a href="#"
                                                           class="btn btn-icon btn-sm  btn-ghost-light text-muted"
                                                           data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-share me-2"></i>Share</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-edit me-2"></i>Edit</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-ban me-2"></i>Block</a></li>
                                                            <li><a class="dropdown-item text-danger" href="#"><i
                                                                    class="ti ti-trash me-2"></i>Delete</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <h5 class="mb-3">
                                                <a href="#!" class="link-reset">Mobile App Redesign</a>
                                            </h5>

                                            <div class="d-flex justify-content-between">
                                                <div class="avatar-group avatar-group-xs">
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-1.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-2.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-3.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                    <h5 class="fs-base mb-0 fw-medium">30 May, 2025</h5>
                                                </div>
                                            </div>

                                            <div class="mt-3">
                                                <div class="d-flex align-items-center justify-content-between mb-2">
                                                    <p class="mb-0 text-muted fw-semibold fs-xxs">Progress</p>
                                                    <p class="fw-semibold mb-0">80%</p>
                                                </div>
                                                <div class="progress" style="height: 5px;">
                                                    <div class="progress-bar bg-warning" style="width: 80%;"></div>
                                                </div>
                                            </div>

                                        </div>
                                    </div> <!-- end card-->
                                </li> <!-- end kanban item-->

                                <li class="kanban-item">
                                    <div class="card shadow border-light mb-2">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge p-1 badge-soft-purple"><i
                                                        class="ti ti-point-filled"></i> Marketing</span>
                                                <div class="ms-auto">
                                                    <div class="dropdown">
                                                        <a href="#"
                                                           class="btn btn-icon btn-sm  btn-ghost-light text-muted"
                                                           data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-share me-2"></i>Share</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-edit me-2"></i>Edit</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-ban me-2"></i>Block</a></li>
                                                            <li><a class="dropdown-item text-danger" href="#"><i
                                                                    class="ti ti-trash me-2"></i>Delete</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <h5 class="mb-3">
                                                <a href="#!" class="link-reset">CRM System Upgrade</a>
                                            </h5>

                                            <div class="mb-3">
                                                <img src="{{ config.ASSETS_ROOT }}/images/kanban/img-2.png" alt=""
                                                     class="rounded img-fluid">
                                            </div>

                                            <div class="d-flex justify-content-between">
                                                <div class="avatar-group avatar-group-xs">
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-4.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                    <h5 class="fs-base mb-0 fw-medium">30 May, 2025</h5>
                                                </div>
                                            </div>

                                            <div class="mt-3">
                                                <div class="d-flex align-items-center justify-content-between mb-2">
                                                    <p class="mb-0 text-muted fw-semibold fs-xxs">Progress</p>
                                                    <p class="fw-semibold mb-0">45%</p>
                                                </div>
                                                <div class="progress" style="height: 5px;">
                                                    <div class="progress-bar bg-primary" style="width: 45%;"></div>
                                                </div>
                                            </div>

                                        </div>
                                    </div> <!-- end card-->
                                </li> <!-- end kanban item-->
                            </ul>
                        </div>
                    </div>
                    <!-- end TODO Data-->

                    <!-- IN Progress Data-->
                    <div class="kanban-board">
                        <div class="py-2 px-3 d-flex align-items-center">
                            <h5 class="m-0">In Progress (5)</h5>
                            <a href="#!" class="ms-auto btn btn-sm btn-icon rounded-circle btn-primary"><i
                                    class="ti ti-plus"></i></a>
                        </div>
                        <div class="kanban-board-group px-3" data-simplebar data-simplebar-md>
                            <ul data-plugins="sortable">

                                <li class="kanban-item">
                                    <div class="card shadow border-light mb-2">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge p-1 badge-soft-info"><i
                                                        class="ti ti-point-filled"></i> Testing</span>
                                                <div class="ms-auto">
                                                    <div class="dropdown">
                                                        <a href="#"
                                                           class="btn btn-icon btn-sm btn-ghost-light text-muted"
                                                           data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-share me-2"></i>Share</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-edit me-2"></i>Edit</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-ban me-2"></i>Block</a></li>
                                                            <li><a class="dropdown-item text-danger" href="#"><i
                                                                    class="ti ti-trash me-2"></i>Delete</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <h5 class="mb-3">
                                                <a href="#!" class="link-reset">E-commerce Website QA Testing</a>
                                            </h5>

                                            <div class="d-flex justify-content-between">
                                                <div class="avatar-group avatar-group-xs">
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-3.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-7.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-9.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                    <h5 class="fs-base mb-0 fw-medium">18 Jun, 2025</h5>
                                                </div>
                                            </div>

                                        </div>
                                    </div> <!-- end card-->
                                </li> <!-- end kanban item-->


                                <li class="kanban-item">
                                    <div class="card shadow border-light mb-2">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge p-1 badge-soft-info"><i
                                                        class="ti ti-point-filled"></i> UI/UX</span>
                                                <div class="ms-auto">
                                                    <div class="dropdown">
                                                        <a href="#"
                                                           class="btn btn-icon btn-sm btn-ghost-light text-muted"
                                                           data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-share me-2"></i>Share</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-edit me-2"></i>Edit</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-ban me-2"></i>Block</a></li>
                                                            <li><a class="dropdown-item text-danger" href="#"><i
                                                                    class="ti ti-trash me-2"></i>Delete</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <h5 class="mb-3">
                                                <a href="#!" class="link-reset">Mobile App Redesign</a>
                                            </h5>

                                            <div class="d-flex justify-content-between">
                                                <div class="avatar-group avatar-group-xs">
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-5.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-2.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-3.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-9.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                    <h5 class="fs-base mb-0 fw-medium">10 Jun, 2025</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div> <!-- end card-->
                                </li> <!-- end kanban item-->

                                <li class="kanban-item">
                                    <div class="card shadow border-light mb-2">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge p-1 badge-soft-success"><i
                                                        class="ti ti-point-filled"></i> UI/UX Design</span>
                                                <div class="ms-auto">
                                                    <div class="dropdown">
                                                        <a href="#"
                                                           class="btn btn-icon btn-sm btn-ghost-light text-muted"
                                                           data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-share me-2"></i>Share</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-edit me-2"></i>Edit</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-ban me-2"></i>Block</a></li>
                                                            <li><a class="dropdown-item text-danger" href="#"><i
                                                                    class="ti ti-trash me-2"></i>Delete</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <h5 class="mb-3">
                                                <a href="#!" class="link-reset">Website User Experience Overhaul</a>
                                            </h5>

                                            <div class="d-flex justify-content-between">
                                                <div class="avatar-group avatar-group-xs">
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-4.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-5.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-6.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                    <h5 class="fs-base mb-0 fw-medium">15 June, 2025</h5>
                                                </div>
                                            </div>

                                            <div class="mt-3">
                                                <div class="d-flex align-items-center justify-content-between mb-2">
                                                    <p class="mb-0 text-muted fw-semibold fs-xxs">Progress</p>
                                                    <p class="fw-semibold mb-0">55%</p>
                                                </div>
                                                <div class="progress" style="height: 5px;">
                                                    <div class="progress-bar bg-success" style="width: 55%;"></div>
                                                </div>
                                            </div>

                                        </div>
                                    </div> <!-- end card-->
                                </li> <!-- end kanban item-->

                                <li class="kanban-item">
                                    <div class="card shadow border-light mb-2">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge p-1 badge-soft-danger"><i
                                                        class="ti ti-point-filled"></i> Marketing</span>
                                                <div class="ms-auto">
                                                    <div class="dropdown">
                                                        <a href="#"
                                                           class="btn btn-icon btn-sm btn-ghost-light text-muted"
                                                           data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-share me-2"></i>Share</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-edit me-2"></i>Edit</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-ban me-2"></i>Block</a></li>
                                                            <li><a class="dropdown-item text-danger" href="#"><i
                                                                    class="ti ti-trash me-2"></i>Delete</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <h5 class="mb-3 lh-base">
                                                <a href="#!" class="link-reset">Customer Engagement Platform
                                                    Development</a>
                                            </h5>

                                            <div class="d-flex justify-content-between">
                                                <div class="avatar-group avatar-group-xs">
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-5.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-6.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                    <h5 class="fs-base mb-0 fw-medium">10 June, 2025</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div> <!-- end card-->
                                </li> <!-- end kanban item-->

                            </ul>
                        </div>
                    </div>
                    <!-- end IN Progress Data-->

                    <!-- In Review Data-->
                    <div class="kanban-board">
                        <div class="kanban-item py-2 px-3 d-flex align-items-center">
                            <h5 class="m-0">In Review (3)</h5>
                            <a href="#!" class="ms-auto btn btn-sm btn-icon rounded-circle btn-primary"><i
                                    class="ti ti-plus"></i></a>
                        </div>
                        <div class="kanban-board-group px-3" data-simplebar data-simplebar-md>
                            <ul data-plugins="sortable">
                                <li class="kanban-item">
                                    <div class="card shadow border-light mb-2">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge p-1 badge-soft-success"><i
                                                        class="ti ti-point-filled"></i> Design</span>
                                                <div class="ms-auto">
                                                    <div class="dropdown">
                                                        <a href="#"
                                                           class="btn btn-icon btn-sm  btn-ghost-light text-muted"
                                                           data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-share me-2"></i>Share</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-edit me-2"></i>Edit</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-ban me-2"></i>Block</a></li>
                                                            <li><a class="dropdown-item text-danger" href="#"><i
                                                                    class="ti ti-trash me-2"></i>Delete</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <h5 class="mb-3">
                                                <a href="#!" class="link-reset">AI Analytics Dashboard</a>
                                            </h5>

                                            <div class="mb-3">
                                                <img src="{{ config.ASSETS_ROOT }}/images/kanban/img-3.png" alt=""
                                                     class="rounded img-fluid">
                                            </div>

                                            <div class="d-flex justify-content-between">
                                                <div class="avatar-group avatar-group-xs">
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-2.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-3.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-5.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-1.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                    <h5 class="fs-base mb-0 fw-medium">25 May, 2025</h5>
                                                </div>
                                            </div>

                                            <div class="mt-3">
                                                <div class="d-flex align-items-center justify-content-between mb-2">
                                                    <p class="mb-0 text-muted fw-semibold fs-xxs">Progress</p>
                                                    <p class="fw-semibold mb-0">65%</p>
                                                </div>
                                                <div class="progress" style="height: 5px;">
                                                    <div class="progress-bar bg-success" style="width: 65%;"></div>
                                                </div>
                                            </div>

                                        </div>
                                    </div> <!-- end card-->
                                </li>

                                <li class="kanban-item">
                                    <div class="card shadow border-light mb-2">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge p-1 badge-soft-warning"><i
                                                        class="ti ti-point-filled"></i> Development</span>
                                                <div class="ms-auto">
                                                    <div class="dropdown">
                                                        <a href="#"
                                                           class="btn btn-icon btn-sm btn-ghost-light text-muted"
                                                           data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-share me-2"></i>Share</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-edit me-2"></i>Edit</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-ban me-2"></i>Block</a></li>
                                                            <li><a class="dropdown-item text-danger" href="#"><i
                                                                    class="ti ti-trash me-2"></i>Delete</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <h5 class="mb-3">
                                                <a href="#!" class="link-reset">Marketing Landing Page Redesign</a>
                                            </h5>

                                            <div class="d-flex justify-content-between">
                                                <div class="avatar-group avatar-group-xs">
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-6.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-4.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-8.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                    <h5 class="fs-base mb-0 fw-medium">10 Jun, 2025</h5>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </li>

                                <li class="kanban-item">
                                    <div class="card shadow border-light mb-2">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge p-1 badge-soft-info"><i
                                                        class="ti ti-point-filled"></i> UI/UX</span>
                                                <div class="ms-auto">
                                                    <div class="dropdown">
                                                        <a href="#"
                                                           class="btn btn-icon btn-sm  btn-ghost-light text-muted"
                                                           data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-share me-2"></i>Share</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-edit me-2"></i>Edit</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-ban me-2"></i>Block</a></li>
                                                            <li><a class="dropdown-item text-danger" href="#"><i
                                                                    class="ti ti-trash me-2"></i>Delete</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <h5 class="mb-3">
                                                <a href="#!" class="link-reset">E-Commerce Website Redesign</a>
                                            </h5>

                                            <div class="d-flex justify-content-between">
                                                <div class="avatar-group avatar-group-xs">
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-4.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-6.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-7.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-8.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                    <h5 class="fs-base mb-0 fw-medium">28 May, 2025</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div> <!-- end card-->
                                </li> <!-- end kanban item-->
                            </ul>
                        </div>
                    </div>
                    <!-- end In Review Data-->

                    <!-- Done Data-->
                    <div class="kanban-board">
                        <div class="py-2 px-3 d-flex align-items-center">
                            <h5 class="m-0">Done (2)</h5>
                            <a href="#!" class="ms-auto btn btn-sm btn-icon rounded-circle btn-primary"><i
                                    class="ti ti-plus"></i></a>
                        </div>
                        <div class="kanban-board-group px-3" data-simplebar data-simplebar-md>
                            <ul data-plugins="sortable">

                                <li class="kanban-item">
                                    <div class="card shadow border-light mb-2">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge p-1 badge-soft-info"><i
                                                        class="ti ti-point-filled"></i> Testing</span>
                                                <div class="ms-auto">
                                                    <div class="dropdown">
                                                        <a href="#"
                                                           class="btn btn-icon btn-sm btn-ghost-light text-muted"
                                                           data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-share me-2"></i>Share</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-edit me-2"></i>Edit</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-ban me-2"></i>Block</a></li>
                                                            <li><a class="dropdown-item text-danger" href="#"><i
                                                                    class="ti ti-trash me-2"></i>Delete</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <h5 class="mb-3">
                                                <a href="#!" class="link-reset">E-commerce Website QA Testing</a>
                                            </h5>

                                            <div class="d-flex justify-content-between">
                                                <div class="avatar-group avatar-group-xs">
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-3.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-7.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-9.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                    <h5 class="fs-base mb-0 fw-medium">18 Jun, 2025</h5>
                                                </div>
                                            </div>

                                        </div>
                                    </div> <!-- end card-->
                                </li> <!-- end kanban item-->


                                <li class="kanban-item">
                                    <div class="card shadow border-light mb-2">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge p-1 badge-soft-info"><i
                                                        class="ti ti-point-filled"></i> UI/UX</span>
                                                <div class="ms-auto">
                                                    <div class="dropdown">
                                                        <a href="#"
                                                           class="btn btn-icon btn-sm btn-ghost-light text-muted"
                                                           data-bs-toggle="dropdown">
                                                            <i class="ti ti-dots-vertical fs-xl"></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-share me-2"></i>Share</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-edit me-2"></i>Edit</a></li>
                                                            <li><a class="dropdown-item" href="#"><i
                                                                    class="ti ti-ban me-2"></i>Block</a></li>
                                                            <li><a class="dropdown-item text-danger" href="#"><i
                                                                    class="ti ti-trash me-2"></i>Delete</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <h5 class="mb-3">
                                                <a href="#!" class="link-reset">Mobile App Redesign</a>
                                            </h5>

                                            <div class="mb-3">
                                                <img src="{{ config.ASSETS_ROOT }}/images/kanban/img-4.png" alt=""
                                                     class="rounded img-fluid">
                                            </div>

                                            <div class="d-flex justify-content-between">
                                                <div class="avatar-group avatar-group-xs">
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-5.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-2.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-3.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                    <div class="avatar">
                                                        <img src="{{ config.ASSETS_ROOT }}/images/users/user-9.jpg"
                                                             alt="" class="rounded-circle avatar-xs">
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="ti ti-calendar-time text-muted fs-lg"></i>
                                                    <h5 class="fs-base mb-0 fw-medium">10 Jun, 2025</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div> <!-- end card-->
                                </li> <!-- end kanban item-->
                            </ul>
                        </div>
                    </div>
                    <!-- end Done Data-->
                </div> <!-- End Kanban-content-->
            </div> <!-- end card-body-->
        </div> <!-- end card-->
    </div> <!-- end row-->
</div>
<!-- container -->

{% endblock page_content %}

{% block extra_javascript %}

<!-- Apex Charts js -->
<script src="{{ config.ASSETS_ROOT }}/plugins/sortablejs/Sortable.min.js"></script>
<!-- Dashboard App js -->
<script src="{{ config.ASSETS_ROOT }}/js/pages/apps-kanban.js"></script>

{% endblock extra_javascript %}