%section.content

.container-fluid
  .block-header
    %h2 DASHBOARD
  / Widgets
  .row.clearfix
    .col-lg-3.col-md-3.col-sm-6.col-xs-12
      .info-box.bg-pink.hover-expand-effect
        .icon
          %i.material-icons playlist_add_check
        .content
          .text NEW TASKS
          .number.count-to{"data-fresh-interval" => "20", "data-from" => "0", "data-speed" => "15", "data-to" => "125"}
    .col-lg-3.col-md-3.col-sm-6.col-xs-12
      .info-box.bg-cyan.hover-expand-effect
        .icon
          %i.material-icons help
        .content
          .text NEW TICKETS
          .number.count-to{"data-fresh-interval" => "20", "data-from" => "0", "data-speed" => "1000", "data-to" => "257"}
    .col-lg-3.col-md-3.col-sm-6.col-xs-12
      .info-box.bg-light-green.hover-expand-effect
        .icon
          %i.material-icons forum
        .content
          .text NEW COMMENTS
          .number.count-to{"data-fresh-interval" => "20", "data-from" => "0", "data-speed" => "1000", "data-to" => "243"}
    .col-lg-3.col-md-3.col-sm-6.col-xs-12
      .info-box.bg-orange.hover-expand-effect
        .icon
          %i.material-icons person_add
        .content
          .text NEW VISITORS
          .number.count-to{"data-fresh-interval" => "20", "data-from" => "0", "data-speed" => "1000", "data-to" => "1225"}
  / #END# Widgets
  / CPU Usage
  .row.clearfix
    .col-xs-12.col-sm-12.col-md-12.col-lg-12
      .card
        .header
          .row.clearfix
            .col-xs-12.col-sm-6
              %h2 CPU USAGE (%)
            .col-xs-12.col-sm-6.align-right
              .switch.panel-switch-btn
                %span.m-r-10.font-12 REAL TIME
                %label
                  OFF
                  %input#realtime{:checked => "checked", :type => "checkbox"}/
                  = succeed "ON" do
                    %span.lever.switch-col-cyan
          %ul.header-dropdown.m-r--5
            %li.dropdown
              %a.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :href => "javascript:void(0);", :role => "button"}
                %i.material-icons more_vert
              %ul.dropdown-menu.pull-right
                %li
                  %a{:href => "javascript:void(0);"} Action
                %li
                  %a{:href => "javascript:void(0);"} Another action
                %li
                  %a{:href => "javascript:void(0);"} Something else here
        .body
          #real_time_chart.dashboard-flot-chart
  / #END# CPU Usage
  .row.clearfix
    / Visitors
    .col-xs-12.col-sm-12.col-md-4.col-lg-4
      .card
        .body.bg-pink
          .sparkline{"data-fill-color" => "rgba(0, 188, 212, 0)", "data-height" => "92px", "data-highlight-line-color" => "#fff", "data-highlight-spot-color" => "rgb(233, 30, 99)", "data-line-color" => "rgba(255,255,255,0.7)", "data-line-width" => "2", "data-max-spot-color" => "rgb(255,255,255)", "data-min-spot-color" => "rgb(255,255,255)", "data-offset" => "90", "data-spot-color" => "rgb(255,255,255)", "data-spot-radius" => "4", "data-type" => "line", "data-width" => "100%"}
            12,10,9,6,5,6,10,5,7,5,12,13,7,12,11
          %ul.dashboard-stat-list
            %li
              TODAY
              %span.pull-right
                %b 1 200
                %small USERS
            %li
              YESTERDAY
              %span.pull-right
                %b 3 872
                %small USERS
            %li
              LAST WEEK
              %span.pull-right
                %b 26 582
                %small USERS
    / #END# Visitors
    / Latest Social Trends
    .col-xs-12.col-sm-12.col-md-4.col-lg-4
      .card
        .body.bg-cyan
          .m-b--35.font-bold LATEST SOCIAL TRENDS
          %ul.dashboard-stat-list
            %li
              \#socialtrends
              %span.pull-right
                %i.material-icons trending_up
            %li
              \#materialdesign
              %span.pull-right
                %i.material-icons trending_up
            %li #adminbsb
            %li #freeadmintemplate
            %li #bootstraptemplate
            %li
              \#freehtmltemplate
              %span.pull-right
                %i.material-icons trending_up
    / #END# Latest Social Trends
    / Answered Tickets
    .col-xs-12.col-sm-12.col-md-4.col-lg-4
      .card
        .body.bg-teal
          .font-bold.m-b--35 ANSWERED TICKETS
          %ul.dashboard-stat-list
            %li
              TODAY
              %span.pull-right
                %b 12
                %small TICKETS
            %li
              YESTERDAY
              %span.pull-right
                %b 15
                %small TICKETS
            %li
              LAST WEEK
              %span.pull-right
                %b 90
                %small TICKETS
            %li
              LAST MONTH
              %span.pull-right
                %b 342
                %small TICKETS
            %li
              LAST YEAR
              %span.pull-right
                %b 4 225
                %small TICKETS
            %li
              ALL
              %span.pull-right
                %b 8 752
                %small TICKETS
    / #END# Answered Tickets
  .row.clearfix
    / Task Info
    .col-xs-12.col-sm-12.col-md-8.col-lg-8
      .card
        .header
          %h2 TASK INFOS
          %ul.header-dropdown.m-r--5
            %li.dropdown
              %a.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :href => "javascript:void(0);", :role => "button"}
                %i.material-icons more_vert
              %ul.dropdown-menu.pull-right
                %li
                  %a{:href => "javascript:void(0);"} Action
                %li
                  %a{:href => "javascript:void(0);"} Another action
                %li
                  %a{:href => "javascript:void(0);"} Something else here
        .body
          .table-responsive
            %table.table.table-hover.dashboard-task-infos
              %thead
                %tr
                  %th #
                  %th Task
                  %th Status
                  %th Manager
                  %th Progress
              %tbody
                %tr
                  %td 1
                  %td Task A
                  %td
                    %span.label.bg-green Doing
                  %td John Doe
                  %td
                    .progress
                      .progress-bar.bg-green{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "62", :role => "progressbar", :style => "width: 62%"}
                %tr
                  %td 2
                  %td Task B
                  %td
                    %span.label.bg-blue To Do
                  %td John Doe
                  %td
                    .progress
                      .progress-bar.bg-blue{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "40", :role => "progressbar", :style => "width: 40%"}
                %tr
                  %td 3
                  %td Task C
                  %td
                    %span.label.bg-light-blue On Hold
                  %td John Doe
                  %td
                    .progress
                      .progress-bar.bg-light-blue{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "72", :role => "progressbar", :style => "width: 72%"}
                %tr
                  %td 4
                  %td Task D
                  %td
                    %span.label.bg-orange Wait Approvel
                  %td John Doe
                  %td
                    .progress
                      .progress-bar.bg-orange{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "95", :role => "progressbar", :style => "width: 95%"}
                %tr
                  %td 5
                  %td Task E
                  %td
                    %span.label.bg-red Suspended
                  %td John Doe
                  %td
                    .progress
                      .progress-bar.bg-red{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "87", :role => "progressbar", :style => "width: 87%"}
    / #END# Task Info
    / Browser Usage
    .col-xs-12.col-sm-12.col-md-4.col-lg-4
      .card
        .header
          %h2 BROWSER USAGE
          %ul.header-dropdown.m-r--5
            %li.dropdown
              %a.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :href => "javascript:void(0);", :role => "button"}
                %i.material-icons more_vert
              %ul.dropdown-menu.pull-right
                %li
                  %a{:href => "javascript:void(0);"} Action
                %li
                  %a{:href => "javascript:void(0);"} Another action
                %li
                  %a{:href => "javascript:void(0);"} Something else here
        .body
          #donut_chart.dashboard-donut-chart
    / #END# Browser Usage