(function ($) {
  "use strict";
  var kanban1 = new jKanban({
    element: '#demo1',
    boards: [{
        'id': '_todo',
        'title': 'Todo (2)',
        'item': [{
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">23/7/22</span><span class="badge badge-primary f-right">medium</span>
                                  <h6>Design Dashboard</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/6.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+10</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          },
          {
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">04/7/23</span><span class="badge badge-danger f-right">Urgent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/9.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          }
        ]
      },
      {
        'id': '_doing',
        'title': 'Doing (2)',
        'item': [{
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/22</span><span class="badge badge-danger f-right">Urgent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          },
          {
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">08/2/23</span><span class="badge badge-success f-right">Low</span>
                                  <h6>Dashboard issue</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/9.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Pixelstrap, New york</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          }
        ]
      },
      {
        'id': '_done',
        'title': 'Done (2)',
        'item': [{
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">04/7/23</span><span class="badge badge-danger f-right">Urgent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          },
          {
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">23/7/22</span><span class="badge badge-primary f-right">medium</span>
                                  <h6>Design Dashboard</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/9.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+10</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          }
        ]
      }
    ]
  });

  var kanban2 = new jKanban({
    element: '#demo2',
    gutter: '15px',
    click: function (el) {
      alert(el.innerHTML);
    },
    boards: [{
        'id': '_todo',
        'title': 'To Do (Item only in Working)',
        'class': 'bg-info',
        'dragTo': ['_working'],
        'item': [{
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/22</span><span class="badge badge-info f-right">medium</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/6.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          },
          {
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">08/2/23</span><span class="badge badge-success f-right">Low</span>
                                  <h6>Dashboard issue</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/6.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Pixelstrap, New york</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          }
        ]
      },
      {
        'id': '_working',
        'title': 'Working',
        'class': 'bg-warning',
        'item': [{
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">04/7/23</span><span class="badge badge-danger f-right">Urgent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          },
          {
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">12/4/23</span><span class="badge badge-success f-right">Low</span>
                                  <h6>Dashboard issue</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Pixelstrap, New york</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          }
        ]
      },
      {
        'id': '_done',
        'title': 'Done (Item only in Working)',
        'class': 'bg-success',
        'dragTo': ['_working'],
        'item': [{
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/22</span><span class="badge badge-danger f-right">Urgent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/7.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          },
          {
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">04/7/23</span><span class="badge badge-success f-right">Low</span>
                                  <h6>Dashboard issue</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/7.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Pixelstrap, New york</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          }
        ]
      }
    ]
  });

  var kanban3 = new jKanban({
    element: '#demo3',
    gutter: '15px',
    click: function (el) {
      alert(el.innerHTML);
    },
    boards: [{
        'id': '_todo',
        'title': 'To Do',
        'class': 'info',
        'item': [{
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">08/2/23</span><span class="badge badge-danger f-right">Urgent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/7.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          },
          {
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">12/4/23</span><span class="badge badge-danger f-right">Urgent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/9.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          },
        ]
      },
      {
        'id': '_working',
        'title': 'Working',
        'class': 'warning',
        'item': [{
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">04/7/23</span><span class="badge badge-danger f-right">Urgent</span>
                                  <img class="mt-2 img-fluid" src="../assets/images/other-images/maintenance-bg.jpg" alt="" data-original-title="" title="">
                                  <h6>Test Sidebar</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          },
          {
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">04/7/23</span><span class="badge badge-danger f-right">Urgent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/6.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          },
        ]
      },
      {
        'id': '_done',
        'title': 'Done',
        'class': 'success',
        'item': [{
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/22</span><span class="badge badge-danger f-right">Urgent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/7.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          },
          {
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">08/2/23</span><span class="badge badge-danger f-right">Urgent</span>
                                  <img class="mt-2 img-fluid" src="../assets/images/other-images/sidebar-bg.jpg" alt="" data-original-title="" title="">
                                  <h6>Test Sidebar</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/6.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          },
        ]
      }
    ]
  });

  var toDoButton = document.getElementById('addToDo');
  toDoButton.addEventListener('click', function () {
    kanban3.addElement(
      '_todo', {
        'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">04/7/23</span><span class="badge badge-danger f-right">Urgent</span>
                                  <img class="mt-2 img-fluid" src="../assets/images/other-images/sidebar-bg.jpg" alt="" data-original-title="" title="">
                                  <h6>Test Sidebar</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
      }
    );
  });

  var addBoardDefault = document.getElementById('addDefault');
  addBoardDefault.addEventListener('click', function () {
    kanban3.addBoards(
      [{
        'id': '_default',
        'title': 'Kanban Default',
        'item': [{
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">12/4/23</span><span class="badge badge-danger f-right">Urgent</span>
                                  <h6>Test Sidebar</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/7.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          },

          {
            'title': `
                                <a class="kanban-box" href="javascript:void(0)"><span class="date">08/2/23</span><span class="badge badge-danger f-right">Urgent</span>
                                  <img class="mt-2 img-fluid" src="../assets/images/other-images/maintenance-bg.jpg" alt="" data-original-title="" title="">
                                  <h6>Test Sidebar</h6>
                                  <div class="d-flex align-items-start"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/9.jpg" alt="" data-original-title="" title="">
                                    <div class="flex-grow-1">
                                      <p class="mb-0">Themeforest, australia</p>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3">
                                    <ul class="list">
                                      <li><i class="fa fa-comments-o"></i>2</li>
                                      <li><i class="fa fa-paperclip"></i>2</li>
                                      <li><i class="fa fa-eye"></i></i></li>
                                    </ul>
                                    <div class="customers">
                                      <ul>
                                        <li class="d-inline-block me-3">
                                          <p class="f-12 mb-0">+5</p>
                                        </li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                        <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                      </ul>
                                    </div>
                                  </div></a>
                              `,
          }
        ]
      }]
    )
  });

  var removeBoard = document.getElementById('removeBoard');
  removeBoard.addEventListener('click', function () {
    kanban3.removeBoard('_done');
  });
})(jQuery);