{% extends "layout/layout.html" %} {% set page_title = "Kanban Board" %} {%
block content %}

<main class="app-wrapper">
  {% include "../templates/layout/header-footer/app-header.html" %} {% include
  "../templates/layout/header-footer/app-sidebar.html" %} {% include
  "../templates/layout/header-footer/topnavbar.html" %}
  <div class="content-wrapper">
    <div class="page-content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12 rt-mb-25">
            {% include "../templates/components/breadcrumbs/breadcrumbs.html" %}
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div id="board" class="board">
              <div class="d-flex kanbanboard_parent" id="kanban_board_parent">
                <div class="kanbanboard_child">
                  <div class="card">
                    <div class="card-body">
                      <div class="kanban-board-header">
                        <h5>To-do</h5>
                        <div class="card-priority__actions">
                          <button
                            class="dots-three text-gray-400 f-size-24 lh-1"
                            type="button"
                            id="dropdownMenuButton5"
                            data-bs-toggle="dropdown"
                            aria-expanded="true"
                          >
                            <img
                              src="assets/images/svg/dot.svg"
                              alt="clock"
                            />
                          </button>
                          <ul
                            class="dropdown-menu dropdown-actions"
                            aria-labelledby="dropdownMenuButton5"
                            data-popper-placement="bottom-start"
                          >
                            <li>
                              <a href="#" class="dropdown-item">
                                <span>
                                  <img
                                    src="assets/images/svg/pen.svg"
                                    alt="pen"
                                  />
                                </span>
                                Edit
                              </a>
                            </li>
                            <li>
                              <a href="#" class="dropdown-item">
                                <span>
                                  <img
                                    src="assets/images/svg/copy-link.svg"
                                    alt="copylink"
                                  />
                                </span>
                                Copy Link
                              </a>
                            </li>
                            <li>
                              <a
                                href="#"
                                class="dropdown-item remove-killer plain-btn"
                              >
                                <span>
                                  <img
                                    src="assets/images/svg/trash.svg"
                                    alt="copylink"
                                  />
                                </span>
                                Delete
                              </a>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div id="task-1">
                        <div id="todo">
                          <div class="card-priority rt-mb-12">
                            <!-- top bar  -->
                            <div class="card-priority__header">
                              <div class="date">
                                <span class="icon">
                                  <img
                                    src="assets/images/svg/clock.svg"
                                    alt="clock"
                                  />
                                </span>
                                <p>14 Nov, 2021</p>
                              </div>
                              <!-- actions  -->
                              <div class="card-priority__actions">
                                <button
                                  class="dots-three text-gray-400 f-size-24 lh-1"
                                  type="button"
                                  id="dropdownMenuButton_1"
                                  data-bs-toggle="dropdown"
                                  aria-expanded="true"
                                >
                                  <img
                                    src="assets/images/svg/dot.svg"
                                    alt="clock"
                                  />
                                </button>
                                <ul
                                  class="dropdown-menu dropdown-actions"
                                  aria-labelledby="dropdownMenuButton_1"
                                  data-popper-placement="bottom-start"
                                >
                                  <li>
                                    <a href="#" class="dropdown-item">
                                      <span>
                                        <img
                                          src="assets/images/svg/pen.svg"
                                          alt="pen"
                                        />
                                      </span>
                                      Edit
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#" class="dropdown-item">
                                      <span>
                                        <img
                                          src="assets/images/svg/copy-link.svg"
                                          alt="copylink"
                                        />
                                      </span>
                                      Copy Link
                                    </a>
                                  </li>
                                  <li>
                                    <a
                                      href="#"
                                      class="dropdown-item remove-killer plain-btn"
                                    >
                                      <span>
                                        <img
                                          src="assets/images/svg/trash.svg"
                                          alt="copylink"
                                        />
                                      </span>
                                      Delete
                                    </a>
                                  </li>
                                </ul>
                              </div>
                            </div>

                            <!-- labels  -->
                            <div class="card-priority__labels">
                              <ul>
                                <li>
                                  <span class="labels medium"
                                    >Medium Priority</span
                                  >
                                </li>
                                <li>
                                  <span class="labels urgent"
                                    ><img
                                      class="rt-mr-6"
                                      src="assets/images/svg/red-circle.svg"
                                      alt=""
                                    />
                                    Urgents</span
                                  >
                                </li>
                              </ul>
                            </div>
                            <h2 class="card-priority__title pointer">
                              Meeting with UI/UX Team to manage our upcoming
                              projects &amp; task.
                            </h2>
                            <!-- priority footer  -->
                            <div class="card-priority__footer">
                              <div>
                                <ul class="labels-info">
                                  <li>
                                    <a href="#">
                                      <span>
                                      <img src="assets/images/svg/attach.svg" alt="icon">
                                    </span>
                                      5
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#">
                                      <span>
                                      <img src="assets/images/svg/comments.svg" alt="icon">
                                    </span>
                                      19
                                    </a>
                                  </li>
                                </ul>
                              </div>
                              <div>
                                <ul class="users">
                                  <li class="users-item">
                                    <img src="assets/images/all-img/users/user1.png" alt="user-photo">
                                  </li>
                                  <li class="users-item">
                                    <img src="assets/images/all-img/users/three.png" alt="user-photo">
                                  </li>
                                  <li class="users-item">
                                    <img src="assets/images/all-img/users/two.png" alt="user-photo">
                                  </li>
                                  <li class="users-item">
                                    <img src="assets/images/all-img/users/one.png" alt="user-photo">
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </div>
                          <div class="card-priority rt-mb-12">
                            <!-- top bar  -->
                            <div class="card-priority__header">
                              <div class="date">
                                <span class="icon">
                                  <img
                                    src="assets/images/svg/clock.svg"
                                    alt="clock"
                                  />
                                </span>
                                <p>14 Nov, 2021</p>
                              </div>
                              <!-- actions  -->
                              <div class="card-priority__actions">
                                <button
                                  class="dots-three text-gray-400 f-size-24 lh-1"
                                  type="button"
                                  id="dropdownMenuButton2"
                                  data-bs-toggle="dropdown"
                                  aria-expanded="true"
                                >
                                  <img
                                    src="assets/images/svg/dot.svg"
                                    alt="clock"
                                  />
                                </button>
                                <ul
                                  class="dropdown-menu dropdown-actions"
                                  aria-labelledby="dropdownMenuButton2"
                                  data-popper-placement="bottom-start"
                                >
                                  <li>
                                    <a href="#" class="dropdown-item">
                                      <span>
                                        <img
                                          src="assets/images/svg/pen.svg"
                                          alt="pen"
                                        />
                                      </span>
                                      Edit
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#" class="dropdown-item">
                                      <span>
                                        <img
                                          src="assets/images/svg/copy-link.svg"
                                          alt="copylink"
                                        />
                                      </span>
                                      Copy Link
                                    </a>
                                  </li>
                                  <li>
                                    <a
                                      href="#"
                                      type="button"
                                      class="dropdown-item remove-killer plain-btn"
                                    >
                                      <span>
                                        <img
                                          src="assets/images/svg/trash.svg"
                                          alt="copylink"
                                        />
                                      </span>
                                      Delete
                                    </a>
                                  </li>
                                </ul>
                              </div>
                            </div>

                            <!-- labels  -->
                            <div class="card-priority__labels">
                              <ul>
                                <li>
                                  <span class="labels red"
                                    >High Priority</span
                                  >
                                </li>
                                <li>
                                  <span class="labels urgent green"
                                    ><img
                                      class="rt-mr-6"
                                      src="assets/images/svg/circle-green.svg"
                                      alt=""
                                    />
                                    Work</span
                                  >
                                </li>
                              </ul>
                            </div>
                            <h2 class="card-priority__title pointer">
                              New Project Idea & UX Research
                            </h2>
                            <!-- priority footer  -->
                            <div class="card-priority__footer">
                              <div>
                                <ul class="labels-info">
                                  <li>
                                    <a href="#">
                                      <span>
                                      <img src="assets/images/svg/attach.svg" alt="icon">
                                    </span>
                                      5
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#">
                                      <span>
                                      <img src="assets/images/svg/comments.svg" alt="icon">
                                    </span>
                                      19
                                    </a>
                                  </li>
                                </ul>
                              </div>
                              <div>
                                <ul class="users">
                                  <li class="users-item">
                                    <img src="assets/images/all-img/users/user1.png" alt="user-photo">
                                  </li>
                                  <li class="users-item">
                                    <img src="assets/images/all-img/users/three.png" alt="user-photo">
                                  </li>
                                  <li class="users-item">
                                    <img src="assets/images/all-img/users/two.png" alt="user-photo">
                                  </li>
                                  <li class="users-item">
                                    <img src="assets/images/all-img/users/one.png" alt="user-photo">
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="add-new-card-btn">
                        <button
                          type="button"
                          class="btn btn-primary2 waves-effect primary-dark pill btn-icon d-block"
                          id="toboad_task"
                          name="button-group"
                        >
                          <span class="button-content-wrapper">
                            <span class="button-icon align-icon-left">
                              <i class="ph-plus"></i>
                            </span>
                            <span class="button-text"> Add new card </span>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="kanbanboard_child">
                  <div class="card">
                    <div class="card-body">
                      <div class="kanban-board-header">
                        <h5>Doing</h5>
                        <div class="card-priority__actions">
                          <button
                            class="dots-three text-gray-400 f-size-24 lh-1"
                            type="button"
                            id="dropdownMenuButton6"
                            data-bs-toggle="dropdown"
                            aria-expanded="true"
                          >
                            <img
                              src="assets/images/svg/dot.svg"
                              alt="clock"
                            />
                          </button>
                          <ul
                            class="dropdown-menu dropdown-actions"
                            aria-labelledby="dropdownMenuButton6"
                            data-popper-placement="bottom-start"
                          >
                            <li>
                              <a href="#" class="dropdown-item">
                                <span>
                                  <img
                                    src="assets/images/svg/pen.svg"
                                    alt="pen"
                                  />
                                </span>
                                Edit
                              </a>
                            </li>
                            <li>
                              <a href="#" class="dropdown-item">
                                <span>
                                  <img
                                    src="assets/images/svg/copy-link.svg"
                                    alt="copylink"
                                  />
                                </span>
                                Copy Link
                              </a>
                            </li>
                            <li>
                              <a
                                href="#"
                                class="dropdown-item remove-killer plain-btn"
                              >
                                <span>
                                  <img
                                    src="assets/images/svg/trash.svg"
                                    alt="copylink"
                                  />
                                </span>
                                Delete
                              </a>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div id="task-2">
                        <div id="doing">
                          <div class="card-priority rt-mb-12">
                            <!-- top bar  -->
                            <div class="card-priority__header">
                              <div class="date">
                                <span class="icon">
                                  <img
                                    src="assets/images/svg/clock.svg"
                                    alt="clock"
                                  />
                                </span>
                                <p>14 Nov, 2021</p>
                              </div>
                              <!-- actions  -->
                              <div class="card-priority__actions">
                                <button
                                  class="dots-three text-gray-400 f-size-24 lh-1"
                                  type="button"
                                  id="dropdownMenuButton3"
                                  data-bs-toggle="dropdown"
                                  aria-expanded="true"
                                >
                                  <img
                                    src="assets/images/svg/dot.svg"
                                    alt="clock"
                                  />
                                </button>
                                <ul
                                  class="dropdown-menu dropdown-actions"
                                  aria-labelledby="dropdownMenuButton3"
                                  data-popper-placement="bottom-start"
                                >
                                  <li>
                                    <a href="#" class="dropdown-item">
                                      <span>
                                        <img
                                          src="assets/images/svg/pen.svg"
                                          alt="pen"
                                        />
                                      </span>
                                      Edit
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#" class="dropdown-item">
                                      <span>
                                        <img
                                          src="assets/images/svg/copy-link.svg"
                                          alt="copylink"
                                        />
                                      </span>
                                      Copy Link
                                    </a>
                                  </li>
                                  <li>
                                    <a
                                      href="#"
                                      type="button"
                                      class="dropdown-item remove-killer plain-btn"
                                    >
                                      <span>
                                        <img
                                          src="assets/images/svg/trash.svg"
                                          alt="copylink"
                                        />
                                      </span>
                                      Delete
                                    </a>
                                  </li>
                                </ul>
                              </div>
                            </div>

                            <div class="card-priority-thumb">
                              <img src="assets/images/all-img/kanban-thumb.jpg" alt="">
                            </div>

                            <!-- labels  -->
                            <div class="card-priority__labels">
                              <ul>
                                <li>
                                  <span class="labels medium yellow"
                                    >Not Inportant</span
                                  >
                                </li>
                                <li>
                                  <span class="labels urgent blue"
                                    ><img
                                      class="rt-mr-6"
                                      src="assets/images/svg/circle-blue.svg"
                                      alt=""
                                    />
                                    Personal</span
                                  >
                                </li>
                              </ul>
                            </div>
                            <h2 class="card-priority__title pointer">
                              Buy Green Plants for my Desk.
                            </h2>
                            
                          </div>
                          <div class="card-priority rt-mb-12">
                            <!-- top bar  -->
                            <div class="card-priority__header">
                              <div class="date">
                                <span class="icon">
                                  <img
                                    src="assets/images/svg/clock.svg"
                                    alt="clock"
                                  />
                                </span>
                                <p>14 Nov, 2021</p>
                              </div>
                              <!-- actions  -->
                              <div class="card-priority__actions">
                                <button
                                  class="dots-three text-gray-400 f-size-24 lh-1"
                                  type="button"
                                  id="dropdownMenuButton10"
                                  data-bs-toggle="dropdown"
                                  aria-expanded="true"
                                >
                                  <img
                                    src="assets/images/svg/dot.svg"
                                    alt="clock"
                                  />
                                </button>
                                <ul
                                  class="dropdown-menu dropdown-actions"
                                  aria-labelledby="dropdownMenuButton10"
                                  data-popper-placement="bottom-start"
                                >
                                  <li>
                                    <a href="#" class="dropdown-item">
                                      <span>
                                        <img
                                          src="assets/images/svg/pen.svg"
                                          alt="pen"
                                        />
                                      </span>
                                      Edit
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#" class="dropdown-item">
                                      <span>
                                        <img
                                          src="assets/images/svg/copy-link.svg"
                                          alt="copylink"
                                        />
                                      </span>
                                      Copy Link
                                    </a>
                                  </li>
                                  <li>
                                    <a
                                      href="#"
                                      type="button"
                                      class="dropdown-item remove-killer plain-btn"
                                    >
                                      <span>
                                        <img
                                          src="assets/images/svg/trash.svg"
                                          alt="copylink"
                                        />
                                      </span>
                                      Delete
                                    </a>
                                  </li>
                                </ul>
                              </div>
                            </div>
                            <!-- labels  -->
                            <div class="card-priority__labels">
                              <ul>
                                <li>
                                  <span class="labels red"
                                    >High Priority</span
                                  >
                                </li>
                                <li>
                                  <span class="labels urgent blue"
                                    ><img
                                      class="rt-mr-6"
                                      src="assets/images/svg/circle-blue.svg"
                                      alt=""
                                    />
                                    Personal</span
                                  >
                                </li>
                              </ul>
                            </div>
                            <h2 class="card-priority__title pointer">
                              Buy Flowers for my love
                            </h2>
                            
                          </div>
                          <div class="card-priority rt-mb-12">
                            <!-- top bar  -->
                            <div class="card-priority__header">
                              <div class="date">
                                <span class="icon">
                                  <img
                                    src="assets/images/svg/clock.svg"
                                    alt="clock"
                                  />
                                </span>
                                <p>14 Nov, 2021</p>
                              </div>
                              <!-- actions  -->
                              <div class="card-priority__actions">
                                <button
                                  class="dots-three text-gray-400 f-size-24 lh-1"
                                  type="button"
                                  id="dropdownMenuButton11"
                                  data-bs-toggle="dropdown"
                                  aria-expanded="true"
                                >
                                  <img
                                    src="assets/images/svg/dot.svg"
                                    alt="clock"
                                  />
                                </button>
                                <ul
                                  class="dropdown-menu dropdown-actions"
                                  aria-labelledby="dropdownMenuButton11"
                                  data-popper-placement="bottom-start"
                                >
                                  <li>
                                    <a href="#" class="dropdown-item">
                                      <span>
                                        <img
                                          src="assets/images/svg/pen.svg"
                                          alt="pen"
                                        />
                                      </span>
                                      Edit
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#" class="dropdown-item">
                                      <span>
                                        <img
                                          src="assets/images/svg/copy-link.svg"
                                          alt="copylink"
                                        />
                                      </span>
                                      Copy Link
                                    </a>
                                  </li>
                                  <li>
                                    <a
                                      href="#"
                                      class="dropdown-item remove-killer plain-btn"
                                    >
                                      <span>
                                        <img
                                          src="assets/images/svg/trash.svg"
                                          alt="copylink"
                                        />
                                      </span>
                                      Delete
                                    </a>
                                  </li>
                                </ul>
                              </div>
                            </div>

                            <!-- labels  -->
                            <div class="card-priority__labels">
                              <ul>
                                <li>
                                  <span class="labels medium"
                                    >Medium Priority</span
                                  >
                                </li>
                                <li>
                                  <span class="labels urgent yellow"
                                    ><img
                                      class="rt-mr-6"
                                      src="assets/images/svg/circle-yellow.svg"
                                      alt=""
                                    />
                                    Productivity</span
                                  >
                                </li>
                              </ul>
                            </div>
                            <h2 class="card-priority__title pointer">
                              Learn how to work with kanban board.
                            </h2>
                            <!-- priority footer  -->
                            <div class="card-priority__footer">
                              <div>
                                <ul class="users">
                                  <li class="users-item">
                                    <img src="assets/images/all-img/users/user1.png" alt="user-photo">
                                  </li>
                                  <li class="users-item">
                                    <img src="assets/images/all-img/users/three.png" alt="user-photo">
                                  </li>
                                  <li class="users-item">
                                    <img src="assets/images/all-img/users/two.png" alt="user-photo">
                                  </li>
                                  <li class="users-item">
                                    <img src="assets/images/all-img/users/one.png" alt="user-photo">
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="add-new-card-btn">
                        <button
                          type="button"
                          class="btn btn-primary2 waves-effect primary-dark pill btn-icon d-block"
                          id="doingboard_task"
                          name="button-group"
                        >
                          <span class="button-content-wrapper">
                            <span class="button-icon align-icon-left">
                              <i class="ph-plus"></i>
                            </span>
                            <span class="button-text"> Add new card </span>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="kanbanboard_child">
                  <div class="card">
                    <div class="card-body">
                      <div class="kanban-board-header">
                        <h5>Done</h5>
                        <div class="card-priority__actions">
                          <button
                            class="dots-three text-gray-400 f-size-24 lh-1"
                            type="button"
                            id="dropdownMenuButton7"
                            data-bs-toggle="dropdown"
                            aria-expanded="true"
                          >
                            <img
                              src="assets/images/svg/dot.svg"
                              alt="clock"
                            />
                          </button>
                          <ul
                            class="dropdown-menu dropdown-actions"
                            aria-labelledby="dropdownMenuButton7"
                            data-popper-placement="bottom-start"
                          >
                            <li>
                              <a href="#" class="dropdown-item">
                                <span>
                                  <img
                                    src="assets/images/svg/pen.svg"
                                    alt="pen"
                                  />
                                </span>
                                Edit
                              </a>
                            </li>
                            <li>
                              <a href="#" class="dropdown-item">
                                <span>
                                  <img
                                    src="assets/images/svg/copy-link.svg"
                                    alt="copylink"
                                  />
                                </span>
                                Copy Link
                              </a>
                            </li>
                            <li>
                              <a
                                href="#"
                                class="dropdown-item remove-killer plain-btn"
                              >
                                <span>
                                  <img
                                    src="assets/images/svg/trash.svg"
                                    alt="copylink"
                                  />
                                </span>
                                Delete
                              </a>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div id="task-3">
                        <div id="done">
                          <div class="card-priority rt-mb-12">
                            <!-- top bar  -->
                            <div class="card-priority__header">
                              <div class="date">
                                <span class="icon">
                                  <img
                                    src="assets/images/svg/clock.svg"
                                    alt="clock"
                                  />
                                </span>
                                <p>14 Nov, 2021</p>
                              </div>
                              <!-- actions  -->
                              <div class="card-priority__actions">
                                <button
                                  class="dots-three text-gray-400 f-size-24 lh-1"
                                  type="button"
                                  id="dropdownMenuButton4"
                                  data-bs-toggle="dropdown"
                                  aria-expanded="true"
                                >
                                  <img
                                    src="assets/images/svg/dot.svg"
                                    alt="clock"
                                  />
                                </button>
                                <ul
                                  class="dropdown-menu dropdown-actions"
                                  aria-labelledby="dropdownMenuButton4"
                                  data-popper-placement="bottom-start"
                                >
                                  <li>
                                    <a href="#" class="dropdown-item">
                                      <span>
                                        <img
                                          src="assets/images/svg/pen.svg"
                                          alt="pen"
                                        />
                                      </span>
                                      Edit
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#" class="dropdown-item">
                                      <span>
                                        <img
                                          src="assets/images/svg/copy-link.svg"
                                          alt="copylink"
                                        />
                                      </span>
                                      Copy Link
                                    </a>
                                  </li>
                                  <li>
                                    <a
                                      href="#"
                                      type="button"
                                      class="dropdown-item remove-killer plain-btn"
                                    >
                                      <span>
                                        <img
                                          src="assets/images/svg/trash.svg"
                                          alt="copylink"
                                        />
                                      </span>
                                      Delete
                                    </a>
                                  </li>
                                </ul>
                              </div>
                            </div>

                            <!-- labels  -->
                            <div class="card-priority__labels">
                              <ul>
                                <li>
                                  <span class="labels medium"
                                    >Medium Priority</span
                                  >
                                </li>
                                <li>
                                  <span class="labels urgent green"
                                    ><img
                                      class="rt-mr-6"
                                      src="assets/images/svg/circle-green.svg"
                                      alt=""
                                    />
                                    Productivity</span
                                  >
                                </li>
                              </ul>
                            </div>
                            <h2 class="card-priority__title pointer">
                              Learn how to work with kanban board.
                            </h2>
                            <!-- priority footer  -->
                            <div class="card-priority__footer">
                              <div>
                                <ul class="labels-info">
                                  <li>
                                    <a href="#">
                                      <span>
                                        <img
                                          src="assets/images/svg/attach.svg"
                                          alt="icon"
                                        />
                                      </span>
                                      5
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#">
                                      <span>
                                        <img
                                          src="assets/images/svg/comments.svg"
                                          alt="icon"
                                        />
                                      </span>
                                      19
                                    </a>
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </div>
                          <div class="card-priority rt-mb-12">
                            <!-- top bar  -->
                            <div class="card-priority__header">
                              <div class="date">
                                <span class="icon">
                                  <img
                                    src="assets/images/svg/clock.svg"
                                    alt="clock"
                                  />
                                </span>
                                <p>14 Nov, 2021</p>
                              </div>
                              <!-- actions  -->
                              <div class="card-priority__actions">
                                <button
                                  class="dots-three text-gray-400 f-size-24 lh-1"
                                  type="button"
                                  id="dropdownMenuButton8"
                                  data-bs-toggle="dropdown"
                                  aria-expanded="true"
                                >
                                  <img
                                    src="assets/images/svg/dot.svg"
                                    alt="clock"
                                  />
                                </button>
                                <ul
                                  class="dropdown-menu dropdown-actions"
                                  aria-labelledby="dropdownMenuButton8"
                                  data-popper-placement="bottom-start"
                                >
                                  <li>
                                    <a href="#" class="dropdown-item">
                                      <span>
                                        <img
                                          src="assets/images/svg/pen.svg"
                                          alt="pen"
                                        />
                                      </span>
                                      Edit
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#" class="dropdown-item">
                                      <span>
                                        <img
                                          src="assets/images/svg/copy-link.svg"
                                          alt="copylink"
                                        />
                                      </span>
                                      Copy Link
                                    </a>
                                  </li>
                                  <li>
                                    <a
                                      href="#"
                                      type="button"
                                      class="dropdown-item remove-killer plain-btn"
                                    >
                                      <span>
                                        <img
                                          src="assets/images/svg/trash.svg"
                                          alt="copylink"
                                        />
                                      </span>
                                      Delete
                                    </a>
                                  </li>
                                </ul>
                              </div>
                            </div>

                            <div class="card-priority-thumb">
                              <img src="assets/images/all-img/kanban-thumb2.jpg" alt="">
                            </div>

                            <!-- labels  -->
                            <div class="card-priority__labels">
                              <ul>
                                <li>
                                  <span class="labels red"
                                    >High Priority</span
                                  >
                                </li>
                                <li>
                                  <span class="labels urgent"
                                    ><img
                                      class="rt-mr-6"
                                      src="assets/images/svg/red-circle.svg"
                                      alt=""
                                    />
                                    Urgents</span
                                  >
                                </li>
                              </ul>
                            </div>
                            <h2 class="card-priority__title pointer">
                              Buy Green Plants for my Desk.
                            </h2>
                            
                          </div>
                        </div>
                      </div>
                      <div class="add-new-card-btn">
                        <button
                          type="button"
                          class="btn btn-primary2 waves-effect primary-dark pill btn-icon d-block"
                          id="done_task"
                          name="button-group"
                        >
                          <span class="button-content-wrapper">
                            <span class="button-icon align-icon-left">
                              <i class="ph-plus"></i>
                            </span>
                            <span class="button-text"> Add new card </span>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="kanbanboard_child">
                  <div class="card">
                      <button
                        class="plain-btn add-new-column text-primary-500 font-semibold"
                        data-bs-toggle="modal"
                        data-bs-target="#createboard-modal"
                      >
                        <span>
                          <svg
                            width="21"
                            height="20"
                            viewBox="0 0 21 20"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M11.0625 9.375V9.4375H11.125H17.375C17.5242 9.4375 17.6673 9.49676 17.7727 9.60225C17.8782 9.70774 17.9375 9.85082 17.9375 10C17.9375 10.1492 17.8782 10.2923 17.7727 10.3977C17.6673 10.5032 17.5242 10.5625 17.375 10.5625H11.125H11.0625V10.625V16.875C11.0625 17.0242 11.0032 17.1673 10.8977 17.2727C10.7923 17.3782 10.6492 17.4375 10.5 17.4375C10.3508 17.4375 10.2077 17.3782 10.1023 17.2727C9.99676 17.1673 9.9375 17.0242 9.9375 16.875V10.625V10.5625H9.875H3.625C3.47582 10.5625 3.33274 10.5032 3.22725 10.3977C3.12176 10.2923 3.0625 10.1492 3.0625 10C3.0625 9.85082 3.12176 9.70774 3.22725 9.60225C3.33274 9.49676 3.47582 9.4375 3.625 9.4375H9.875H9.9375V9.375V3.125C9.9375 2.97582 9.99676 2.83274 10.1023 2.72725C10.2077 2.62176 10.3508 2.5625 10.5 2.5625C10.6492 2.5625 10.7923 2.62176 10.8977 2.72725C11.0032 2.83274 11.0625 2.97582 11.0625 3.125V9.375Z"
                              fill="#005CE8"
                              stroke="#005CE8"
                              stroke-width="0.125"
                            />
                          </svg> </span
                        >Add new Column
                      </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {% include "../templates/layout/header-footer/footer.html" %}
      </div>
    </div>
  </div>
</main>

<!-- Modal -->
<div
  class="modal fade"
  id="createboard-modal"
  tabindex="-1"
  aria-labelledby="createboard-modalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog createboard-modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="f-size-18 font-medium lh-1">Create New Column</h5>
        <button type="button" class="plain-btn" data-bs-dismiss="modal">
          <img
            src="assets/images/svg/odal-close.svg"
            alt=""
            draggable="false"
          />
        </button>
      </div>
      <div class="modal-body">
        <div class="rt-mb-24">
          <label class="body-font-4 pointer block mb-2" for="board_title"
            >Tittle</label
          >
          <input
            type="text"
            placeholder="Add label tittle"
            class="form-control"
            id="board_title"
          />
        </div>
        <div class="createboard-modal-footer d-flex justify-content-between">
          <button
            type="button"
            class="btn btn-dark2 pill"
            data-bs-dismiss="modal"
          >
            Cancel
          </button>

          <button
            type="button"
            class="btn btn-primary pill btn-icon"
            id="createboard"
          >
            <span class="button-content-wrapper">
              <span class="button-icon align-icon-right">
                <i class="ph-arrow-right"></i>
              </span>
              <span class="button-text"> Create Column </span>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div
  class="modal fade"
  id="viewmodal"
  tabindex="-1"
  aria-labelledby="viewmodalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog viewmodal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <div>
          <button class="plain-btn rt-mr-8">
            <svg
              width="40"
              height="40"
              viewBox="0 0 40 40"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M0 20C0 8.95431 8.95431 0 20 0V0C31.0457 0 40 8.95431 40 20V20C40 31.0457 31.0457 40 20 40V40C8.95431 40 0 31.0457 0 20V20Z"
                fill="#F5F6F7"
              />
              <path
                d="M20 22.5H17.5V20L25 12.5L27.5 15L20 22.5Z"
                stroke="#191B1C"
                stroke-width="1.25"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M23.125 14.375L25.625 16.875"
                stroke="#191B1C"
                stroke-width="1.25"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M26.875 19.375V26.25C26.875 26.4158 26.8092 26.5747 26.6919 26.6919C26.5747 26.8092 26.4158 26.875 26.25 26.875H13.75C13.5842 26.875 13.4253 26.8092 13.3081 26.6919C13.1908 26.5747 13.125 26.4158 13.125 26.25V13.75C13.125 13.5842 13.1908 13.4253 13.3081 13.3081C13.4253 13.1908 13.5842 13.125 13.75 13.125H20.625"
                stroke="#191B1C"
                stroke-width="1.25"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </button>
          <button class="plain-btn">
            <svg
              width="40"
              height="40"
              viewBox="0 0 40 40"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M20 40C8.95431 40 0 31.0457 0 20V20C0 8.95431 8.95431 0 20 0V0C31.0457 0 40 8.95431 40 20V20C40 31.0457 31.0457 40 20 40V40Z"
                fill="#F5F6F7"
              />
              <path
                d="M20 25.5C19.7239 25.5 19.5 25.2761 19.5 25C19.5 24.7239 19.7239 24.5 20 24.5C20.2761 24.5 20.5 24.7239 20.5 25C20.5 25.2761 20.2761 25.5 20 25.5ZM20 20.5C19.7239 20.5 19.5 20.2761 19.5 20C19.5 19.7239 19.7239 19.5 20 19.5C20.2761 19.5 20.5 19.7239 20.5 20C20.5 20.2761 20.2761 20.5 20 20.5ZM20 15.5C19.7239 15.5 19.5 15.2761 19.5 15C19.5 14.7239 19.7239 14.5 20 14.5C20.2761 14.5 20.5 14.7239 20.5 15C20.5 15.2761 20.2761 15.5 20 15.5Z"
                fill="#191B1C"
                stroke="#191B1C"
                stroke-width="1.5"
              />
            </svg>
          </button>
        </div>
        <button
          type="button"
          class="plain-btn"
          data-bs-dismiss="modal"
          aria-label="Close"
        >
          <img
            src="assets/images/svg/close-btn.png"
            alt=""
            draggable="false"
          />
        </button>
      </div>
      <div class="modal-body">
        <div class="card-details-wrap">
          <div class="card-details-body">
            <div class="project-idea-wrap">
              <div class="project-idea-header">
                <h3>
                  New Project Idea & Research
                  <span
                    class="badge rounded-pill bg-danger-50 text-danger-500 rt-ml-8"
                    >High Priority</span
                  >
                </h3>
              </div>
              <div class="project-idea-body">
                <div class="project-idea-data">
                  <h5>Label</h5>
                  <span
                    ><img
                      class="rt-mr-6"
                      src="assets/images/svg/red-circle.svg"
                      alt=""
                    />Urgents</span
                  >
                </div>
                <div class="project-idea-data">
                  <h5>Created date</h5>
                  <p>12 Nov, 2021 at 9:40 PM</p>
                </div>
                <div class="project-idea-data">
                  <h5>Due Date</h5>
                  <p>15 Nov, 2021 at 10:00 AM</p>
                </div>
              </div>
            </div>
            <div class="project-description">
              <h4>Description</h4>
              <p>
                In lobortis fermentum venenatis. Phasellus orci libero, feugiat
                et velit non, sagittis feugiat eros. In placerat risus vitae est
                faucibus, in laoreet enim rutrum. Mauris posuere vitae felis at
                convallis. Integer consequat et tellus vel tincidunt. Aenean
                rhoncus ligula eu risus molestie semper.
              </p>
            </div>
            <div class="project-member-column">
              <h4>Members <span>(05)</span></h4>
              <div class="project-member-wrap">
                <div class="project-member-item">
                  <div class="project-member-thumb">
                    <img src="assets/images/all-img/users/user1.png" alt="" />
                  </div>
                  <div class="project-member-data">
                    <h5>Brooklyn Simmons</h5>
                    <a href="#">ateniese@mac.com</a>
                  </div>
                </div>
                <div class="project-member-item">
                  <div class="project-member-thumb">
                    <img src="assets/images/all-img/users/two.png" alt="" />
                  </div>
                  <div class="project-member-data">
                    <h5>Ralph Edwards</h5>
                    <a href="#">raines@optonline.com</a>
                  </div>
                </div>
                <div class="project-member-item">
                  <div class="project-member-thumb">
                    <img src="assets/images/all-img/users/one.png" alt="" />
                  </div>
                  <div class="project-member-data">
                    <h5>Devon Lane</h5>
                    <a href="#">gravyface@mac.com</a>
                  </div>
                </div>
                <div class="project-member-item">
                  <div class="project-member-thumb">
                    <img src="assets/images/all-img/users/three.png" alt="" />
                  </div>
                  <div class="project-member-data">
                    <h5>Arlene McCoy</h5>
                    <a href="#">kspiteri@live.com</a>
                  </div>
                </div>
                <div class="project-member-item">
                  <div class="project-member-thumb">
                    <img src="assets/images/all-img/users/one.png" alt="" />
                  </div>
                  <div class="project-member-data">
                    <h5>Jane Cooper</h5>
                    <a href="#">mthurn@optonline.com</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="project-tab">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
              <li class="nav-item" role="presentation">
                <button
                  class="nav-link active"
                  id="home-tab"
                  data-bs-toggle="tab"
                  data-bs-target="#home"
                  type="button"
                  role="tab"
                  aria-controls="home"
                  aria-selected="true"
                >
                  Comments
                </button>
              </li>
              <li class="nav-item" role="presentation">
                <button
                  class="nav-link"
                  id="profile-tab"
                  data-bs-toggle="tab"
                  data-bs-target="#profile"
                  type="button"
                  role="tab"
                  aria-controls="profile"
                  aria-selected="false"
                >
                  Attach File
                </button>
              </li>
            </ul>
            <div class="project-tab-body_s">
              <div class="tab-content" id="myTabContent">
                <div
                  class="tab-pane fade show active"
                  id="home"
                  role="tabpanel"
                  aria-labelledby="home-tab"
                >
                  <div class="post-comment-wrap">
                    <h4 class="rt-mb-30 rt-pt-20">Post Comments</h4>
                    <form action="#">
                      <div class="fromGroup post-comment has-icon mb-4">
                        <div class="form-control-icon">
                          <input
                            class="form-control"
                            type="text"
                            placeholder="Write down your questions and comments..."
                          />
                          <div class="icon-badge-2">
                            <img
                              src="assets/images/svg/chat-circle-dots.svg"
                              alt=""
                            />
                          </div>
                        </div>
                        <button
                          type="button"
                          class="btn btn-primary pill btn-icon"
                        >
                          <span class="button-content-wrapper">
                            <span class="button-icon align-icon-right">
                              <i class="ph-arrow-right"></i>
                            </span>
                            <span class="button-text"> Post </span>
                          </span>
                        </button>
                      </div>
                    </form>
                  </div>
                  <div class="latest-comment-wrap">
                    <h4>Latest Comments</h4>
                    <div class="latest-comment-item">
                      <div class="latest-comment-thumb">
                        <img
                          src="assets/images/all-img/users/three.png"
                          alt=""
                        />
                      </div>
                      <div class="latest-comment-data">
                        <h5>Jane Cooper<span>10 mins ago</span></h5>
                        <p>
                          <a href="#"
                            ><span class="font-medium">@Everyone</span></a
                          >Great Job.
                        </p>
                      </div>
                    </div>
                    <div class="latest-comment-item">
                      <div class="latest-comment-thumb">
                        <img
                          src="assets/images/all-img/users/user1.png"
                          alt=""
                        />
                      </div>
                      <div class="latest-comment-data">
                        <h5>Jane Cooper<span>10 mins ago</span></h5>
                        <p>
                          <a href="#"
                            ><span class="font-medium">@Everyone</span></a
                          >Great Job.
                        </p>
                      </div>
                    </div>
                    <div class="latest-comment-item">
                      <div class="latest-comment-thumb">
                        <img src="assets/images/all-img/users/one.png" alt="" />
                      </div>
                      <div class="latest-comment-data">
                        <h5>Jane Cooper<span>10 mins ago</span></h5>
                        <p>
                          <a href="#"
                            ><span class="font-medium">@Everyone</span></a
                          >Great Job.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="tab-pane fade"
                  id="profile"
                  role="tabpanel"
                  aria-labelledby="profile-tab"
                >
                  <div class="latest-comment-wrap">
                    <div
                      class="upload-file-wrap_2 position-relative text-center"
                    >
                      <img
                        src="assets/images/svg/cloud-arrow-up.svg"
                        alt=""
                        class="rt-mb-30"
                      />
                      <h4>Upload new file or folder</h4>
                      <p>Drag an drop a file or <a href="#">browse file</a></p>
                      <input type="file" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}