- 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
                                      | Table Components
                                    ol.breadcrumb
                                      li.breadcrumb-item
                                        a(href='index.html')
                                         | Home
                                      li.breadcrumb-item Tables
                                      li.breadcrumb-item Bootstrap Tables
                                      li.breadcrumb-item.active Table Components
                                .col-sm-6
                                  include ../../components/bookmark
                    // Container-fluid starts                    
                    .container-fluid
                      // Table Row Starts
                      .row
                        .col-sm-12
                          .card
                            .card-header
                              h5 UI Components
                            div
                              .card-block.row
                                .col-sm-12.col-lg-12.col-xl-12
                                  .table-responsive
                                    table.table.table-bordered
                                      tbody
                                        tr
                                          td Button
                                          td.w-50
                                            button.btn.btn-primary Default Button
                                          td
                                            span
                                              | Bootstrap includes six predefined button styles, each serving its own semantic purpose.
                                        tr
                                          td Round Buttons
                                          td
                                            button.btn.btn-pill.btn-primary Default Button
                                          td
                                            span
                                              | Use 
                                              code .btn-pill
                                              |  class to button for Round Buttons.
                                        tr
                                          td Button dropdowns
                                          td
                                            button.btn.btn-primary.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-haspopup='true', aria-expanded='false') Primary
                                            .dropdown-menu
                                              h6.dropdown-header Dropdown header
                                              a.dropdown-item(href='javascript:void(0)') Action
                                              a.dropdown-item(href='javascript:void(0)') Another action
                                              a.dropdown-item(href='javascript:void(0)') Something else here
                                              .dropdown-divider
                                              a.dropdown-item(href='javascript:void(0)') Separated link
                                          td
                                            span
                                              | Use 
                                              code .dropdown-toggle
                                              |  class to button for Dropdown-toggle.
                                        tr
                                          td Basic Button group
                                          td
                                            .btn-group
                                              button.btn.btn-primary Primary
                                              button.btn.btn-secondary Secondary
                                              button.btn.btn-danger Danger
                                              button.btn.btn-warning Warning
                                          td
                                            span
                                              | Use 
                                              code btn-group
                                              |  class to button for 
                                              code div
                                              | .
                                        tr
                                          td Buttons with Icon
                                          td
                                            button.btn.btn-primary
                                              i.fa.fa-info-circle
                                              |  Primary
                                          td
                                            span
                                              | Bootstrap includes six predefined button styles, each serving its own semantic purpose.
                                        tr
                                          td Icon Button
                                          td
                                            button.btn.btn-primary
                                              i.fa.fa-camera
                                          td
                                            span Simple Icon Button
                                        tr
                                          td Loading Buttons
                                          td
                                            button.btn.btn-primary
                                              i.fa.fa-spin.fa-spinner.me-2
                                              | Expand UP
                                          td
                                            span Expand Animation Buttons
                        .col-sm-12
                          .card
                            .card-header
                              h5 Alerts
                            div
                              .card-block.row
                                .col-sm-12.col-lg-12.col-xl-12
                                  .table-responsive
                                    table.table.table-bordered
                                      tbody
                                        tr
                                          td Basic Alert
                                          td.w-50
                                            .alert.alert-primary
                                              p.font-light
                                                strong Success!
                                                |  Indicates a successful or positive action.
                                          td
                                            p
                                              span
                                                | Alerts are available for any length of text, as well as an optional dismiss button. Add 
                                                code  alert alert-primary
                                                | ,
                                                code  alert alert-secondary
                                                | ,
                                                code  alert alert-success
                                                | ,
                                                code  alert alert-info
                                                |  classes for alert with all theme colors.
                                        tr
                                          td Alerts with Links
                                          td
                                            .alert.alert-primary
                                              p.font-light
                                                strong Success!
                                                |  You should 
                                                a.alert-link(href='javascript:void(0)') read this message
                                                | .
                                          td
                                            p
                                              span
                                                | Alerts are available for any length of text, as well as an optional dismiss button. Add 
                                                code  alert alert-primary
                                                | ,
                                                code  alert alert-secondary
                                                | ,
                                                code  alert alert-success
                                                | ,
                                                code  alert alert-info
                                                |  classes for alert with all theme colors.
                                        tr
                                          td Dismissible Alerts
                                          td
                                            .alert.alert-secondary.alert-dismissible.fade.show(role='alert')
                                              p.font-light
                                                strong Holy !
                                                |  You can check in on some of those fields below.
                                              button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
                                          td
                                            span
                                              | Add a dismiss button and the
                                              code  alert alert-dismissable
                                              | class, which adds extra padding to the right of the alert and positions the
                                              code close
                                              | a link On the dismiss button, add the data-bs-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the
                                              code a
                                              | element with it for proper behavior across all devices. To animate alerts when dismissing them, be sure to add the .fade and .in classes.
                                        tr
                                          td Alerts with icons
                                          td
                                            .alert.alert-primary.inverse.alert-dismissible.fade.show(role='alert')
                                              i.icofont.icofont-heart-alt
                                              p
                                                | Good Morning! Start your day with some alerts.
                                              button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')                                               
                                          td
                                            span
                                              | Add a dismiss button and the
                                              code  alert alert-dismissable
                                              | class, which adds extra padding to the right of the alert and positions the
                                              code close
                                              | a link On the dismiss button, add the data-bs-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the
                                              code a
                                              | element with it for proper behavior across all devices. To animate alerts when dismissing them, be sure to add the .fade and .in classes.
                        .col-sm-12
                          .card
                            .card-header
                              h5 Progressbar
                            div
                              .card-block.row
                                .col-sm-12.col-lg-12.col-xl-12
                                  .table-responsive
                                    table.table.table-bordered.checkbox-td-width
                                      tbody
                                        tr
                                          td Default Progress
                                          td.w-50
                                            .progress
                                              .progress-bar.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
                                          td
                                            span
                                              | Uses a progress bar with class
                                              code progress-bar
                                              |  and background color
                                              code bg-primary, bg-secondary
                                              | also change
                                        tr
                                          td Striped Progress 
                                          td
                                            .progress
                                              .progress-bar.progress-bar-striped.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
                                          td
                                            span
                                              | Uses a gradient to create a striped effect class.
                                              code progress-bar-striped
                                        tr
                                          td Progress Sizes
                                          td
                                            .progress.lg-progress-bar
                                              .progress-bar.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
                                          td
                                            span
                                              | Different sized progress. For Default progress, class need
                                              code lg-progress-bar
                                              | on div.
                        // CHECKBOXES Row Starts
                        .col-sm-12
                          .card
                            .card-header
                              h5 Checkbox
                            div
                              .card-block.row
                                .col-sm-12.col-lg-12.col-xl-12
                                  .table-responsive
                                    table.table.table-bordered.checkbox-td-width
                                      tbody
                                        tr
                                          td Basic Checkbox
                                          td.w-50
                                            input#checkbox1(type='checkbox')
                                            label(for='checkbox1') Default
                                          td
                                            span Basic Checkbox
                                        tr
                                          td Default Checkbox Squar
                                          td
                                            .checkbox.m-squar
                                              input#checkbox3(type='checkbox')
                                              label(for='checkbox3') Default
                                          td
                                            span
                                              | Wrap with use 
                                              code .m-squar
                                              |  checkbox.
                                        tr
                                          td Basic Skin Check
                                          td
                                            .checkbox.checkbox-dark
                                              input#checkbox-state-dark(type='checkbox')
                                              label(for='checkbox-state-dark') Brand state
                                          td
                                            span
                                              | Wrap with use
                                              code checkbox-dark
                                              | for this style of checkbox.
                                        tr
                                          td Flat Skin Check
                                          td
                                            .checkbox.checkbox-solid-primary
                                              input#solid6(type='checkbox', checked='')
                                              label(for='solid6') checked
                                          td
                                            span
                                              | Wrap with use
                                              code checkbox-solid-*
                                              | ,
                                              code primary, secondary, success, info, warning, danger
                                              | for this style of checkbox.
                                        tr
                                          td Disable Check
                                          td
                                            .checkbox.checkbox-solid-primary
                                              input#solid2(type='checkbox', disabled='')
                                              label(for='solid2') Disabled
                                          td
                                            span
                                              | Wrap with use
                                              code disabled
                                              | ,
                                              code primary, secondary, success, info, warning, danger
                                              | for this style of checkbox disable.
                                        tr
                                          td Inline  Checkbox
                                          td
                                            .form-group.m-b-0.m-checkbox-inline
                                              .checkbox.checkbox-primary
                                                input#inline-1(type='checkbox')
                                                label(for='inline-1') Option 1
                                              .checkbox.checkbox-secondary
                                                input#inline-2(type='checkbox')
                                                label(for='inline-2') Option 1
                                              .checkbox.checkbox-success
                                                input#inline-3(type='checkbox')
                                                label(for='inline-3') Option 1
                                          td
                                            span
                                              | Wrap with use
                                              code disabled
                                              | ,
                                              code primary, secondary, success, info, warning, danger
                                              | for this style of checkbox disable.
                        // CHECKBOXES Row Ends
                        // Radio Row Starts
                        .col-sm-12
                          .card
                            .card-header
                              h5 Radio Buttons
                            div
                              .card-block.row
                                .col-sm-12.col-lg-12.col-xl-12
                                  .table-responsive
                                    table.table.table-bordered.radio-first-col-width
                                      tbody
                                        tr
                                          td Basic Radio Buttons
                                          td.w-50
                                            input#radio(type='radio')
                                            label(for='radio') Default radio
                                          td
                                            span Basic Radio Buttons
                                        tr
                                          td Default Radio
                                          td
                                            .radio.radio-primary
                                              input#radio1(type='radio', name='radio1', value='option1')
                                              label(for='radio1') Option 1
                                          td
                                            span
                                              | Wrap with use 
                                              code .radio-*
                                              |  and color 
                                              code .radio-*
                                              code primary , secondary , success , info
                                              |  on Radio.
                                        tr
                                          td Checked Radio
                                          td
                                            .radio.radio-primary
                                              input#radio44(type='radio', name='radio1', value='option1', checked='')
                                              label(for='radio44') Checked
                                          td
                                            span
                                              | Wrap with use
                                              code checkbox-dark
                                              | for this style of checkbox.
                                        tr
                                          td Flat Skin Check
                                          td
                                            .radio.radio-primary
                                              input#radio33(type='radio', name='radio1', value='option1', disabled='')
                                              label(for='radio33') Disabled
                                          td
                                            span
                                              | Wrap with use
                                              code checkbox-solid-*
                                              | ,
                                              code primary, secondary, success, info, warning, danger
                                              | for this style of checkbox.
                                        tr
                                          td Inline  Checkbox
                                          td
                                            .form-group.m-b-0.m-checkbox-inline
                                              .radio.radio-primary
                                                input#radioinline1(type='radio', name='radio1', value='option1')
                                                label(for='radioinline1') Option 1
                                              .radio.radio-secondary
                                                input#radioinline2(type='radio', name='radio1', value='option1')
                                                label(for='radioinline2') Option 1
                                              .radio.radio-success
                                                input#radioinline3(type='radio', name='radio1', value='option1')
                                                label(for='radioinline3') Option 1
                                          td
                                            span
                                              | Wrap with use
                                              code disabled
                                              | ,
                                              code primary, secondary, success, info, warning, danger, light, dark
                                              | for this style of checkbox disable.
                        // Radio Row Ends
                        // Select Row Starts
                        .col-sm-12
                          .card
                            .card-header
                              h5 Select 
                            div
                              .card-block.row
                                .col-sm-12.col-lg-12.col-xl-12
                                  .table-responsive
                                    table.table.table-bordered.checkbox-td-width
                                      tbody
                                        tr
                                          td Single Select
                                          td.w-50
                                            select#exampleFormControlSelect45.form-control
                                              option 1
                                              option 2
                                              option 3
                                              option 4
                                              option 5
                                          td
                                            span Use for basic select control.
                                        tr
                                          td Disabled Select Mode
                                          td
                                            select#exampleFormControlSelect4.form-control(disabled='')
                                              option 1
                                              option 2
                                              option 3
                                              option 4
                                              option 5
                                          td
                                            span
                                              | Use for disabled select control add 
                                              code disabled
                                              | .
                                        tr
                                          td Large Select Mode
                                          td
                                            select#exampleFormControlSelect1.form-control.form-control-lg.mb-10
                                              option 1
                                              option 2
                                              option 3
                                              option 4
                                              option 5
                                            select#exampleFormControlSelect3.form-control.form-control-sm.mt-5.mb-10
                                              option 1
                                              option 2
                                              option 3
                                              option 4
                                              option 5
                                          td
                                            span
                                              | Use for large and small select control add class
                                              code form-control-*
                                              code lg, sm
                                              | .
                                        tr
                                          td Example multiple select
                                          td
                                            select#exampleFormControlSelect22.form-control(multiple='')
                                              option 1
                                              option 2
                                              option 3
                                              option 4
                                              option 5
                                          td
                                            span
                                              | Use for multi select control add code 
                                              code multiple
                                              | on select.
                        // Select Row Ends
                        // Input Row Starts
                        .col-sm-12
                          .card
                            .card-header
                              h5 Input
                            div
                              .card-block.row
                                .col-sm-12.col-lg-12.col-xl-12
                                  .table-responsive
                                    table.table.table-bordered.checkbox-td-width
                                      tbody
                                        tr
                                          td Default Input text
                                          td.w-50
                                            input#exampleFormControlInput1.form-control.input-primary(type='email', placeholder='Input text')
                                          td
                                            span Use for basic select control.
                                        tr
                                          td Input Hover Color 
                                          td.w-50
                                            input#exampleFormControlInput2.form-control(type='email', placeholder='Input text')
                                          td
                                            span
                                              | Use for basic input color add class
                                              code input-air-*
                                              code primary, secondary, success, info
                                              | .on input
                        // Input Row Ends
                        // Badges Row Starts
                        .col-sm-12
                          .card
                            .card-header
                              h5 Badges
                            div
                              .card-block.row
                                .col-sm-12.col-lg-12.col-xl-12
                                  .table-responsive
                                    table.table.table-bordered
                                      tbody
                                        tr
                                          td.pills-component Basic Pills
                                          td.w-50
                                            span.badge.badge-primary Primary
                                          td
                                            span
                                              | Use the 
                                              code .badge
                                              |  class, followed by. with badge color use class 
                                              code .badge-*
                                              code primary , secondary , success , info, warning, danger, light
                                              |   class within element to create default pill.
                                        tr
                                          td Label With Icon
                                          td.w-50.m-5
                                            .badge.badge-primary.label-square
                                              i.fa.fa-paperclip.fa-lg.p-r-5
                                              span.f-14 Primary Label
                                          td
                                            span
                                              | Use the 
                                              code label-square
                                              |  class with 
                                              code div
                        // Badges Row Ends
                        // Tooltip  Row Starts
                        .col-sm-12
                          .card
                            .card-header
                              h5 Tooltip Triggers
                            div
                              .card-block.row
                                .col-sm-12.col-lg-12.col-xl-12
                                  .table-responsive
                                    table.table.table-bordered
                                      tbody
                                        tr
                                          td Hover
                                          td.w-50
                                            button.btn.btn-primary(type='button', data-original-title='btn btn-link btn-lg', title='Hover') Primary
                                          td
                                            span Use data-bs-toggle="tooltip" for hover trigger. This is a default trigger
                                        tr
                                          td Link
                                          td.w-50
                                            a.btn.btn-primary(href='javascript:void(0)', data-bs-toggle='tooltip', title='', role='button', data-original-title='Hooray!') Link
                                          td
                                            span
                                              | Use  
                                              code a href="javascript:void(0)"
                                              |  for link trigger. This is a link trigger
                                        tr
                                          td outline button
                                          td.w-50
                                            button.btn.btn-outline-primary(type='button', data-original-title='btn btn-outline-danger-2x', title='') Primary
                                          td
                                            span
                                              | Use  
                                              code btn btn-outline-info
                                              |  for outline trigger. and button bold Border use class
                                              code btn btn-outline-dark-2x
                        // Tooltip Row Ends
                        // Switch Row Starts
                        .col-sm-12
                          .card
                            .card-header
                              h5 SWITCH
                            div
                              .card-block.row
                                .col-sm-12.col-lg-12.col-xl-12
                                  .table-responsive
                                    table.table.table-bordered
                                      tbody
                                        tr
                                          td.pills-component Default Switch
                                          td.w-50
                                            label.switch
                                              input(type='checkbox', checked='')
                                              span.switch-state
                                          td
                                            span
                                              | Use class 
                                              code switch
                                              |  for label.
                                        tr
                                          td Disable Switch
                                          td.w-50
                                            label.switch
                                              input(type='checkbox', disabled='')
                                              span.switch-state
                                          td
                                            span
                                              | this Disable Switch 
                                              code disabled
                                        tr
                                          td Switch Color
                                          td.w-50
                                            .media-body.icon-state
                                              label.switch
                                                input(type='checkbox', checked='')
                                                span.switch-state.bg-primary
                                          td
                                            span
                                              | Use  class 
                                              code bg-*
                                              code Primary , Secondary , Success , Info , Warning , Danger
                                              | in span with icon show switch 
                                              code icon-state
                                              | on div.
                                        tr
                                          td Switch Outline
                                          td.w-50
                                            .media-body.icon-state.switch-outline
                                              label.switch
                                                input(type='checkbox', checked='')
                                                span.switch-state.bg-primary
                                          td
                                            span
                                              | Use  class 
                                              code switch-outline
                                              | on div.
                        // Switch Row Ends
                        // Table Row Ends
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files   
