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

{% load static i18n %}

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

{% block page_content %}

<div class="container-fluid">

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

  <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="{% static 'images/users/user-2.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-3.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-5.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static '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="{% static '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="{% static 'images/users/user-6.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-4.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static '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="{% static 'images/users/user-4.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-6.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-7.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static '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="{% static 'images/users/user-1.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-2.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static '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="{% static '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="{% static '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="{% static 'images/users/user-3.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-7.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static '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="{% static 'images/users/user-5.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-2.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-3.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static '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="{% static 'images/users/user-4.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-5.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static '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="{% static 'images/users/user-5.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static '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="{% static '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="{% static 'images/users/user-2.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-3.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-5.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static '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="{% static 'images/users/user-6.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-4.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static '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="{% static 'images/users/user-4.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-6.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-7.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static '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="{% static 'images/users/user-3.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-7.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static '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="{% static '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="{% static 'images/users/user-5.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-2.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static 'images/users/user-3.jpg' %}" alt="" class="rounded-circle avatar-xs">
                          </div>
                          <div class="avatar">
                            <img src="{% static '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="{% static 'plugins/sortablejs/Sortable.min.js' %}"></script>
<!-- Dashboard App js -->
<script src="{% static 'js/pages/apps-kanban.js' %}"></script>

{% endblock extra_javascript %}