- var theme_customizer      = true;
- var time_picker           = 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
                                      | Time Picker
                                    ol.breadcrumb
                                      li.breadcrumb-item
                                        a(href='index.html')
                                         | Home
                                      li.breadcrumb-item Forms
                                      li.breadcrumb-item Form Widgets
                                      li.breadcrumb-item.active Time Picker
                                .col-sm-6
                                  include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid.time-picker
                      .row
                        .col-md-6
                          .card
                            .card-header.pb-0
                              h5 Default:
                            .card-body
                              form.theme-form
                                div
                                  .input-group.clockpicker
                                    input.form-control(type='text', value='09:30')
                                    span.input-group-addon
                                      span.glyphicon.glyphicon-time
                        .col-md-6
                          .card
                            .card-header.pb-0
                              h5 Align the arrow to top, auto close:
                            .card-body
                              form.theme-form
                                div
                                  .input-group.clockpicker.pull-center(data-placement='left', data-align='top', data-autoclose='true')
                                    input.form-control(type='text', value='13:14')
                                    span.input-group-addon
                                      span.glyphicon.glyphicon-time
                        .col-md-6
                          .card
                            .card-header.pb-0
                              h5 Set options in javascript, instead of data-* :
                            .card-body
                              form.theme-form
                                div
                                  .input-group.clockpicker(data-placement='top', data-align='left', data-donetext='Done')
                                    input.form-control(type='text', value='18:00')
                                    span.input-group-addon
                                      span.glyphicon.glyphicon-time
                        .col-md-6
                          .card
                            .card-header.pb-0
                              h5 Set default value, input without addon:
                            .card-body
                              .clearfix
                                form.theme-form
                                  div
                                    input#single-input.form-control(type='text', value='', placeholder='Addon')
                    // Container-fluid ends                   
                include ../../components/footer
        include ../../components/footer-files