- var prism                 = true;
- var clipboard             = true;
- var customcard            = true;
- var theme_customizer      = true;
- var tooltip               = true;

doctype html
html(lang='en', dir='rtl')
    include ../../components/header-files
    body.rtl
        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
                                      | RTL Layout
                                    ol.breadcrumb
                                      li.breadcrumb-item
                                        a(href='index.html')
                                         | Home
                                      li.breadcrumb-item Page Layout
                                      li.breadcrumb-item.active RTL
                                .col-sm-6
                                    include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                      .row
                        .col-sm-12
                          .card.alert.alert-primary(role='alert')
                            h5 Tip!
                            p Add the dir="rtl" to the html tag to get this layout.
                        .col-sm-12
                          .card
                            .card-header.pb-0.d-flex.justify-content-between.align-items-center
                              h5 How to use it?                             
                              .setting-list
                                ul.list-unstyled.setting-option
                                  li
                                    .setting-primary
                                     i.icon-settings
                                  li
                                    i.view-html.fa.fa-code.font-primary
                                  li
                                    i.icofont.icofont-maximize.full-card.font-primary
                                  li
                                    i.icofont.icofont-minus.minimize-card.font-primary
                                  li
                                    i.icofont.icofont-refresh.reload-card.font-primary
                                  li
                                    i.icofont.icofont-error.close-card.font-primary 
                            .card-body
                              h5 Step 1
                              p On this layout, First of all you have to add the class rtl attribute in body tag
                              h5 Step 2
                              p Contents are change right to left from left to right respectively
                              h5 Step 3
                              p
                                | when you want to change spacing left to right at that right left spacing you have to unset css and apply right spacing in css
                              h5 Step 4
                              p
                                | Sometimes js are not change directly with text-align css,so that time you have to copy js and change the class as rtl="true".
                              .code-box-copy
                                button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
                                  i.icofont.icofont-copy-alt
                                pre
                                  code.language-html#example-head
                                      | <!-- Cod Box Copy begin -->
                                      | <div class="card-body">
                                      | <h5>Step 1</h5>
                                      | <p>On this layout, First of all you have to add the class rtl in body tag</p>
                                      | <h5>Step 2</h5>
                                      | <p>Contents are change right to left from left to right respectively</p>
                                      | <h5>Step 3</h5>
                                      | <p>when you want to change spacing left to right at that right left spacing you have to unset css and apply right spacing in css</p>
                                      | <h5>Step 4</h5>
                                      | <p>Sometimes js are not change directly with text-align css,so that time you have to copy js and change the class as rtl="true".</p>
                                      | </div>
                                      | <!-- Cod Box Copy end -->
                            .card-footer
                              h6.mb-0 Card Footer
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files