- var theme_customizer      = true;
- var sidebar               = true;
- var apexmoment            = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
- var apex                  = true;
- var dashboard_3           = true;
- var date_picker           = 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-fluid
            .page-title
              .row
                .col-6
                  h3
                    | Online course
                .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 Dashboard
                    li.breadcrumb-item.active Online course
          // Container-fluid starts
          .container-fluid
            .row
              .col-xxl-5.col-ed-6.col-xl-8.box-col-7
                .row
                  .col-sm-12
                    .card.o-hidden.welcome-card             
                      .card-body
                        h4.mb-3.mt-1.f-w-500.mb-0.f-22 Hello Jashmin
                          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") 
                  .col-sm-6
                    .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 100+
                            span.f-light Completed Courses
                            a.btn.btn-light(href="learning-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
                  .col-sm-6
                    .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 50+
                            span.f-light In Progress Courses
                            a.btn.btn-light(href="learning-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
              .col-xxl-2.col-ed-3.col-xl-4.col-sm-6.box-col-5
                .card.get-card
                  .card-header.card-no-border
                    h5 Today Progress
                    span.f-14.f-w-500.f-light Your Daily Goal Almost Done!
                  .card-body.pt-0
                    .progress-chart-wrap
                      #progresschart
              .col-xl-2.col-ed-3.d-xxl-block.d-sm-none.box-col-none
                .card.get-card.overflow-hidden 
                  .card-header.card-no-border
                    h5 Do You Want to Get
                    span.f-14.f-w-500.f-light Better Results?
                    a.btn.btn-primary.btn-hover-effect(href="#") 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.img-fluid(src="../assets/images/dashboard-3/better.png", alt="leptop with men vector")
                  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
              .col-xxl-3.col-ed-5.col-xl-5.col-sm-6.box-col-5
                .card 
                  .card-body
                    .default-datepicker 
                      .datepicker-here(data-language='en')
              .col-xxl-5.col-ed-7.col-xl-7.box-col-7
                .card 
                  .card-header.card-no-border
                    .header-top
                      h5.m-0 Learning Overview
                        span.f-14.f-w-500.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='#') Today
                            a.dropdown-item(href='#') Tomorrow
                            a.dropdown-item(href='#') Yesterday
                  .card-body.pt-0 
                    .learning-wrap 
                      #learning-chart
              .col-xxl-4.col-ed-7.col-xl-7.col-md-6.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='#') Tomorrow
                          a.dropdown-item(href='#') Yesterday 
                  .card-body.pt-0
                    .row.m-0.overall-card
                      .col-xl-8                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                        .chart-right
                          .row
                            .col-xl-12
                              .card-body.p-0
                                .activity-wrap
                                  #activity-chart
                      .col-xl-4.p-0
                        .row.g-sm-3.g-2.mt-0
                          .col-xl-12.col-md-6.col-sm-4
                            .light-card.balance-card
                              div 
                                span.f-light Time Spent
                                h6.mt-1.mb-0 30
                                  span.badge.badge-light-success.rounded-pill.ms-1 140%
                          .col-xl-12.col-md-6.col-sm-4
                            .light-card.balance-card
                              div 
                                span.f-light Lessons taken
                                h6.mt-1.mb-0 45
                                  span.badge.badge-light-success.rounded-pill.ms-1 86%
                          .col-xl-12.col-md-6.col-sm-4
                            .light-card.balance-card
                              div 
                                span.f-light Exams passed
                                h6.mt-1.mb-0 12
                                  span.badge.badge-light-success.rounded-pill.ms-1 120%
              .col-xxl-3.col-ed-5.col-xl-5.col-md-6.box-col-5
                .card
                  .card-header.card-no-border
                    .header-top  
                      h5 Upcoming Events
                      .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='#') Tomorrow
                          a.dropdown-item(href='#') Yesterday 
                  .card-body.pt-0
                    .upcoming-event-wrap
                      #upcomingchart
              .col-xxl-5.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
                        .dropdown
                          button#popularButton.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                            | Most Popular
                          .dropdown-menu.dropdown-menu-end(aria-labelledby='popularButton')
                            a.dropdown-item(href='#') Today
                            a.dropdown-item(href='#') Tomorrow
                            a.dropdown-item(href='#') Yesterday
                  .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
              .col-xxl-4.col-ed-6.col-md-7.box-col-7
                .card.schedule-card
                  .card-header.card-no-border
                    .header-top
                      h5.m-0 Upcoming Schedule
                      .card-header-right-icon
                        a(href="#").btn.badge-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 January 3, 2022
                            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 Febuary 10, 2022
                            li.f-light
                              svg.fill-icon.f-success
                                use(href='../assets/svg/icon-sprite.svg#clock')
                              span  11.00 - 1.00 PM
              .col-xxl-3.col-ed-6.col-md-5.col-sm-6.box-col-5
                .card
                  .card-header.card-no-border
                    .header-top
                      h5.m-0 Active Lessons
                      .card-header-right-icon
                        a(href="#").link-only View 
                          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.f-w-400.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.f-w-400.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.f-w-400.mb-0 Bootstrap 5
                          span.f-light Framework
                        .lesson-wrap.ms-auto 
                          #lessonChart3
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files