- var page_Title = 'Online Course Dashboard';
- var theme_customizer      = true;
- var sidebar               = true;
- var apexmoment            = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var counter               = true;
- var select_dt             = true;
- var datatable             = true;
- var page_datatable        = true;
- var scrollbar             = true;
- var apex                  = true;
- var flatpickr             = true;
- var dashboard_3           = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start 
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Online course
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Dashboard
                    li.breadcrumb-item.active Online course
          // Container-fluid starts
          .container.dashboard-3
            .grid.grid-cols-12.card-gap
              div(class="col-span-5 xxl:col-span-8 xl:col-span-12 col-ed-6 box-col-7")
                .grid.grid-cols-12.card-gap
                  div(class="col-span-12")
                    .card.overflow-hidden.welcome-card             
                      .card-body
                        h4.mb-3.mt-1.font-medium.f-22 Hello Walter
                          span 
                            img(src="../assets/images/dashboard-3/hand.svg", alt="hand vector")
                        p Learn something new every day with world's best courses.Free online courses available.
                      img.welcome-img(src="../assets/images/dashboard-3/widget.svg", alt="search image") 
                  div(class="col-span-6 sm:col-span-12")
                    .card.course-box 
                      .card-body 
                        .course-widget 
                          .course-icon 
                            svg.fill-icon
                              use(href='../assets/svg/icon-sprite.svg#course-1')
                          div 
                            h4.mb-0 
                              span.counter(data-target='100') 0
                              | +
                            span.f-light Completed Courses
                            a.btn.btn-light(href="course-list-view.html").f-light View Course
                              span.ms-2 
                                svg.fill-icon.f-light
                                  use(href='../assets/svg/icon-sprite.svg#arrowright')
                      ul.square-group
                        li.square-1.warning
                        li.square-1.primary
                        li.square-2.warning1
                        li.square-3.danger
                        li.square-4.light
                        li.square-5.warning
                        li.square-6.success
                        li.square-7.success
                  div(class="col-span-6 sm:col-span-12")
                    .card.course-box 
                      .card-body 
                        .course-widget 
                          .course-icon.warning 
                            svg.fill-icon
                              use(href='../assets/svg/icon-sprite.svg#course-2')
                          div 
                            h4.mb-0 
                              span.counter(data-target='80') 0
                              | +
                            span.f-light In Progress Courses
                            a.btn.btn-light(href="course-list-view.html").f-light View Course
                              span.ms-2 
                                svg.fill-icon.f-light
                                  use(href='../assets/svg/icon-sprite.svg#arrowright')
                      ul.square-group
                        li.square-1.warning
                        li.square-1.primary
                        li.square-2.warning1
                        li.square-3.danger
                        li.square-4.light
                        li.square-5.warning
                        li.square-6.success
                        li.square-7.success
              div(class="col-span-2 xxl:col-span-4 xl:col-span-6 sm:col-span-12 col-ed-3 box-col-5")
                .card.get-card
                  .card-header.card-no-border
                    h5 Today Progress
                    span.font-medium.f-light(class="!text-[14px]") Your Daily Goal Almost Done!
                  .card-body.pt-0
                    .progress-chart-wrap
                      #progresschart   
              div(class="col-span-2 xl:col-span-12 col-ed-3 box-col-none results-box")
                .card.get-card.overflow-hidden 
                  .card-header.card-no-border
                    h5 Do You Want to Get
                    span.font-medium.f-light(class="!text-[14px]") Better Results?
                    a.btn.btn-primary.btn-hover-effect.text-white(href="course-details.html" class="!inline-block") More Details
                      span.ms-1 
                        svg.fill-icon
                          use(href='../assets/svg/icon-sprite.svg#arrowright') 
                  .card-body.pt-0
                    .get-image.text-center 
                      img.max-w-full(src="../assets/images/dashboard-3/better.png", alt="laptop with men vector" class="[@media(max-width:1747px)]:!h-[134px]") 
              div(class="col-span-3 xxl:col-span-5 xl:col-span-6 sm:col-span-12 col-ed-5 box-col-5")
                .card.default-inline-calender 
                  .card-body
                    .input-group.flex.main-inline-calender
                      input#inline-calender1.form-control(type='date')
              div(class="col-span-5 xxl:col-span-7 xl:col-span-12 col-ed-7 box-col-7")
                .card 
                  .card-header.card-no-border
                    .header-top
                      h5.m-0 Learning Overview
                        span.f-14.font-medium.ms-1.f-light
                          | (75% activity growth)
                      .card-header-right-icon
                        .dropdown.icon-dropdown
                          button#learningButton.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                            i.icon-more-alt
                          .dropdown-menu.dropdown-menu-end(aria-labelledby='learningButton')
                            a.dropdown-item(href='#') This Month
                            a.dropdown-item(href='#') Previous Month
                            a.dropdown-item(href='#') Last 3 Months
                            a.dropdown-item(href='#') Last 6 Months
                  .card-body.pt-0 
                    .learning-wrap 
                      #learning-chart
              div(class="col-span-4 xxl:col-span-7 xl:col-span-6 md:col-span-12 col-ed-7 box-col-7") 
                .card
                  .card-header.card-no-border
                    .header-top  
                      h5 Activity Hours
                      .dropdown.icon-dropdown
                        button#activitydropdown.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                          i.icon-more-alt
                        .dropdown-menu.dropdown-menu-end(aria-labelledby='activitydropdown')
                          a.dropdown-item(href='#') Today
                          a.dropdown-item(href='#') Yesterday
                          a.dropdown-item(href='#') This week
                  .card-body(class="!pt-0")
                    .grid.grid-cols-12.gap-3.m-0.overall-card
                      div(class="col-span-8 xl:col-span-12")                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                        .chart-right
                          .grid.grid-cols-12
                            div(class="col-span-12")
                              .card-body(class="!p-0")
                                .activity-wrap
                                  #activity-chart
                      div(class="col-span-4 xl:col-span-12 !p-0")
                        .grid.grid-cols-12(class="!mt-0 gap-y-3 lg:gap-3")
                          div(class="col-span-12 xl:col-span-6 md:col-span-4 sm:col-span-12")
                            .light-card.balance-card
                              div 
                                span.f-light Time Spent
                                h6.mt-1.mb-0 30
                          div(class="col-span-12 xl:col-span-6 md:col-span-4 sm:col-span-12")
                            .light-card.balance-card.activity-details
                              div 
                                span.f-light Course Subscribe
                                h6.mt-1.mb-0 45
                          div(class="col-span-12 xl:col-span-6 md:col-span-4 sm:col-span-12")
                            .light-card.balance-card
                              div 
                                span.f-light Exams Passed
                                h6.mt-1.mb-0 12
              div(class="col-span-3 xxl:col-span-5 xl:col-span-6 md:col-span-12 col-ed-5 box-col-5")
                .card
                  .card-header.card-no-border
                    .header-top  
                      h5 Upcoming Courses
                      .dropdown.icon-dropdown
                        button#upcomingdropdown.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                          i.icon-more-alt
                        .dropdown-menu.dropdown-menu-end(aria-labelledby='upcomingdropdown')
                          a.dropdown-item(href='#') Today
                          a.dropdown-item(href='#') Yesterday
                          a.dropdown-item(href='#') This week 
                  .card-body.pt-0
                    .upcoming-event-wrap
                      #upcomingchart
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header.card-no-border
                    .header-top
                      h5 Top Mentors
                      .card-header-right-icon
                        .dropdown.icon-dropdown
                          button#topMentor.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                            i.icon-more-alt
                          .dropdown-menu.dropdown-menu-end(aria-labelledby='topMentor')
                            a.dropdown-item(href='#!') This Month
                            a.dropdown-item(href='#!') Previous Month
                            a.dropdown-item(href='#!') Last 3 Months
                            a.dropdown-item(href='#!') Last 6 Months
                  .card-body.px-0.pt-0.t-top-mentor
                    .overflow-x-auto.custom-scrollbar
                      table.table#t-top-mentor 
                        thead 
                          tr
                            th 
                            th Mentor Name
                            th Expertise
                            th Courses
                            th Experience
                        tbody 
                          tr 
                            td
                            td
                              .common-flex.items-center
                                img.max-w-full.h-auto.rounded-full(src='../assets/images/dashboard/user/6.jpg',alt='user')
                                a(href="course-list-view.html").font-medium Kathrin Ney
                            td Data Science
                            td 550
                            td 10 Year
                          tr 
                            td
                            td
                              .common-flex.items-center
                                img.max-w-full.h-auto.rounded-full(src='../assets/images/dashboard/user/3.jpg',alt='user')
                                a(href="course-list-view.html").font-medium Mili Pais
                            td UI/UX Designer
                            td 210
                            td 06 Year
                          tr 
                            td
                            td
                              .common-flex.items-center
                                img.max-w-full.h-auto.rounded-full(src='../assets/images/dashboard/user/4.jpg',alt='user')
                                a(href="course-list-view.html").font-medium Robert Fox
                            td English Literature
                            td 920
                            td 15 Year
                          tr 
                            td
                            td
                              .common-flex.items-center
                                img.max-w-full.h-auto.rounded-full(src='../assets/images/dashboard/user/2.jpg',alt='user')
                                a(href="course-list-view.html").font-medium Caleb Riv
                            td Web Designer
                            td 110
                            td 12 Year
                          tr 
                            td
                            td
                              .common-flex.items-center
                                img.max-w-full.h-auto.rounded-full(src='../assets/images/dashboard/user/1.jpg',alt='user')
                                a(href="course-list-view.html").font-medium Caryl Kauth
                            td JS Developer
                            td 120
                            td 10 Year
                          tr 
                            td
                            td
                              .common-flex.items-center
                                img.max-w-full.h-auto.rounded-full(src='../assets/images/dashboard/user/5.jpg',alt='user')
                                a(href="course-list-view.html").font-medium Eriko Fonsa
                            td Painter
                            td 360
                            td 06 Year
                          tr 
                            td
                            td
                              .common-flex.items-center
                                img.max-w-full.h-auto.rounded-full(src='../assets/images/dashboard/user/13.jpg',alt='user')
                                a(href="course-list-view.html").font-medium Olivia Gor
                            td Mathematics
                            td 221
                            td 08 Year
                          tr 
                            td
                            td
                              .common-flex.items-center
                                img.max-w-full.h-auto.rounded-full(src='../assets/images/dashboard/user/10.jpg',alt='user')
                                a(href="course-list-view.html").font-medium Emily Park
                            td Painter
                            td 859
                            td 03 Year
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header.card-no-border
                    .header-top
                      h5 Completed Course
                      .card-header-right-icon
                        .dropdown.icon-dropdown
                          button#courses.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                            i.icon-more-alt
                          .dropdown-menu.dropdown-menu-end(aria-labelledby='courses')
                            a.dropdown-item(href='#!') This Month
                            a.dropdown-item(href='#!') Previous Month
                            a.dropdown-item(href='#!') Last 3 Months
                            a.dropdown-item(href='#!') Last 6 Months
                  .card-body.px-0.pt-0.completed-course-table
                    .overflow-x-auto.custom-scrollbar
                      table.table#completed-course-table 
                        thead 
                          tr
                            th  
                            th Student Name
                            th Course Name
                            th Completion Date
                            th Mentor Name
                        tbody 
                          tr 
                            td
                            td
                              .common-flex.items-center
                                img.max-w-full.h-auto(src='../assets/images/dashboard/user/7.jpg',alt='user')
                                a(href="course-details.html").font-medium Cody Fisher
                            td Python
                            td Oct 25, 2025
                            td Wade Warren
                          tr 
                            td
                            td
                              .common-flex.items-center
                                img.max-w-full.h-auto(src='../assets/images/dashboard/user/12.jpg',alt='user')
                                a(href="course-details.html").font-medium Alexis Taylor
                            td Analysis
                            td May 20, 2025
                            td Dylan Sullivan
                          tr 
                            td
                            td
                              .common-flex.items-center
                                img.max-w-full.h-auto(src='../assets/images/user/10.jpg',alt='user')
                                a(href="course-details.html").font-medium Jenny Wilson
                            td Development
                            td Apr 28, 2025
                            td Guy Hawkins
                          tr 
                            td
                            td
                              .common-flex.items-center
                                img.max-w-full.h-auto(src='../assets/images/dashboard/user/2.jpg',alt='user')
                                a(href="course-details.html").font-medium Lily Ramirez
                            td Marketing
                            td Mar 13, 2025
                            td Ethan Brooks
                          tr 
                            td
                            td
                              .common-flex.items-center
                                img.max-w-full.h-auto(src='../assets/images/dashboard/user/11.jpg',alt='user')
                                a(href="course-details.html").font-medium Andrew Price
                            td Developer
                            td Feb 12, 2025
                            td Nathan Cooper
                          tr 
                            td
                            td
                              .common-flex.items-center
                                img.max-w-full.h-auto(src='../assets/images/user/6.jpg',alt='user')
                                a(href="course-details.html").font-medium Luke Mitchell
                            td Mathematics
                            td Apr 12, 2025
                            td Owen Davis
                          tr 
                            td
                            td
                              .common-flex.items-center
                                img.max-w-full.h-auto(src='../assets/images/user/3.png',alt='user')
                                a(href="course-details.html").font-medium Caleb Rivera
                            td Architect
                            td May 09, 2025
                            td Zoey Jenkins
                          tr 
                            td
                            td
                              .common-flex.items-center
                                img.max-w-full.h-auto(src='../assets/images/user/14.png',alt='user')
                                a(href="course-details.html").font-medium Chloe Wilson
                            td Writer
                            td May 04, 2025
                            td Alexis Taylor

              div(class="col-span-5 xxl:col-span-12 col-ed-12 box-col-12") 
                .card.course-card 
                  .card-header.card-no-border
                    .header-top
                      h5.m-0 My Course
                      .card-header-right-icon
                        a(href="course-list-view.html" target="_blank").link-only View All
                          i(data-feather="arrow-right")
                  .card-body.pt-0
                    .course-main-card
                      .course-wrapper 
                        .course-icon-box
                          .icon-wrap
                            img(src="../assets/images/dashboard-3/course/1.svg", alt="clock vector") 
                          img.arrow-bg(src="../assets/images/dashboard-3/course/back-arrow/1.png", alt="sqaure border arrow")
                        h6.f-14 Management
                      .course-wrapper
                        .course-icon-box
                          .icon-wrap
                            img(src="../assets/images/dashboard-3/course/2.svg", alt="web development vector") 
                          img.arrow-bg(src="../assets/images/dashboard-3/course/back-arrow/2.png", alt="sqaure border arrow")
                        h6.f-14 Web Devlopment
                      .course-wrapper
                        .course-icon-box
                          .icon-wrap
                            img(src="../assets/images/dashboard-3/course/3.svg", alt="business vector") 
                          img.arrow-bg(src="../assets/images/dashboard-3/course/back-arrow/1.png", alt="sqaure border arrow")
                        h6.f-14 Business Analytics
                      .course-wrapper
                        .course-icon-box
                          .icon-wrap
                            img(src="../assets/images/dashboard-3/course/4.svg", alt="marketing vector") 
                          img.arrow-bg(src="../assets/images/dashboard-3/course/back-arrow/3.png", alt="sqaure border arrow")
                        h6.f-14 Marketing
              div(Class="col-span-4 xxl:col-span-7 md:col-span-12 col-ed-6 box-col-7")
                .card.schedule-card
                  .card-header.card-no-border
                    .header-top
                      h5.m-0 Upcoming Schedule
                      .card-header-right-icon
                        a(href="course-list-view.html").btn.btn-light-primary + Create
                  .card-body.pt-0 
                    ul.schedule-list 
                      li.primary
                        img(src="../assets/images/dashboard/user/4.jpg", alt="profile")
                        div 
                          h6.mb-1 Web Design
                          ul
                            li.f-light
                              svg.fill-icon.f-light
                                use(href='../assets/svg/icon-sprite.svg#bag')
                              span March 3, 2025
                            li.f-light
                              svg.fill-icon.f-success
                                use(href='../assets/svg/icon-sprite.svg#clock')
                              span  09.00 - 12.00 AM
                      li.warning
                        img(src="../assets/images/dashboard/user/2.jpg", alt="profile")
                        div 
                          h6.mb-1 UI/UX Design
                          ul
                            li.f-light
                              svg.fill-icon.f-light
                                use(href='../assets/svg/icon-sprite.svg#bag')
                              span April 10, 2025
                            li.f-light
                              svg.fill-icon.f-success
                                use(href='../assets/svg/icon-sprite.svg#clock')
                              span  11.00 - 1.00 PM
              div(class="col-span-3 xxl:col-span-5 md:col-span-12 col-ed-6 box-col-5")
                .card
                  .card-header.card-no-border
                    .header-top
                      h5.m-0 Active Courses
                      .card-header-right-icon
                        a(href="course-list-view.html" target="_blank").link-only View All
                          i(data-feather="arrow-right")
                  .card-body.pt-0 
                    ul.lessons-lists 
                      li 
                        img(src="../assets/images/dashboard-3/lessons/1.png", alt="ux icon")
                        div 
                          h6.f-14.font-normal.mb-0 UI/UX 
                          span.f-light Web design
                        .lesson-wrap.ms-auto 
                          #lessonChart1 
                      li 
                        img(src="../assets/images/dashboard-3/lessons/2.png", alt="vue icon")
                        div 
                          h6.f-14.font-normal.mb-0 Vue 3
                          span.f-light JS Framework
                        .lesson-wrap.ms-auto 
                          #lessonChart2
                      li 
                        img(src="../assets/images/dashboard-3/lessons/3.png", alt="bootstrap icon")
                        div 
                          h6.f-14.font-normal.mb-0 Bootstrap 5
                          span.f-light Framework
                        .lesson-wrap.ms-auto 
                          #lessonChart3
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
