- var todo                  = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/taptop
    include ../../components/loader
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container-fluid
            .page-title
              .row
                .col-6
                  h3
                    | To-Do
                .col-6
                  ol.breadcrumb
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Apps
                    li.breadcrumb-item.active To-Do
          // Container-fluid starts
          .container-fluid.email-wrap.bookmark-wrap.todo-wrap
            .row
              .col-xl-3.xl-30.box-col-12
                .email-sidebar.md-sidebar
                  a.btn.btn-primary.email-aside-toggle.md-sidebar-toggle To Do filter
                  .email-left-aside.md-sidebar-aside
                    .card 
                      .card-body 
                        .email-app-sidebar.left-bookmark.custom-scrollbar
                          .d-flex.align-items-center
                            .media-size-email
                              img.me-3.img-40.rounded-circle(src="../assets/images/user/user.png", alt="")
                            .flex-grow-1 
                              h6.f-w-600 Mark Jecno
                              p Markjecno@gmail.com
                          ul.nav.main-menu
                            li.nav-item
                              button.btn-primary.badge-light.d-block.btn-mail.w-100
                                i.me-2(data-feather="check-circle") 
                                | To Do List
                            li.nav-item 
                              a(href="javascript:void(0)")
                                span.iconbg.badge-light-primary
                                  i(data-feather="file-plus")
                                span.title.ms-2 All Task
                            li.nav-item
                              a(href="javascript:void(0)")
                                span.iconbg.badge-light-success
                                  i(data-feather="check-circle")
                                span.title.ms-2 Completed
                                span.badge.badge-success 3
                            li.nav-item
                              a(href="javascript:void(0)")
                                span.iconbg.badge-light-danger
                                  i(data-feather="cast")
                                span.title.ms-2 Pending
                                span.badge.badge-danger 2
                            li.nav-item
                              a(href="javascript:void(0)")
                                span.iconbg.badge-light-info
                                  i(data-feather="activity")
                                span.title.ms-2 In Process
                                span.badge.badge-primary 2
                            li.nav-item
                              a(href="javascript:void(0)")
                                span.iconbg.badge-light-danger
                                  i(data-feather="trash")
                                span.title.ms-2 Trash
              .col-xl-9.xl-70.box-col-12
                .card
                  .card-header
                    h3.mb-0 To-Do
                  .card-body
                    .todo
                      .todo-list-wrapper
                        .todo-list-container
                          .mark-all-tasks
                            .mark-all-tasks-container
                              span#mark-all-finished.mark-all-btn(role='button')
                                span.btn-label Mark all as finished
                                span.action-box.completed
                                  i.icon
                                    i.icon-check
                              span#mark-all-incomplete.mark-all-btn.move-down(role='button')
                                span.btn-label Mark all as Incomplete
                                span.action-box
                                  i.icon
                                    i.icon-check
                            .todo-list-footer.ms-2
                              .add-task-btn-wrapper
                                span.add-task-btn
                                  button.btn.btn-primary
                                    i.icon-plus
                                    |  Add new task
                          .todo-list-body
                            .todo-list-footer 
                              .new-task-wrapper.mb-4
                                  textarea#new-task(placeholder='Enter new task here. . .')
                                  span#close-task-panel.btn.btn-danger.cancel-btn Close
                                  span#add-task.btn.btn-success.ms-3.add-new-task-btn Add Task
                            ul#todo-list
                              li.task
                                .task-container
                                  h4.task-label Check validation involves making sure all your tags are properly closed and nested.
                                  .d-flex.align-items-center.gap-4
                                    span.badge.badge-light-primary In Progress
                                    h5.assign-name.m-0 10 Nov
                                    span.task-action-btn
                                      span.action-box.large.delete-btn(title='Delete Task')
                                        i.icon
                                          i.icon-trash
                                      span.action-box.large.complete-btn(title='Mark Complete')
                                        i.icon
                                          i.icon-check
                              li.task
                                .task-container
                                  h4.task-label Test the outgoing links from all the pages to the specific domain under test.
                                  .d-flex.align-items-center.gap-4
                                    span.badge.badge-light-danger Pending
                                    h5.assign-name.m-0 04 Aug
                                    span.task-action-btn
                                      span.action-box.large.delete-btn(title='Delete Task')
                                        i.icon
                                          i.icon-trash
                                      span.action-box.large.complete-btn(title='Mark Complete')
                                        i.icon
                                          i.icon-check
                              li.completed.task
                                .task-container
                                  h4.task-label Test links are used to send emails to admin or other users from web pages.
                                  .d-flex.align-items-center.gap-4
                                    span.badge.badge-light-success Done
                                    h5.assign-name.m-0 25 Feb
                                    span.task-action-btn
                                      span.action-box.large.delete-btn(title='Delete Task')
                                        i.icon
                                          i.icon-trash
                                      span.action-box.large.complete-btn(title='Mark Complete')
                                        i.icon
                                          i.icon-check
                              li.task
                                .task-container
                                  h4.task-label Options to create forms, if any, form deletes a view or modify the forms.
                                  .d-flex.align-items-center.gap-4
                                    span.badge.badge-light-primary In Progress
                                    h5.assign-name.m-0 15 Dec
                                    span.task-action-btn
                                      span.action-box.large.delete-btn(title='Delete Task')
                                        i.icon
                                          i.icon-trash
                                      span.action-box.large.complete-btn(title='Mark Complete')
                                        i.icon
                                          i.icon-check
                              li.task
                                .task-container
                                  h4.task-label Wrong inputs in the forms to the fields in the forms.
                                  .d-flex.align-items-center.gap-4
                                    span.badge.badge-light-danger Pending
                                    h5.assign-name.m-0 11 Nov
                                    span.task-action-btn
                                      span.action-box.large.delete-btn(title='Delete Task')
                                        i.icon
                                          i.icon-trash
                                      span.action-box.large.complete-btn(title='Mark Complete')
                                        i.icon
                                          i.icon-check
                              li.task.completed
                                .task-container
                                  h4.task-label Check if the instructions provided are perfect to satisfy its purpose.
                                  .d-flex.align-items-center.gap-4
                                    span.badge.badge-light-danger Pending
                                    h5.assign-name.m-0 04 Sept
                                    span.task-action-btn
                                      span.action-box.large.delete-btn(title='Delete Task')
                                        i.icon
                                          i.icon-trash
                                      span.action-box.large.complete-btn(title='Mark Complete')
                                        i.icon
                                          i.icon-check
                              li.task
                                .task-container
                                  h4.task-label Application server and Database server interface.
                                  .d-flex.align-items-center.gap-4
                                    span.badge.badge-light-success Done
                                    h5.assign-name.m-0 08 July
                                    span.task-action-btn
                                      span.action-box.large.delete-btn(title='Delete Task')
                                        i.icon
                                          i.icon-trash
                                      span.action-box.large.complete-btn(title='Mark Complete')
                                        i.icon
                                          i.icon-check
                          
                      .notification-popup.hide
                        p
                          span.task
                          span.notification-text
                    // HTML Template for tasks
                    script#task-template(type='tect/template').
                      <li class="task">
                        <div class="task-container">
                          <h4 class="task-label"></h4>
                          <div class="d-flex align-items-center gap-4">
                            <span class="badge badge-light-danger">Pending</span>
                            <h5 class="assign-name">16 Jan</h5>
                            <span class="task-action-btn">
                              <span class="action-box large delete-btn" title="Delete Task">
                                <i class="icon"><i class="icon-trash"></i></i>
                              </span>
                              <span class="action-box large complete-btn" title="Mark Complete">
                                <i class="icon"><i class="icon-check"></i></i>
                              </span>
                            </span>
                          </div>
                        </div>
                      </li>
          // Container-fluid Ends

          // Container-fluid ends                    
        include ../../components/footer
    include ../../components/footer-files
