- var page_Title = 'General Widget';
- var height_equal          = true;
- var theme_customizer      = true;
- var date_picker           = true;
- var apex                  = true;
- var general_widget        = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var counter               = true;
- var animate               = true;
- var scrollbar             = 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
                    | General
                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 Widgets
                    li.breadcrumb-item.active General
          // Container-fluid starts
          .container
            .grid.grid-cols-12.card-gap.general-widget-wrapper
              div(class="col-span-2 xxl:col-span-4 sm:col-span-12 box-col-4") 
                .currency-widget.warning.widget-currency
                  .flex
                    .currency-icon-widget 
                      svg
                        use(href='../assets/svg/icon-sprite.svg#beta')
                    div 
                      h6 Bitcoin 
                        span.f-light BTC
                  .card 
                    .card-body.flex
                      .currency-chart-wrap
                        #currency-chart 
                      .bg-light-warning.text-center 
                        h5.mb-sm-0 $21,43
                        span.f-12.font-medium.font-warning
                          i.me-1(data-feather="trending-up")
                          | +50%
              div(class="col-span-2 xxl:col-span-4 sm:col-span-12 box-col-4") 
                .currency-widget.primary.widget-currency
                  .flex
                    .currency-icon-widget 
                      svg
                        use(href='../assets/svg/icon-sprite.svg#eth')
                    div 
                      h6 Ethereum 
                        span.f-light ETC
                  .card 
                    .card-body.flex
                      .currency-chart-wrap
                        #currency-chart2
                      .bg-light-primary.text-center 
                        h5.mb-0 $7,450
                        span.f-12.font-medium.font-primary
                          i.me-1(data-feather="trending-up") 
                          | +35%
              div(class="col-span-2 xxl:col-span-4 sm:col-span-12 box-col-4") 
                .currency-widget.success.widget-currency
                  .flex
                    .currency-icon-widget 
                      svg
                        use(href='../assets/svg/icon-sprite.svg#ltc')
                    div 
                      h6 Leave Travel 
                        span.f-light LTC
                  .card 
                    .card-body.flex
                      .currency-chart-wrap
                        #currency-chart3
                      .bg-light-success.text-center 
                        h5.mb-0 $2,198
                        span.f-12.font-medium.font-success
                          i.me-1(data-feather="trending-up") 
                          | +73%
              div(class="col-span-3 xxl:col-span-6 sm:col-span-12 box-col-6") 
                .card.radial-height
                  .card-body.radial-progress-card 
                    div 
                      h6.mb-0 Average Sales Per Day
                      .sale-details 
                        h5.font-primary.mb-0 45,908
                        span.f-12.f-light.font-medium
                          i(data-feather="arrow-up")
                          | +5.7%
                      p.f-light  Customers benefits offerings
                    .radial-chart-wrap 
                      #radial-chart 
              div(class="col-span-3 xxl:col-span-6 sm:col-span-12 box-col-6") 
                .card.radial-height
                  .card-body.radial-progress-card 
                    div 
                      h6.mb-0 Average Profit Per Day
                      .sale-details 
                        h5.font-primary.mb-0 89.6%
                        span.f-12.f-light.font-medium
                          i(data-feather="arrow-up")
                          | +2.7%
                      p.f-light  An investment or business
                    .radial-chart-wrap 
                      #radial-chart1
              div(class="col-span-3 xl:col-span-6 sm:col-span-12 box-col-3") 
                .card.widget-1
                  .card-body
                    .widget-content
                      .widget-round.secondary
                        .bg-round
                          svg
                            use(href='../assets/svg/icon-sprite.svg#c-revenue') 
                          svg.half-circle.svg-fill
                            use(href='../assets/svg/icon-sprite.svg#halfcircle')
                      div 
                        h4 
                          | $
                          span.counter(data-target='45195') 0
                        span.f-light Revenue
                    div.flex.font-success.font-medium(class="[@media(min-width:1200px)_and_(max-width:1580px)]:!hidden")
                      i.bookmark-search.me-1(data-feather='trending-up')
                      span.txt-success +50% 
              div(class="col-span-3 xl:col-span-6 sm:col-span-12 box-col-3") 
                .card.widget-1
                  .card-body
                    .widget-content
                      .widget-round.success
                        .bg-round
                          svg
                            use(href='../assets/svg/icon-sprite.svg#c-customer') 
                          svg.half-circle.svg-fill
                            use(href='../assets/svg/icon-sprite.svg#halfcircle')
                      div 
                        h4 
                          span.counter(data-target='845') 0
                          | +
                        span.f-light Customers
                    div.flex.font-danger.font-medium(class="[@media(min-width:1200px)_and_(max-width:1580px)]:!hidden")
                      i.bookmark-search.me-1(data-feather='trending-down')
                      span.txt-danger -40%
              div(class="col-span-3 xl:col-span-6 sm:col-span-12 box-col-3") 
                .card.widget-1
                  .card-body 
                    .widget-content
                      .widget-round.warning
                        .bg-round
                          svg
                            use(href='../assets/svg/icon-sprite.svg#c-profit') 
                          svg.half-circle.svg-fill
                            use(href='../assets/svg/icon-sprite.svg#halfcircle')
                      div 
                        h4 
                          span.counter(data-target='80') 0
                          | %
                        span.f-light Profit
                    div.flex.font-danger.font-medium(class="[@media(min-width:1200px)_and_(max-width:1580px)]:!hidden")
                      i.bookmark-search.me-1(data-feather='trending-down')
                      span.txt-danger -20%
              div(class="col-span-3 xl:col-span-6 sm:col-span-12 box-col-3") 
                .card.widget-1
                  .card-body 
                    .widget-content
                      .widget-round.primary
                        .bg-round
                          svg.fill-primary
                            use(href='../assets/svg/icon-sprite.svg#c-invoice') 
                          svg.half-circle.svg-fill
                            use(href='../assets/svg/icon-sprite.svg#halfcircle')
                      div 
                        h4.counter(data-target='10905') 0
                        span.f-light Invoices
                    div.flex.font-success.font-medium(class="[@media(min-width:1200px)_and_(max-width:1580px)]:!hidden")
                      i.bookmark-search.me-1(data-feather='trending-up')
                      span.txt-success +50%
              div(class="col-span-3 xxl:col-span-4 xl:col-span-12 box-col-4")
                .grid.grid-cols-12.card-gap 
                  div(class="col-span-12 xl:col-span-6 sm:col-span-12 box-col-12")
                    .card.course-box.widget-course
                      .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-12 xl:col-span-6 sm:col-span-12 box-col-12")
                    .card.course-box.widget-course 
                      .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='70') 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-4 xxl:col-span-3 xl:col-span-6 md:col-span-12 box-col-3")
                .card.visitor-card
                  .card-header.card-no-border
                    .header-top
                      h5.m-0 Website Traffic
                        span.flex.f-14.font-primary.font-medium.ms-1
                          svg.svg-fill.me-1
                            use(href='../assets/svg/icon-sprite.svg#user-visitor')
                          | (+2.8)
                      .card-header-right-icon
                        .dropdown.icon-dropdown
                          button#visitorButton.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                            i.icon-more-alt
                          .dropdown-menu.dropdown-menu-end(aria-labelledby='visitorButton')
                            a.dropdown-item(href='#') Today
                            a.dropdown-item(href='#') Yesterday
                            a.dropdown-item(href='#') This Week 
                            a.dropdown-item(href='#') This Month
                            a.dropdown-item(href='#') Previous Month
                  .card-body.pt-0
                    .visitors-container
                      #visitor-chart
              div(class="col-span-5 xl:col-span-6 md:col-span-12 box-col-5")
                .card
                  .card-header.card-no-border
                    .header-top 
                      h5 Sessions by Device
                      .card-header-right-icon
                        .dropdown.custom-dropdown
                          button.btn.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                            | Year
                          ul.dropdown-menu
                            li
                              a.dropdown-item(href='#!') Day
                            li
                              a.dropdown-item(href='#!') Month
                            li
                              a.dropdown-item(href='#!') Year
                  .card-body.main-session-devices.pt-0
                    .grid.grid-cols-12.card-gap.justify-center.items-center 
                      div(class="col-span-6 sm:col-span-12")
                        .common-align
                          div
                            .common-space
                              p Desktop
                              span 5,250 / 80%
                            .progress
                              .progress-bar.bg-primary(role='progressbar', style='width: 80%', aria-valuenow='80', aria-valuemin='0', aria-valuemax='100')  
                          div
                            .common-space
                              p Mobile
                              span 260 / 35%
                            .progress
                              .progress-bar.bg-success(role='progressbar', style='width: 35%', aria-valuenow='35', aria-valuemin='0', aria-valuemax='100') 
                          div
                            .common-space
                              p Tablet
                              span 2,158 / 50%
                            .progress
                              .progress-bar.bg-warning(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')   
                      div(class="col-span-6 sm:col-span-12") 
                          #session-chart(class="[@media(min-width:1400px)_and_(max-width:1550px)]:!my-[20px] [@media(min-width:992px)_and_(max-width:1399px)]:!my-[40px]")  
              div(class="col-span-12") 
                .grid.grid-cols-12.card-gap 
                  div(class="col-span-2 s-xxl-3 box-col-4")
                    .card.social-widget.widget-hover
                      .card-body
                        .flex.items-center.justify-between
                          div.flex.items-center.gap-2
                            .social-icons
                              img(src="../assets/images/dashboard-5/social/1.png", alt="facebook icon")
                            span Facebook
                          span.font-success.f-12.d-xxl-block(class="[@media(min-width:1200px)_and_(max-width:1699px)]:!hidden") +22.9%
                        .social-content
                          div 
                            h5.mb-1
                              span.counter(data-target='12098') 0
                            span.f-light Likes
                          .social-chart
                            #radial-facebook
                  div(class="col-span-2 s-xxl-3 box-col-4")
                    .card.social-widget.widget-hover
                      .card-body
                        .flex.items-center.justify-between
                          div.flex.items-center.gap-2
                            .social-icons
                              img(src="../assets/images/dashboard-5/social/2.png", alt="instagram icon")
                            span Instagram
                          span.font-danger.f-12.d-xxl-block(class="[@media(min-width:1200px)_and_(max-width:1699px)]:!hidden") -27.4%
                        .social-content
                          div 
                            h5.mb-1
                              span.counter(data-target='15080') 0
                            span.f-light Followers
                          .social-chart
                            #radial-instagram
                  div(class="col-span-2 s-xxl-3 box-col-4")
                    .card.social-widget.widget-hover
                      .card-body
                        .flex.items-center.justify-between
                          div.flex.items-center.gap-2
                            .social-icons
                              img(src="../assets/images/dashboard-5/social/3.png", alt="twitter icon")
                            span X (Twitter)
                          span.font-success.f-12.d-xxl-block(class="[@media(min-width:1200px)_and_(max-width:1699px)]:!hidden") +76.10%
                        .social-content
                          div 
                            h5.mb-1
                              span.counter(data-target='12564') 0
                            span.f-light Followers
                          .social-chart
                            #radial-twitter
                  div(class="col-span-2 s-xxl-3 box-col-4")
                    .card.social-widget.widget-hover
                      .card-body
                        .flex.items-center.justify-between
                          div.flex.items-center.gap-2
                            .social-icons
                              img(src="../assets/images/dashboard-5/social/4.png", alt="twitter icon")
                            span Youtube
                          span.font-success.f-12.d-xxl-block(class="[@media(min-width:1200px)_and_(max-width:1699px)]:!hidden") +62.08%
                        .social-content
                          div 
                            h5.mb-1
                              span.counter(data-target='14890') 0
                            span.f-light Followers
                          .social-chart
                            #radial-youtube
                  div(class="col-span-2 s-xxl-3 box-col-4")
                    .card.social-widget.widget-hover
                      .card-body
                        .flex.items-center.justify-between
                          div.flex.items-center.gap-2
                            .social-icons
                              img(src="../assets/images/dashboard-5/social/5.png", alt="twitter icon")
                            span LinkedIn
                          span.font-danger.f-12.d-xxl-block(class="[@media(min-width:1200px)_and_(max-width:1699px)]:!hidden") -14.09%
                        .social-content
                          div 
                            h5.mb-1
                              span.counter(data-target='12564') 0
                            span.f-light Followers
                          .social-chart
                            #radial-linkedin
                  div(class="col-span-2 s-xxl-3 box-col-4")
                    .card.social-widget.widget-hover
                      .card-body
                        .flex.items-center.justify-between
                          div.flex.items-center.gap-2
                            .social-icons
                              img(src="../assets/images/dashboard-5/social/6.png", alt="twitter icon")
                            span Pinterest
                          span.font-success.f-12.d-xxl-block(class="[@media(min-width:1200px)_and_(max-width:1699px)]:!hidden") +95.10%
                        .social-content
                          div 
                            h5.mb-1
                              span.counter(data-target='89740') 0
                            span.f-light Followers
                          .social-chart
                            #radial-pinterest
              div(class="col-span-6 xxl:col-span-12 box-col-12") 
                .grid.grid-cols-12.card-gap 
                  //- Deals
                  div(class="col-span-4 md:col-span-6 sm:col-span-12") 
                    .card.compare-order
                      .card-header.card-no-border
                        .header-top  
                          .compare-icon.shadow-primary
                            svg.fill-primary
                              use(href='../assets/svg/icon-sprite.svg#crm-user')
                          .dropdown.icon-dropdown
                            button#dealDropdown1.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                              i.icon-more-alt
                            .dropdown-menu.dropdown-menu-end(aria-labelledby='dealDropdown1')
                              a.dropdown-item(href='#') Today
                              a.dropdown-item(href='#') Yesterday
                              a.dropdown-item(href='#') This week
                      .card-body.pt-0 
                        span.font-medium.c-o-light New Users
                        h4.mb-2 
                          | $
                          span.counter(data-target='7000000') 0
                        .progress(role='progressbar' aria-label='Basic example' aria-valuenow='58' aria-valuemin='0' aria-valuemax='100')
                          .progress-bar.bg-primary(style='width: 58%')
                        span.user-growth.f-12.font-medium
                          i.icon-arrow-down.txt-danger
                          span.txt-danger +4.3%
                        span.user-text last month
                  div(class="col-span-4 md:col-span-6 sm:col-span-12") 
                    .card.compare-order
                      .card-header.card-no-border
                        .header-top  
                          .compare-icon.shadow-success
                            svg.fill-success
                              use(href='../assets/svg/icon-sprite.svg#crm-lead')
                          .dropdown.icon-dropdown
                            button#compareDropdown.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                              i.icon-more-alt
                            .dropdown-menu.dropdown-menu-end(aria-labelledby='compareDropdown')
                              a.dropdown-item(href='#') Today
                              a.dropdown-item(href='#') Yesterday
                              a.dropdown-item(href='#') This week
                      .card-body.pt-0 
                        span.font-medium.c-o-light New Leads
                        h4.mb-2 
                          | $
                          span.counter(data-target='1398700') 0
                        .progress(role='progressbar' aria-label='Basic example' aria-valuenow='58' aria-valuemin='0' aria-valuemax='100')
                          .progress-bar.bg-success(style='width: 58%')
                        span.user-growth.f-12.font-medium
                          i.icon-arrow-up.txt-success
                          span.txt-success +7.9%
                        span.user-text last month
                  div(class="col-span-4 md:col-span-12") 
                    .card.compare-order
                      .card-header.card-no-border
                        .header-top  
                          .compare-icon.shadow-warning
                            svg.fill-warning
                              use(href='../assets/svg/icon-sprite.svg#crm-deal')
                          .dropdown.icon-dropdown
                            button#compareDropdown1.btn.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-expanded='false')
                              i.icon-more-alt
                            .dropdown-menu.dropdown-menu-end(aria-labelledby='compareDropdown1')
                              a.dropdown-item(href='#') Today
                              a.dropdown-item(href='#') Yesterday
                              a.dropdown-item(href='#') This week
                      .card-body.pt-0 
                        span.font-medium.c-o-light Annual Deals
                        h4.mb-2 
                          | $
                          span.counter(data-target='760000') 0
                        .progress(role='progressbar' aria-label='Basic example' aria-valuenow='58' aria-valuemin='0' aria-valuemax='100')
                          .progress-bar.bg-warning(style='width: 58%')
                        span.user-growth.f-12.font-medium
                          i.icon-arrow-up.txt-success
                          span.txt-success +6.7%
                        span.user-text last month
              div(class="col-span-6 xxl:col-span-12 box-col-12")
                .grid.grid-cols-12.card-gap.user-tread-cards
                  div(class="col-span-6 sm:col-span-12") 
                    .card.overflow-hidden.analytics-tread-card
                        .card-header.card-no-border
                            .header-top
                                div
                                    span.c-o-light.mb-1 Total Users
                                    .common-align
                                        h5.mb-1 8630k
                                        span.common-align.gap-1.justify-start
                                            i.txt-success(data-feather="trending-up")
                                            span.txt-success.font-medium +50%
                                div
                                    .analytics-tread.bg-light-primary
                                        svg.fill-primary
                                            use(href='../assets/svg/icon-sprite.svg#analytics-user')
                        .card-body.pt-0 
                            .user-analytics-wrapper
                                #user-analytics
                  div(class="col-span-6 sm:col-span-12")
                      .card.overflow-hidden.analytics-tread-card
                          .card-header.card-no-border
                              .header-top
                                  div
                                      span.c-o-light.mb-1 Page Views
                                      .common-align
                                          h5.mb-1 54390k
                                          span.common-align.gap-1.justify-start
                                              i.txt-danger(data-feather="trending-up")
                                              span.txt-danger.font-medium -20%
                                  div
                                      .analytics-tread.bg-light-secondary
                                          svg.fill-secondary
                                              use(href='../assets/svg/icon-sprite.svg#analytics-view')
                          .card-body.p-0
                              .analytics-view-wrapper
                                  #page-view-chart
              div(class="col-span-6 md:col-span-12 ord-md-i box-col-6")
                    .card.visits-wrapper
                        .card-header.card-no-border
                            .header-top 
                                h5 All Visits
                                .card-header-right-icon
                                    .dropdown.custom-dropdown
                                        button.btn.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                                            | Year
                                        ul.dropdown-menu
                                            li
                                                a.dropdown-item(href='#!') Day
                                            li
                                                a.dropdown-item(href='#!') Month
                                            li
                                                a.dropdown-item(href='#!') Year
                        .card-body.pt-0
                            .common-flex
                                h6 3.2%
                                .flex 
                                    p ( 
                                        span.txt-success.font-medium.me-1 +6.7%
                                        | vs last week)
                            .common-m-chart
                                #visit-chart
              div(class="col-span-6 md:col-span-12 box-col-6")
                .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.pt-0
                    .grid.grid-cols-12.card-gap.m-0.overall-card
                      div(class="col-span-8 xl:col-span-12")                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                        .chart-right
                          .grid.grid-cols-12.card-gap
                            div(class="col-span-12")
                              .card-body.p-0
                                .activity-wrap
                                  #activity-chart  
                      div(class="col-span-4 xl:col-span-12 p-0")
                        .grid.grid-cols-12.gap-3.mt-0
                          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
                                
              
                  
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
