- var page_Title = 'Tree View';
- var sortable              = true;
- var sortable1             = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
- var prism                 = true;
- var clipboard             = true;
- var customcard            = true;
- var scrollbar             = true;
- var height_equal          = true;

doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Tree View
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item  Bonus Ui
                    li.breadcrumb-item.active Tree View
          // Container-fluid starts
          .container.tree-view
            .grid.grid-cols-12.card-gap
              div(class="col-span-6 lg:col-span-12")
                .card
                  .card-header
                    h5 Stackable Sortable Lists
                    p.f-m-light.mt-1 
                      | It is also usually advised to make sure that the swapThreshold option is less than the default value of 1 or that the invertswap option is set to true.
                      | You may use 
                      code icons, SVGs, photos ... etc.
                      |   according to your needs.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.stackable-list
                    #nested-demo.list-group.col.nested-sortable
                      .list-group-item.nested-1
                        i.fa-solid.fa-folder-open
                        | Item 1.1
                        .list-group.nested-sortable
                          .list-group-item.nested-2
                            i.fa-solid.fa-folder-open
                            | Item 2.1
                          .list-group-item.nested-2
                            i.fa-solid.fa-folder-open
                            | Item 2.2
                            .list-group.nested-sortable
                              .list-group-item.nested-3
                                i.fa-solid.fa-folder-open
                                | Item 3.1
                              .list-group-item.nested-3
                                i.fa-solid.fa-folder-open
                                | Item 3.2
                              .list-group-item.nested-3
                                i.fa-solid.fa-folder-open
                                | Item 3.3
                          .list-group-item.nested-2
                            i.fa-solid.fa-folder-open
                            | Item 2.3
                      .list-group-item.nested-1
                        i.fa-solid.fa-folder-open
                        | Item 1.2
                      .list-group-item.nested-1
                        i.fa-solid.fa-folder-open
                        | Item 1.3
                        .list-group.nested-sortable
                          .list-group-item.nested-2
                            i.fa-solid.fa-folder-open
                            | Item 2.1
                          .list-group-item.nested-2
                            i.fa-solid.fa-folder-open
                            | Item 2.2
                          .list-group-item.nested-2
                            i.fa-solid.fa-folder-open
                            | Item 2.3
                      .list-group-item.nested-1
                        i.fa-solid.fa-folder-open
                        | Item 1.4
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#stakable-sort-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#stakable-sort-copy
                          |&lt;div class="card-body stackable-list"&gt;
                          |  &lt;div class="list-group col nested-sortable" id="nested-demo"&gt;
                          |    &lt;div class="list-group-item nested-1"&gt;&lt;i class="fa fa-folder-open"&gt;&lt;/i&gt;Item 1.1
                          |      &lt;div class="list-group nested-sortable"&gt;
                          |        &lt;div class="list-group-item nested-2"&gt;&lt;i class="fa fa-folder-open"&gt;&lt;/i&gt;Item 2.1&lt;/div&gt;
                          |        &lt;div class="list-group-item nested-2"&gt;&lt;i class="fa fa-folder-open"&gt;&lt;/i&gt;Item 2.2
                          |          &lt;div class="list-group nested-sortable"&gt;
                          |            &lt;div class="list-group-item nested-3"&gt;&lt;i class="fa fa-folder-open"&gt;&lt;/i&gt;Item 3.1&lt;/div&gt;
                          |            &lt;div class="list-group-item nested-3"&gt;&lt;i class="fa fa-folder-open"&gt;&lt;/i&gt;Item 3.2&lt;/div&gt;
                          |            &lt;div class="list-group-item nested-3"&gt;&lt;i class="fa fa-folder-open"&gt;&lt;/i&gt;Item 3.3&lt;/div&gt;
                          |          &lt;/div&gt;
                          |        &lt;/div&gt;
                          |        &lt;div class="list-group-item nested-2"&gt;&lt;i class="fa fa-folder-open"&gt;&lt;/i&gt;Item 2.3&lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="list-group-item nested-1"&gt;&lt;i class="fa fa-folder-open"&gt;&lt;/i&gt;Item 1.2&lt;/div&gt;
                          |    &lt;div class="list-group-item nested-1"&gt;&lt;i class="fa fa-folder-open"&gt;&lt;/i&gt;Item 1.3
                          |      &lt;div class="list-group nested-sortable"&gt;
                          |        &lt;div class="list-group-item nested-2"&gt;&lt;i class="fa fa-folder-open"&gt;&lt;/i&gt;Item 2.1&lt;/div&gt;
                          |        &lt;div class="list-group-item nested-2"&gt;&lt;i class="fa fa-folder-open"&gt;&lt;/i&gt;Item 2.2&lt;/div&gt;
                          |        &lt;div class="list-group-item nested-2"&gt;&lt;i class="fa fa-folder-open"&gt;&lt;/i&gt;Item 2.3&lt;/div&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="list-group-item nested-1"&gt;&lt;i class="fa fa-folder-open"&gt;&lt;/i&gt;Item 1.4&lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 lg:col-span-12")
                .card
                  .card-header
                    h5 Sortable Swap Lists
                    p.f-m-light.mt-1 
                      | Sortable's functionality is altered by the swap plugin so that objects can be exchanged with one another instead of being sorted.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.swap-wrapper
                    ul#sortable-swap.list-group
                      li.list-group-item.nested-1
                        img(src="../assets/images/tree/s1.png", alt="#")
                        |  Assets
                        ul.list-group
                          li.list-group-item.nested-2
                            img(src="../assets/images/tree/picture.png", alt="#")
                            | Images
                            ul.list-group 
                              li.list-group-item.nested-3
                                img(src="../assets/images/tree/social.png", alt="#")
                                | Social.png
                      li.list-group-item.nested-1
                        img(src="../assets/images/tree/js.png", alt="#")
                        | JS
                        ul.list-group 
                          li.list-group-item.nested-2 
                            img(src="../assets/images/tree/chart.png", alt="#")
                            | Chart
                            ul.list-group 
                              li.list-group-item.nested-3
                                img(src="../assets/images/tree/chart1.png", alt="#")
                                | E-chart 
                                ul.list-group 
                                  li.list-group-item.nested-4 
                                    img(src="../assets/images/tree/chart1.png", alt="#")
                                    | esl.js     
                      li.list-group-item.nested-1
                        img(src="../assets/images/tree/volume.png", alt="#")
                        | Audio
                      li.list-group-item.nested-1
                        img(src="../assets/images/tree/css.png", alt="#")
                        | CSS
                        ul.list-group 
                          li.list-group-item.nested-2
                            img(src="../assets/images/tree/slick.png", alt="#")
                            | Vendors
                            ul.list-group 
                              li.list-group-item.nested-3
                                img(src="../assets/images/tree/emoji.png", alt="#")
                                | Emoji
                              li.list-group-item.nested-3
                                img(src="../assets/images/tree/slick.png", alt="#")
                                | Slick
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#sortable-swap-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#sortable-swap-copy
                          |&lt;div class="card-body swap-wrapper"&gt;
                          |  &lt;ul class="list-group" id="sortable-swap"&gt;
                          |    &lt;li class="list-group-item nested-1"&gt;&lt;img src="../assets/images/tree/s1.png" alt="#"&gt; Assets
                          |      &lt;ul class="list-group"&gt;
                          |        &lt;li class="list-group-item nested-2"&gt;&lt;img src="../assets/images/tree/picture.png" alt="#"&gt;Images
                          |          &lt;ul class="list-group"&gt; 
                          |            &lt;li class="list-group-item nested-3"&gt;&lt;img src="../assets/images/tree/social.png" alt="#"&gt;Social.png&lt;/li&gt;
                          |          &lt;/ul&gt;
                          |        &lt;/li&gt;
                          |      &lt;/ul&gt;
                          |    &lt;/li&gt;
                          |    &lt;li class="list-group-item nested-1"&gt;&lt;img src="../assets/images/tree/js.png" alt="#"&gt;JS
                          |      &lt;ul class="list-group"&gt; 
                          |        &lt;li class="list-group-item nested-2"&gt; &lt;img src="../assets/images/tree/chart.png" alt="#"&gt;Chart
                          |          &lt;ul class="list-group"&gt; 
                          |            &lt;li class="list-group-item nested-3"&gt;&lt;img src="../assets/images/tree/chart1.png" alt="#"&gt;E-chart 
                          |              &lt;ul class="list-group"&gt; 
                          |                &lt;li class="list-group-item nested-4"&gt; &lt;img src="../assets/images/tree/chart1.png" alt="#"&gt;esl.js     &lt;/li&gt;
                          |              &lt;/ul&gt;
                          |            &lt;/li&gt;
                          |          &lt;/ul&gt;
                          |        &lt;/li&gt;
                          |      &lt;/ul&gt;
                          |    &lt;/li&gt;
                          |    &lt;li class="list-group-item nested-1"&gt;&lt;img src="../assets/images/tree/volume.png" alt="#"&gt;Audio&lt;/li&gt;
                          |    &lt;li class="list-group-item nested-1"&gt;&lt;img src="../assets/images/tree/css.png" alt="#"&gt;CSS
                          |      &lt;ul class="list-group"&gt; 
                          |        &lt;li class="list-group-item nested-2"&gt;&lt;img src="../assets/images/tree/slick.png" alt="#"&gt;Vendors
                          |          &lt;ul class="list-group"&gt; 
                          |            &lt;li class="list-group-item nested-3"&gt;&lt;img src="../assets/images/tree/emoji.png" alt="#"&gt;Emoji&lt;/li&gt;
                          |            &lt;li class="list-group-item nested-3"&gt;&lt;img src="../assets/images/tree/slick.png" alt="#"&gt;Slick&lt;/li&gt;
                          |          &lt;/ul&gt;
                          |        &lt;/li&gt;
                          |      &lt;/ul&gt;
                          |    &lt;/li&gt;
                          |  &lt;/ul&gt;
                          |&lt;/div&gt;
              div(class="col-span-4 lg:col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Simple Lists
                    p.f-m-light.mt-1 
                      | To change the basic draggable option, simply drag and drop using the 
                      code "basic-list"
                      |  id.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body 
                    ul#basic-list.list-group
                      li.list-group-item 
                        | Section 1
                      li.list-group-item
                        | Section 2
                      li.list-group-item
                        | Section 3
                      li.list-group-item
                        | Section 4
                      li.list-group-item
                        | Section 5
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#simple-sort-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#simple-sort-copy
                          |&lt;ul class="list-group" id="basic-list"&gt;
                          |  &lt;li class="list-group-item"&gt;Section 1&lt;/li&gt;
                          |  &lt;li class="list-group-item"&gt;Section 2&lt;/li&gt;
                          |  &lt;li class="list-group-item"&gt;Section 3&lt;/li&gt;
                          |  &lt;li class="list-group-item"&gt;Section 4&lt;/li&gt;
                          |  &lt;li class="list-group-item"&gt;Section 5&lt;/li&gt;
                          |&lt;/ul&gt;
              div(class="col-span-4 lg:col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Shared Lists
                    p.f-m-light.mt-1 
                      | Toggle between lists by dragging. you can drag an item to share it, and the shared item will remain in the original list.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body 
                    .grid.grid-cols-12.gap-3 
                      div(class="col-span-6") 
                        ul#mix-left.list-group
                          li.list-group-item 
                            i.fa.sitemap.me-2
                            span Item 1
                          li.list-group-item
                            i.fa.sitemap.me-2
                            span Item 2
                          li.list-group-item
                            i.fa.sitemap.me-2
                            span Item 3
                          li.list-group-item
                            i.fa.sitemap.me-2
                            span Item 4
                          li.list-group-item
                            i.fa.sitemap.me-2
                            span Item 5
                      div(class="col-span-6")
                        ul#mix-right.list-group
                          li.list-group-item.light-background 
                            i.fa.sitemap.me-2
                            span Item 6
                          li.list-group-item.light-background
                            i.fa.sitemap.me-2
                            span Item 7 
                          li.list-group-item.light-background
                            i.fa.sitemap.me-2
                            span Item 8
                          li.list-group-item.light-background
                            i.fa.sitemap.me-2
                            span Item 9
                          li.list-group-item.light-background
                            i.fa.sitemap.me-2
                            span Item 10
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#shared-sort-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#shared-sort-copy
                          |&lt;div class="grid grid-cols-12"&gt; 
                          |  &lt;div class="col-span-6"&gt; 
                          |    &lt;ul class="list-group" id="mix-left"&gt;
                          |      &lt;li class="list-group-item"&gt; &lt;i class="fa sitemap me-2"&gt;&lt;/i&gt;&lt;span&gt;Item 1&lt;/span&gt;&lt;/li&gt;
                          |      &lt;li class="list-group-item"&gt;&lt;i class="fa sitemap me-2"&gt;&lt;/i&gt;&lt;span&gt;Item 2&lt;/span&gt;&lt;/li&gt;
                          |      &lt;li class="list-group-item"&gt;&lt;i class="fa sitemap me-2"&gt;&lt;/i&gt;&lt;span&gt;Item 3&lt;/span&gt;&lt;/li&gt;
                          |      &lt;li class="list-group-item"&gt;&lt;i class="fa sitemap me-2"&gt;&lt;/i&gt;&lt;span&gt;Item 4&lt;/span&gt;&lt;/li&gt;
                          |      &lt;li class="list-group-item"&gt;&lt;i class="fa sitemap me-2"&gt;&lt;/i&gt;&lt;span&gt;Item 5&lt;/span&gt;&lt;/li&gt;
                          |    &lt;/ul&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-span-6"&gt;
                          |    &lt;ul class="list-group" id="mix-right"&gt;
                          |      &lt;li class="list-group-item light-background"&gt; &lt;i class="fa sitemap me-2"&gt;&lt;/i&gt;&lt;span&gt;Item 6&lt;/span&gt;&lt;/li&gt;
                          |      &lt;li class="list-group-item light-background"&gt;&lt;i class="fa sitemap me-2"&gt;&lt;/i&gt;&lt;span&gt;Item 7 &lt;/span&gt;&lt;/li&gt;
                          |      &lt;li class="list-group-item light-background"&gt;&lt;i class="fa sitemap me-2"&gt;&lt;/i&gt;&lt;span&gt;Item 8&lt;/span&gt;&lt;/li&gt;
                          |      &lt;li class="list-group-item light-background"&gt;&lt;i class="fa sitemap me-2"&gt;&lt;/i&gt;&lt;span&gt;Item 9&lt;/span&gt;&lt;/li&gt;
                          |      &lt;li class="list-group-item light-background"&gt;&lt;i class="fa sitemap me-2"&gt;&lt;/i&gt;&lt;span&gt;Item 10&lt;/span&gt;&lt;/li&gt;
                          |    &lt;/ul&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt; 
              div(class="col-span-4 lg:col-span-12")
                .card
                  .card-header
                    h5 Disabled Lists
                    p.f-m-light.mt-1 
                      | Keep the list sorted by leaving it that way. It isn't feasible since the sort option is set to false.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body 
                    ul#disable-list.list-group
                      li.list-group-item 
                        | Online course
                      li.list-group-item
                        | Crypto 
                      li.list-group-item
                        | Social
                      li.list-group-item
                        | Chart
                      li.list-group-item
                        | General
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#disable-sort-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#disable-sort-copy
                          |&lt;ul class="list-group" id="disable-list"&gt;
                          |  &lt;li class="list-group-item"&gt;Online course&lt;/li&gt;
                          |  &lt;li class="list-group-item"&gt;Crypto &lt;/li&gt;
                          |  &lt;li class="list-group-item"&gt;Social&lt;/li&gt;
                          |  &lt;li class="list-group-item"&gt;Chart&lt;/li&gt;
                          |  &lt;li class="list-group-item"&gt;General&lt;/li&gt;
                          |&lt;/ul&gt; 
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Sortable using the Handle List
                    p.f-m-light.mt-1 
                      | Simply click the handler and drag and drop to alter the handle draggable option.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.sortable-handler
                    ul#sortable-handle.list-group
                      li.list-group-item.light-background
                        i.fa-solid.fa-arrows-up-down-left-right.handle
                        | Home 
                      li.list-group-item
                        i.fa-solid.fa-arrows-up-down-left-right.handle
                        | Products
                      li.list-group-item.light-background
                        i.fa-solid.fa-arrows-up-down-left-right.handle
                        | About Us
                      li.list-group-item
                        i.fa-solid.fa-arrows-up-down-left-right.handle
                        | Contact Us
                      li.list-group-item.light-background
                        i.fa-solid.fa-arrows-up-down-left-right.handle
                        | Applications
                      li.list-group-item
                        i.fa-solid.fa-arrows-up-down-left-right.handle
                        | Frameworks
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#handle-sort-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#handle-sort-copy
                          |&lt;ul class="list-group" id="sortable-handle"&gt;
                          |  &lt;li class="list-group-item light-background"&gt;&lt;i class="fa fa-arrows handle"&gt;&lt;/i&gt;Home&lt;/li&gt;
                          |  &lt;li class="list-group-item"&gt;&lt;i class="fa fa-arrows handle"&gt;&lt;/i&gt;Products&lt;/li&gt;
                          |  &lt;li class="list-group-item light-background"&gt;&lt;i class="fa fa-arrows handle"&gt;&lt;/i&gt;About Us&lt;/li&gt;
                          |  &lt;li class="list-group-item"&gt;&lt;i class="fa fa-arrows handle"&gt;&lt;/i&gt;Contact Us&lt;/li&gt;
                          |  &lt;li class="list-group-item light-background"&gt;&lt;i class="fa fa-arrows handle"&gt;&lt;/i&gt;Applications&lt;/li&gt;
                          |  &lt;li class="list-group-item"&gt;&lt;i class="fa fa-arrows handle"&gt;&lt;/i&gt;Frameworks&lt;/li&gt;
                          |&lt;/ul&gt;
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Draggable Filtering
                    p.f-m-light.mt-1 
                      | Try dragging the object with the
                      code .list-light-* 
                      |  backdrop. That item is filtered out by the filter option, so it is not possible to accomplish that.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.draggable-filter
                    ul#draggable-filter.list-group
                      li.list-group-item.flex.items-center 
                        img.rounded-full(src='../assets/images/user/1.jpg', alt='user')
                        | Teresa J. Mosteller
                      li.list-group-item.flex.items-center
                        img.rounded-full(src='../assets/images/user/3.png', alt='user')
                        | Gloria D. Acheson
                      li.list-group-item.flex.items-center.filtered.list-light-primary
                        img.rounded-full(src='../assets/images/user/10.jpg', alt='user')
                        | Sharon C. Obrien
                      li.list-group-item.flex.items-center
                        img.rounded-full(src='../assets/images/user/5.jpg', alt='user')
                        | Bryan A. Owens
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#draggable-sort-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#draggable-sort-copy
                          |&lt;ul class="list-group" id="draggable-filter"&gt;
                          |  &lt;li class="list-group-item"&gt;
                          |    &lt;img class="rounded-full" src="../assets/images/user/1.jpg" alt="user"&gt;Teresa J. Mosteller
                          |  &lt;/li&gt;
                          |  &lt;li class="list-group-item"&gt;
                          |    &lt;img class="rounded-full" src="../assets/images/user/3.png" alt="user"&gt;Gloria D. Acheson
                          |  &lt;/li&gt;
                          |  &lt;li class="list-group-item filtered list-light-primary"&gt;
                          |    &lt;img class="rounded-full" src="../assets/images/user/10.jpg" alt="user"&gt;Sharon C. Obrien
                          |  &lt;/li&gt;
                          |  &lt;li class="list-group-item"&gt;
                          |    &lt;img class="rounded-full" src="../assets/images/user/5.jpg" alt="user"&gt;Bryan A. Owens
                          |  &lt;/li&gt;
                          |&lt;/ul&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Random Sortable
                    p.f-m-light.mt-1 
                      | Use
                      code  sortable-grids
                      |  id, you can drag and drop the grid.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body 
                    #sortable-grids.grid-box-wrapper(class="[@media(max-width:1500px)]:justify-start [@media(max-width:992px)]:justify-center")
                      .grid-box
                        img(src="../assets/images/social-app/post-1.png", alt="#")
                      .grid-box
                        img(src="../assets/images/social-app/post-2.png", alt="#")
                      .grid-box   
                        img(src="../assets/images/social-app/post-3.png", alt="#")
                      .grid-box
                        img(src="../assets/images/social-app/post-4.png", alt="#")
                      .grid-box
                        img(src="../assets/images/social-app/post-5.png", alt="#")
                      .grid-box
                        img(src="../assets/images/social-app/post-6.png", alt="#")
                      .grid-box
                        img(src="../assets/images/social-app/post-7.png", alt="#")
                      .grid-box
                        img(src="../assets/images/social-app/post-8.png", alt="#")
                      .grid-box
                        img(src="../assets/images/social-app/post-9.png", alt="#")
                      .grid-box
                        img(src="../assets/images/social-app/post-10.png", alt="#")
                      .grid-box
                        img(src="../assets/images/social-app/post-11.png", alt="#")
                      .grid-box
                        img(src="../assets/images/social-app/post-12.png", alt="#")
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#random-sort-copy', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#random-sort-copy
                          |&lt;div class="grid-box-wrapper" id="sortable-grids"&gt;
                          |  &lt;div class="grid-box"&gt;&lt;img src="../assets/images/social-app/post-1.png" alt="#"&gt;&lt;/div&gt;
                          |  &lt;div class="grid-box"&gt;&lt;img src="../assets/images/social-app/post-2.png" alt="#"&gt;&lt;/div&gt;
                          |  &lt;div class="grid-box"&gt;&lt;img src="../assets/images/social-app/post-3.png" alt="#"&gt;&lt;/div&gt;
                          |  &lt;div class="grid-box"&gt;&lt;img src="../assets/images/social-app/post-4.png" alt="#"&gt;&lt;/div&gt;
                          |  &lt;div class="grid-box"&gt;&lt;img src="../assets/images/social-app/post-5.png" alt="#"&gt;&lt;/div&gt;
                          |  &lt;div class="grid-box"&gt;&lt;img src="../assets/images/social-app/post-6.png" alt="#"&gt;&lt;/div&gt;
                          |  &lt;div class="grid-box"&gt;&lt;img src="../assets/images/social-app/post-7.png" alt="#"&gt;&lt;/div&gt;
                          |  &lt;div class="grid-box"&gt;&lt;img src="../assets/images/social-app/post-8.png" alt="#"&gt;&lt;/div&gt;
                          |  &lt;div class="grid-box"&gt;&lt;img src="../assets/images/social-app/post-9.png" alt="#"&gt;&lt;/div&gt;
                          |  &lt;div class="grid-box"&gt;&lt;img src="../assets/images/social-app/post-1.png" alt="#"&gt;&lt;/div&gt;
                          |  &lt;div class="grid-box"&gt;&lt;img src="../assets/images/social-app/post-2.png" alt="#"&gt;&lt;/div&gt;
                          |  &lt;div class="grid-box"&gt;&lt;img src="../assets/images/social-app/post-3.png" alt="#"&gt;&lt;/div&gt;
                          |&lt;/div&gt; 
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
