%section.content-header
  %h1
    Dashboard
    %small Control panel
  %ol.breadcrumb
    %li
      %a{:href => "#"}
        %i.fa.fa-dashboard
        Home
    %li.active Dashboard
/ Main content
%section.content
  / Small boxes (Stat box)
  .row
    .col-lg-3.col-xs-6
      / small box
      .small-box.bg-aqua
        .inner
          %h3 150
          %p New Orders
        .icon
          %i.ion.ion-bag
        %a.small-box-footer{:href => "#"}
          More info
          %i.fa.fa-arrow-circle-right
    / ./col
    .col-lg-3.col-xs-6
      / small box
      .small-box.bg-green
        .inner
          %h3
            53
            %sup{:style => "font-size: 20px"} %
          %p Bounce Rate
        .icon
          %i.ion.ion-stats-bars
        %a.small-box-footer{:href => "#"}
          More info
          %i.fa.fa-arrow-circle-right
    / ./col
    .col-lg-3.col-xs-6
      / small box
      .small-box.bg-yellow
        .inner
          %h3 44
          %p User Registrations
        .icon
          %i.ion.ion-person-add
        %a.small-box-footer{:href => "#"}
          More info
          %i.fa.fa-arrow-circle-right
    / ./col
    .col-lg-3.col-xs-6
      / small box
      .small-box.bg-red
        .inner
          %h3 65
          %p Unique Visitors
        .icon
          %i.ion.ion-pie-graph
        %a.small-box-footer{:href => "#"}
          More info
          %i.fa.fa-arrow-circle-right
    / ./col
  / /.row
  / Main row
  .row
    / Left col
    %section.col-lg-7.connectedSortable
      / Custom tabs (Charts with tabs)
      .nav-tabs-custom
        / Tabs within a box
        %ul.nav.nav-tabs.pull-right
          %li.active
            %a{"data-toggle" => "tab", :href => "#revenue-chart"} Area
          %li
            %a{"data-toggle" => "tab", :href => "#sales-chart"} Donut
          %li.pull-left.header
            %i.fa.fa-inbox
            Sales
        .tab-content.no-padding
          / Morris chart - Sales
          #revenue-chart.chart.tab-pane.active{:style => "position: relative; height: 300px;"}
          #sales-chart.chart.tab-pane{:style => "position: relative; height: 300px;"}
      / /.nav-tabs-custom
      / Chat box
      .box.box-success
        .box-header
          %i.fa.fa-comments-o
          %h3.box-title Chat
          .box-tools.pull-right{"data-toggle" => "tooltip", :title => "Status"}
            .btn-group{"data-toggle" => "btn-toggle"}
              %button.btn.btn-default.btn-sm.active{:type => "button"}
                %i.fa.fa-square.text-green
              %button.btn.btn-default.btn-sm{:type => "button"}
                %i.fa.fa-square.text-red
        #chat-box.box-body.chat
          / chat item
          .item
            %img.online{:alt => "user image", :src => asset_url("dist/img/user4-128x128.jpg")}/
            %p.message
              %a.name{:href => "#"}
                %small.text-muted.pull-right
                  %i.fa.fa-clock-o
                  2:15
                Mike Doe
              I would like to meet you to discuss the latest news about
              the arrival of the new theme. They say it is going to be one the
              best themes on the market
            .attachment
              %h4 Attachments:
              %p.filename
                Theme-thumbnail-image.jpg
              .pull-right
                %button.btn.btn-primary.btn-sm.btn-flat{:type => "button"} Open
            / /.attachment
          / /.item
          / chat item
          .item
            %img.offline{:alt => "user image", :src => asset_url("dist/img/user3-128x128.jpg")}/
            %p.message
              %a.name{:href => "#"}
                %small.text-muted.pull-right
                  %i.fa.fa-clock-o
                  5:15
                Alexander Pierce
              I would like to meet you to discuss the latest news about
              the arrival of the new theme. They say it is going to be one the
              best themes on the market
          / /.item
          / chat item
          .item
            %img.offline{:alt => "user image", :src => asset_url("dist/img/user2-160x160.jpg")}/
            %p.message
              %a.name{:href => "#"}
                %small.text-muted.pull-right
                  %i.fa.fa-clock-o
                  5:30
                Susan Doe
              I would like to meet you to discuss the latest news about
              the arrival of the new theme. They say it is going to be one the
              best themes on the market
          / /.item
        / /.chat
        .box-footer
          .input-group
            %input.form-control{:placeholder => "Type message..."}/
            .input-group-btn
              %button.btn.btn-success{:type => "button"}
                %i.fa.fa-plus
      / /.box (chat box)
      / TO DO List
      .box.box-primary
        .box-header
          %i.ion.ion-clipboard
          %h3.box-title To Do List
          .box-tools.pull-right
            %ul.pagination.pagination-sm.inline
              %li
                %a{:href => "#"} «
              %li
                %a{:href => "#"} 1
              %li
                %a{:href => "#"} 2
              %li
                %a{:href => "#"} 3
              %li
                %a{:href => "#"} »
        / /.box-header
        .box-body
          / See dist/js/pages/dashboard.js to activate the todoList plugin
          %ul.todo-list
            %li
              / drag handle
              %span.handle
                %i.fa.fa-ellipsis-v
                %i.fa.fa-ellipsis-v
              / checkbox
              %input{:type => "checkbox", :value => ""}/
              / todo text
              %span.text Design a nice theme
              / Emphasis label
              %small.label.label-danger
                %i.fa.fa-clock-o
                2 mins
              / General tools such as edit or delete
              .tools
                %i.fa.fa-edit
                %i.fa.fa-trash-o
            %li
              %span.handle
                %i.fa.fa-ellipsis-v
                %i.fa.fa-ellipsis-v
              %input{:type => "checkbox", :value => ""}/
              %span.text Make the theme responsive
              %small.label.label-info
                %i.fa.fa-clock-o
                4 hours
              .tools
                %i.fa.fa-edit
                %i.fa.fa-trash-o
            %li
              %span.handle
                %i.fa.fa-ellipsis-v
                %i.fa.fa-ellipsis-v
              %input{:type => "checkbox", :value => ""}/
              %span.text Let theme shine like a star
              %small.label.label-warning
                %i.fa.fa-clock-o
                1 day
              .tools
                %i.fa.fa-edit
                %i.fa.fa-trash-o
            %li
              %span.handle
                %i.fa.fa-ellipsis-v
                %i.fa.fa-ellipsis-v
              %input{:type => "checkbox", :value => ""}/
              %span.text Let theme shine like a star
              %small.label.label-success
                %i.fa.fa-clock-o
                3 days
              .tools
                %i.fa.fa-edit
                %i.fa.fa-trash-o
            %li
              %span.handle
                %i.fa.fa-ellipsis-v
                %i.fa.fa-ellipsis-v
              %input{:type => "checkbox", :value => ""}/
              %span.text Check your messages and notifications
              %small.label.label-primary
                %i.fa.fa-clock-o
                1 week
              .tools
                %i.fa.fa-edit
                %i.fa.fa-trash-o
            %li
              %span.handle
                %i.fa.fa-ellipsis-v
                %i.fa.fa-ellipsis-v
              %input{:type => "checkbox", :value => ""}/
              %span.text Let theme shine like a star
              %small.label.label-default
                %i.fa.fa-clock-o
                1 month
              .tools
                %i.fa.fa-edit
                %i.fa.fa-trash-o
        / /.box-body
        .box-footer.clearfix.no-border
          %button.btn.btn-default.pull-right{:type => "button"}
            %i.fa.fa-plus
            Add item
      / /.box
      / quick email widget
      .box.box-info
        .box-header
          %i.fa.fa-envelope
          %h3.box-title Quick Email
          / tools box
          .pull-right.box-tools
            %button.btn.btn-info.btn-sm{"data-toggle" => "tooltip", "data-widget" => "remove", :title => "Remove", :type => "button"}
              %i.fa.fa-times
          / /. tools
        .box-body
          %form{:action => "#", :method => "post"}
            .form-group
              %input.form-control{:name => "emailto", :placeholder => "Email to:", :type => "email"}/
            .form-group
              %input.form-control{:name => "subject", :placeholder => "Subject", :type => "text"}/
            %div
              %textarea.textarea{:placeholder => "Message", :style => "width: 100%; height: 125px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"}
        .box-footer.clearfix
          %button#sendEmail.pull-right.btn.btn-default{:type => "button"}
            Send
            %i.fa.fa-arrow-circle-right
    / /.Left col
    / right col (We are only adding the ID to make the widgets sortable)
    %section.col-lg-5.connectedSortable
      / Map box
      .box.box-solid.bg-light-blue-gradient
        .box-header
          / tools box
          .pull-right.box-tools
            %button.btn.btn-primary.btn-sm.daterange.pull-right{"data-toggle" => "tooltip", :title => "Date range", :type => "button"}
              %i.fa.fa-calendar
            %button.btn.btn-primary.btn-sm.pull-right{"data-toggle" => "tooltip", "data-widget" => "collapse", :style => "margin-right: 5px;", :title => "Collapse", :type => "button"}
              %i.fa.fa-minus
          / /. tools
          %i.fa.fa-map-marker
          %h3.box-title
            Visitors
        .box-body
          #world-map{:style => "height: 250px; width: 100%;"}
        / /.box-body
        .box-footer.no-border
          .row
            .col-xs-4.text-center{:style => "border-right: 1px solid #f4f4f4"}
              #sparkline-1
              .knob-label Visitors
            / ./col
            .col-xs-4.text-center{:style => "border-right: 1px solid #f4f4f4"}
              #sparkline-2
              .knob-label Online
            / ./col
            .col-xs-4.text-center
              #sparkline-3
              .knob-label Exists
            / ./col
          / /.row
      / /.box
      / solid sales graph
      .box.box-solid.bg-teal-gradient
        .box-header
          %i.fa.fa-th
          %h3.box-title Sales Graph
          .box-tools.pull-right
            %button.btn.bg-teal.btn-sm{"data-widget" => "collapse", :type => "button"}
              %i.fa.fa-minus
            %button.btn.bg-teal.btn-sm{"data-widget" => "remove", :type => "button"}
              %i.fa.fa-times
        .box-body.border-radius-none
          #line-chart.chart{:style => "height: 250px;"}
        / /.box-body
        .box-footer.no-border
          .row
            .col-xs-4.text-center{:style => "border-right: 1px solid #f4f4f4"}
              %input.knob{"data-fgcolor" => "#39CCCC", "data-height" => "60", "data-readonly" => "true", "data-width" => "60", :type => "text", :value => "20"}/
              .knob-label Mail-Orders
            / ./col
            .col-xs-4.text-center{:style => "border-right: 1px solid #f4f4f4"}
              %input.knob{"data-fgcolor" => "#39CCCC", "data-height" => "60", "data-readonly" => "true", "data-width" => "60", :type => "text", :value => "50"}/
              .knob-label Online
            / ./col
            .col-xs-4.text-center
              %input.knob{"data-fgcolor" => "#39CCCC", "data-height" => "60", "data-readonly" => "true", "data-width" => "60", :type => "text", :value => "30"}/
              .knob-label In-Store
            / ./col
          / /.row
        / /.box-footer
      / /.box
      / Calendar
      .box.box-solid.bg-green-gradient
        .box-header
          %i.fa.fa-calendar
          %h3.box-title Calendar
          / tools box
          .pull-right.box-tools
            / button with a dropdown
            .btn-group
              %button.btn.btn-success.btn-sm.dropdown-toggle{"data-toggle" => "dropdown", :type => "button"}
                %i.fa.fa-bars
              %ul.dropdown-menu.pull-right{:role => "menu"}
                %li
                  %a{:href => "#"} Add new event
                %li
                  %a{:href => "#"} Clear events
                %li.divider
                %li
                  %a{:href => "#"} View calendar
            %button.btn.btn-success.btn-sm{"data-widget" => "collapse", :type => "button"}
              %i.fa.fa-minus
            %button.btn.btn-success.btn-sm{"data-widget" => "remove", :type => "button"}
              %i.fa.fa-times
          / /. tools
        / /.box-header
        .box-body.no-padding
          / The calendar
          #calendar{:style => "width: 100%"}
        / /.box-body
        .box-footer.text-black
          .row
            .col-sm-6
              / Progress bars
              .clearfix
                %span.pull-left Task #1
                %small.pull-right 90%
              .progress.xs
                .progress-bar.progress-bar-green{:style => "width: 90%;"}
              .clearfix
                %span.pull-left Task #2
                %small.pull-right 70%
              .progress.xs
                .progress-bar.progress-bar-green{:style => "width: 70%;"}
            / /.col
            .col-sm-6
              .clearfix
                %span.pull-left Task #3
                %small.pull-right 60%
              .progress.xs
                .progress-bar.progress-bar-green{:style => "width: 60%;"}
              .clearfix
                %span.pull-left Task #4
                %small.pull-right 40%
              .progress.xs
                .progress-bar.progress-bar-green{:style => "width: 40%;"}
:javascript
      $(function () {
        "use strict";

        // AREA CHART
        var area = new Morris.Area({
          element: 'revenue-chart',
          resize: true,
          data: [
            {y: '2011 Q1', item1: 2666, item2: 2666},
            {y: '2011 Q2', item1: 2778, item2: 2294},
            {y: '2011 Q3', item1: 4912, item2: 1969},
            {y: '2011 Q4', item1: 3767, item2: 3597},
            {y: '2012 Q1', item1: 6810, item2: 1914},
            {y: '2012 Q2', item1: 5670, item2: 4293},
            {y: '2012 Q3', item1: 4820, item2: 3795},
            {y: '2012 Q4', item1: 15073, item2: 5967},
            {y: '2013 Q1', item1: 10687, item2: 4460},
            {y: '2013 Q2', item1: 8432, item2: 5713}
          ],
          xkey: 'y',
          ykeys: ['item1', 'item2'],
          labels: ['Item 1', 'Item 2'],
          lineColors: ['#a0d0e0', '#3c8dbc'],
          hideHover: 'auto'
        });

        // LINE CHART
        var line = new Morris.Line({
          element: 'line-chart',
          resize: true,
          data: [
            {y: '2011 Q1', item1: 2666},
            {y: '2011 Q2', item1: 2778},
            {y: '2011 Q3', item1: 4912},
            {y: '2011 Q4', item1: 3767},
            {y: '2012 Q1', item1: 6810},
            {y: '2012 Q2', item1: 5670},
            {y: '2012 Q3', item1: 4820},
            {y: '2012 Q4', item1: 15073},
            {y: '2013 Q1', item1: 10687},
            {y: '2013 Q2', item1: 8432}
          ],
          xkey: 'y',
          ykeys: ['item1'],
          labels: ['Item 1'],
          lineColors: ['#3c8dbc'],
          hideHover: 'auto'
        });

        //DONUT CHART
        var donut = new Morris.Donut({
          element: 'sales-chart',
          resize: true,
          colors: ["#3c8dbc", "#f56954", "#00a65a"],
          data: [
            {label: "Download Sales", value: 12},
            {label: "In-Store Sales", value: 30},
            {label: "Mail-Order Sales", value: 20}
          ],
          hideHover: 'auto'
        });

      });