- var theme_customizer      = true;

doctype html
html(lang='en')
    include ../../components/header-files
    body
        include ../../components/loader
        // page-wrapper Start
        #pageWrapper.page-wrapper
            include ../../components/header
            // Page Body Start
            .page-body-wrapper.horizontal-menu
                include ../../components/sidebar
                .page-body
                    .container-fluid
                      .page-header
                        .row
                          .col-sm-6
                              h3
                                | Switch
                              ol.breadcrumb
                                li.breadcrumb-item
                                  a(href='index.html')
                                   | Home
                                li.breadcrumb-item Forms
                                li.breadcrumb-item Form Widgets
                                li.breadcrumb-item.active Switch
                          .col-sm-6
                            include ../../components/bookmark
                    // Container-fluid starts                    
                    .container-fluid
                      .row
                        .col-sm-12.col-xl-6.col-lg-12.col-md-6
                          .card
                            .card-header.pb-0
                              h5 Basic Switch
                            .card-body.row.switch-showcase.height-equal
                              .col-sm-12
                                .media
                                  label.col-form-label.m-r-10 Default Switch
                                  .media-body.text-end
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state
                                .media
                                  label.col-form-label.m-r-10 Unhecked Switch
                                  .media-body.text-end
                                    label.switch
                                      input(type='checkbox')
                                      span.switch-state
                                .media
                                  label.col-form-label.m-r-10 With Icon
                                  .media-body.text-end.icon-state
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state
                                .media
                                  label.col-form-label.m-r-10 Unhecked With Icon
                                  .media-body.text-end.icon-state
                                    label.switch
                                      input(type='checkbox')
                                      span.switch-state
                                .media
                                  label.col-form-label.m-r-10 Disabled State
                                  .media-body.text-end
                                    label.switch
                                      input(type='checkbox', disabled='')
                                      span.switch-state
                                .media
                                  label.col-form-label.m-r-10 Disabled With Icon
                                  .media-body.text-end.icon-state
                                    label.switch
                                      input(type='checkbox', disabled='')
                                      span.switch-state
                        .col-sm-12.col-xl-6.col-lg-12.col-md-6
                          .card
                            .card-header.pb-0
                              h5 Switch Color
                            .card-body.row.switch-showcase.height-equal
                              .col-sm-12
                                .media
                                  label.col-form-label.m-r-10 Primary Color
                                  .media-body.text-end.icon-state
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-primary
                                .media
                                  label.col-form-label.m-r-10 Secondary Color
                                  .media-body.text-end.icon-state
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-secondary
                                .media
                                  label.col-form-label.m-r-10 Success Color
                                  .media-body.text-end.icon-state
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-success
                                .media
                                  label.col-form-label.m-r-10 Info Color
                                  .media-body.text-end.icon-state
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-info
                                .media
                                  label.col-form-label.m-r-10 Warning Color
                                  .media-body.text-end.icon-state
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-warning
                                .media
                                  label.col-form-label.m-r-10 Danger Color
                                  .media-body.text-end.icon-state
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-danger
                        .col-sm-12.col-xl-6.col-lg-12.col-md-6
                          .card
                            .card-header.pb-0
                              h5 Switch Outline
                            .card-body.row.switch-showcase
                              .col-sm-12
                                .media
                                  label.col-form-label.m-r-10
                                    | Primary Color
                                  .media-body.text-end.icon-state.switch-outline
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-primary
                                .media
                                  label.col-form-label.m-r-10
                                    | Secondary Color
                                  .media-body.text-end.icon-state.switch-outline
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-secondary
                                .media
                                  label.col-form-label.m-r-10 Success Color
                                  .media-body.text-end.icon-state.switch-outline
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-success
                                .media
                                  label.col-form-label.m-r-10 Info Color
                                  .media-body.text-end.icon-state.switch-outline
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-info
                                .media
                                  label.col-form-label.m-r-10 Warning Color
                                  .media-body.text-end.icon-state.switch-outline
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-warning
                                .media
                                  label.col-form-label.m-r-10 Danger Color
                                  .media-body.text-end.icon-state.switch-outline
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-danger
                        .col-sm-12.col-xl-6.col-lg-12.col-md-6
                          .card
                            .card-header.pb-0
                              h5 Switch unchecked Outline
                            .card-body.row.switch-showcase
                              .col-sm-12
                                .media
                                  label.col-form-label.m-r-10
                                    | Primary Color
                                  .media-body.text-end.icon-state.switch-outline
                                    label.switch
                                      input(type='checkbox')
                                      span.switch-state.bg-primary
                                .media
                                  label.col-form-label.m-r-10
                                    | Secondary Color
                                  .media-body.text-end.icon-state.switch-outline
                                    label.switch
                                      input(type='checkbox')
                                      span.switch-state.bg-secondary
                                .media
                                  label.col-form-label.m-r-10 Success Color
                                  .media-body.text-end.icon-state.switch-outline
                                    label.switch
                                      input(type='checkbox')
                                      span.switch-state.bg-success
                                .media
                                  label.col-form-label.m-r-10 Info Color
                                  .media-body.text-end.icon-state.switch-outline
                                    label.switch
                                      input(type='checkbox')
                                      span.switch-state.bg-info
                                .media
                                  label.col-form-label.m-r-10 Warning Color
                                  .media-body.text-end.icon-state.switch-outline
                                    label.switch
                                      input(type='checkbox')
                                      span.switch-state.bg-warning
                                .media
                                  label.col-form-label.m-r-10 Danger Color
                                  .media-body.text-end.icon-state.switch-outline
                                    label.switch
                                      input(type='checkbox')
                                      span.switch-state.bg-danger
                        .col-sm-12.col-xl-4
                          .card
                            .card-header.pb-0
                              h5 Switch Sizing
                            .card-body.row.switch-showcase
                              .col-sm-12
                                .media
                                  label.col-form-label.m-r-10 Large Size
                                  .media-body.text-end.switch-lg
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state
                                .media
                                  label.col-form-label.m-r-10 Large Unhecked
                                  .media-body.text-end.switch-lg
                                    label.switch
                                      input(type='checkbox')
                                      span.switch-state
                                .media
                                  label.col-form-label.m-r-10 Normal Size
                                  .media-body.text-end
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state
                                .media
                                  label.col-form-label.m-r-10 Normal Unhecked
                                  .media-body.text-end
                                    label.switch
                                      input(type='checkbox')
                                      span.switch-state
                                .media
                                  label.col-form-label.m-r-10 Small Size
                                  .media-body.text-end.switch-sm
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state
                                .media
                                  label.col-form-label.m-r-10 Small Size Unhecked
                                  .media-body.text-end.switch-sm
                                    label.switch
                                      input(type='checkbox')
                                      span.switch-state
                        .col-sm-12.col-xl-4
                          .card
                            .card-header.pb-0
                              h5 Switch With icon
                            .card-body.row.switch-showcase
                              .col-sm-12
                                .media
                                  label.col-form-label.m-r-10 Large Size
                                  .media-body.text-end.switch-lg.icon-state
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state
                                .media
                                  label.col-form-label.m-r-10 Large Unhecked
                                  .media-body.text-end.switch-lg.icon-state
                                    label.switch
                                      input(type='checkbox')
                                      span.switch-state
                                .media
                                  label.col-form-label.m-r-10 Normal Size
                                  .media-body.text-end.icon-state
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state
                                .media
                                  label.col-form-label.m-r-10 Normal Unhecked
                                  .media-body.text-end.icon-state
                                    label.switch
                                      input(type='checkbox')
                                      span.switch-state
                                .media
                                  label.col-form-label.m-r-10 Small Size
                                  .media-body.text-end.switch-sm.icon-state
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state
                                .media
                                  label.col-form-label.m-r-10 Small Size Unhecked
                                  .media-body.text-end.switch-sm.icon-state
                                    label.switch
                                      input(type='checkbox')
                                      span.switch-state
                        .col-sm-12.col-xl-4
                          .card
                            .card-header.pb-0
                              h5 Switch With color
                            .card-body.row.switch-showcase
                              .col-sm-12
                                .media
                                  label.col-form-label.m-r-10
                                    | Primary Color (Disabled)
                                  .media-body.text-end.switch-lg.icon-state
                                    label.switch
                                      input(type='checkbox', checked='', disabled='')
                                      span.switch-state.bg-primary
                                .media
                                  label.col-form-label.m-r-10
                                    | Secondary Color
                                  .media-body.text-end.switch-lg.icon-state
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-secondary
                                .media
                                  label.col-form-label.m-r-10
                                    | Success Color
                                  .media-body.text-end.icon-state
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-success
                                .media
                                  label.col-form-label.m-r-10
                                    | Info Color
                                  .media-body.text-end.icon-state
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-info
                                .media
                                  label.col-form-label.m-r-10
                                    | Warning Color
                                  .media-body.text-end.switch-sm.icon-state
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-warning
                                .media
                                  label.col-form-label.m-r-10
                                    | Danger Color
                                  .media-body.text-end.switch-sm.icon-state
                                    label.switch
                                      input(type='checkbox', checked='')
                                      span.switch-state.bg-danger
                   
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files