include Search

mixin LinkLooper(config)
  if config.title
    p.nav-link.text-700.mb-0.fw-bold=config.title
  each page in config.vars
    - var pageName = page.label ? page.label : page.name
    if config.dropdownItem
      a.dropdown-item.link-600.fw-medium(href=page.name !== 'modal' ? `${CWD}${page.path}.html` : `${CWD}${page.path}` data-bs-toggle=page.name ==="modal" ? 'modal' : false)
        +cleanText(pageName)
        if page.badge
          span.badge.rounded-pill.ms-2(class=`badge-subtle-${page.badge.type}`)=page.badge.text

    else
      a.nav-link.py-1.link-600.fw-medium(href=page.name !== 'modal' ? `${CWD}${page.path}.html` : `${CWD}${page.path}` data-bs-toggle=page.name ==="modal" ? 'modal' : false)
        +cleanText(pageName)
        if page.badge
          span.badge.rounded-pill.ms-2(class=`badge-subtle-${page.badge.type}`)=page.badge.text



mixin NewTopNav(vars)
  ul.navbar-nav(data-top-nav-dropdowns)
    each item,index in vars.combo? sitemap.slice(0,5) : sitemap
      li.nav-item.dropdown
        if item.label
          a.nav-link.dropdown-toggle(href='#' role='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false' id=`${item.label}s`)
            +cleanText(item.label)
        .dropdown-menu.dropdown-caret.dropdown-menu-card.border-0.mt-0(aria-labelledby=id=`${item.label}s`)
          case item.label
            when 'dashboard'
              .bg-white.dark__bg-1000.rounded-3.py-2
                +LinkLooper({dropdownItem: true,vars:item.pages[0].pages})
            when 'app'
              - var routesCollection = [];
              -
                item.pages.map((page)=>{
                  if(page.pages){
                    page.pages.map((childrenPage)=>{
                      if(childrenPage.pages){
                        childrenPage.pages.map((grandChild)=>{
                          routesCollection.push(grandChild)
                        })
                      } else {
                        routesCollection.push(childrenPage)
                      }
                    })
                  } else{
                    return routesCollection.push(page)
                  }
                })
              .card.navbar-card-app.shadow-none.dark__bg-1000
                .card-body.scrollbar.max-h-dropdown
                  img(src=`${CWD}assets/img/icons/spot-illustrations/authentication-corner.png`, width="130" alt="").img-dropdown
                  .row
                    .col-6.col-md-4
                      .nav.flex-column
                        +LinkLooper({vars:routesCollection.slice(0,2)})
                        +LinkLooper({vars:routesCollection.slice(26, 27)})
                        +LinkLooper({title:"Social",vars:routesCollection.slice(27,31)})
                        +LinkLooper({title:"Support Desk",vars:routesCollection.slice(31, 37)})
                        
                    .col-6.col-md-4
                      .nav.flex-column
                        +LinkLooper({title:"E-Learning",vars:routesCollection.slice(20,26)})
                        +LinkLooper({title:"Events",vars:routesCollection.slice(5,8)})
                        +LinkLooper({title:"Email",vars:routesCollection.slice(2,5)})
                    .col-6.col-md-4
                      .nav.flex-column
                        +LinkLooper({title:"E-Commerce",vars:routesCollection.slice(8,20)})


            when 'pages'
              - var routesCollection = [];
              -
                item.pages.map((page)=>{
                  if(page.pages){
                    page.pages.map((childrenPage)=>{
                      if(childrenPage.pages){
                        childrenPage.pages.map((grandChild)=>{
                          routesCollection.push(grandChild)
                        })
                      } else {
                        routesCollection.push(childrenPage)
                      }
                    })
                  } else{
                    return routesCollection.push(page)
                  }
                })

              .card.navbar-card-pages.shadow-none.dark__bg-1000
                .card-body.scrollbar.max-h-dropdown
                  img(src=`${CWD}assets/img/icons/spot-illustrations/authentication-corner.png`, width="130" alt="").img-dropdown

                  .row
                    .col-6.col-xxl-3
                      .nav.flex-column
                        +LinkLooper({title:"Simple Auth",vars:routesCollection.slice(2,9)})
                    .col-6.col-xxl-3
                      .nav.flex-column
                        +LinkLooper({title:"Card Auth",vars:routesCollection.slice(9,16)})
                    .col-6.col-xxl-3
                      .nav.flex-column
                        +LinkLooper({title:"Split Auth",vars:routesCollection.slice(16,23)})
                    .col-6.col-xxl-3
                      .nav.flex-column
                        +LinkLooper({title:"Layouts",vars:routesCollection.slice(37,41)}) 
                        +LinkLooper({title:"Others",vars:routesCollection.slice(0,2)})

                  .row
                    .col-6.col-xxl-3
                      .nav.flex-column
                        +LinkLooper({title:"User",vars:routesCollection.slice(25,27)})

                    .col-6.col-xxl-3
                      .nav.flex-column
                        +LinkLooper({title:"Pricing",vars:routesCollection.slice(27,29)})

                    .col-6.col-xxl-3
                      .nav.flex-column
                        +LinkLooper({title:"Errors",vars:routesCollection.slice(32,34)})

                  .row
                    .col-6.col-xxl-3
                      .nav.flex-column
                        +LinkLooper({title:"Miscellaneous",vars:routesCollection.slice(34,37)}) 
                    .col-6.col-xxl-3
                      .nav.flex-column
                        +LinkLooper({title:"FAQ",vars:routesCollection.slice(29,32)})
                    .col-6.col-xxl-3
                      .nav.flex-column
                        +LinkLooper({title:"Other Auth",vars:routesCollection.slice(23,25)})

            when 'modules'
              - var routesCollection = [];
              -
                item.pages.map((page)=>{
                  if(page.pages){
                    page.pages.map((childrenPage)=>{
                      if(childrenPage.pages){
                        childrenPage.pages.map((grandChild)=>{
                          routesCollection.push(grandChild)
                        })
                      } else {
                        routesCollection.push(childrenPage)
                      }
                    })
                  } else{
                    return routesCollection.push(page)
                  }
                })
              .card.navbar-card-components.shadow-none.dark__bg-1000
                .card-body.scrollbar.max-h-dropdown

                  img(src=`${CWD}assets/img/icons/spot-illustrations/authentication-corner.png`, width="130" alt="").img-dropdown

                  .row
                    .col-6.col-xxl-3
                      .nav.flex-column
                        +LinkLooper({title:"Components",vars:routesCollection.slice(38,50)})
                    .col-6.col-xxl-3
                      .nav.flex-column.mt-md-4.pt-md-1
                        +LinkLooper({vars:routesCollection.slice(50,62)})
                    .col-6.col-xxl-3
                      .nav.flex-column.mt-xxl-4.pt-xxl-1
                        +LinkLooper({vars:routesCollection.slice(62,74)})
                    .col-6.col-xxl-3
                      .nav.flex-column.mt-xxl-4.pt-xxl-1
                        +LinkLooper({vars:routesCollection.slice(74,86)})

                  .row
                    .col-6.col-xxl-3
                      .nav.flex-column
                        +LinkLooper({title:"Utilities",vars:routesCollection.slice(86,108)})
                    .col-6.col-xxl-3
                      .nav.flex-column
                        +LinkLooper({title:"Tables",vars:routesCollection.slice(17,20)})
                        +LinkLooper({title:"Charts",vars:routesCollection.slice(20,22)})
                        +LinkLooper({title:"ECharts",vars:routesCollection.slice(22,32)})
                    .col-6.col-xxl-3
                      .nav.flex-column
                        +LinkLooper({title:"Forms",vars:routesCollection.slice(0,17)})
                    .col-6.col-xxl-3
                      .nav.flex-column.pt-xxl-1
                        +LinkLooper({title:"Icons",vars:routesCollection.slice(32,36)})
                        +LinkLooper({title:"Maps",vars:routesCollection.slice(36,38)})

            when 'documentation'
              - var routesCollection = [];
              -
                item.pages.map((page)=>{
                  if(page.pages){
                    page.pages.map((childrenPage)=>{
                      if(childrenPage.pages){
                        childrenPage.pages.map((grandChild)=>{
                          routesCollection.push(grandChild)
                        })
                      } else {
                        routesCollection.push(childrenPage)
                      }
                    })
                  } else{
                    return routesCollection.push(page)
                  }
                })
              .bg-white.dark__bg-1000.rounded-3.py-2
                +LinkLooper({dropdownItem: true, vars:routesCollection})

            default
              p You have #{friends} friends

mixin NavbarSearch
  ul.navbar-nav.align-items-center.d-none.d-lg-block
    li.nav-item
      +Search('Search...')

mixin NavbarBrand(config)
  - var config = Object.assign({ image: true }, config)
  a(href=`${CWD}${paths['default-dashboard']}`).navbar-brand&attributes(attributes)
    if config.image
      .d-flex.align-items-center(class=config.wrapperClass)
        +Logo('falcon')
    else
      span(class=`${config.color}`) #{name}

mixin NavbarToggleIcon(config)
  = '\n'
  button.btn.navbar-toggler-humburger-icon&attributes(attributes)
    span.navbar-toggle-icon
      span.toggle-line
  = '\n'

mixin NavbarIcons
  ul.navbar-nav.navbar-nav-icons.ms-auto.flex-row.align-items-center
    li.nav-item.ps-2.pe-0
      .dropdown.theme-control-dropdown
        a.nav-link.d-flex.align-items-center.dropdown-toggle.fa-icon-wait.fs-9.pe-1.py-0(href="#" role="button" id="themeSwitchDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false")
          span.fas.fa-sun.fs-7(data-fa-transform="shrink-2" data-theme-dropdown-toggle-icon="light")
          span.fas.fa-moon.fs-7(data-fa-transform="shrink-3" data-theme-dropdown-toggle-icon="dark")
          span.fas.fa-adjust.fs-7(data-fa-transform="shrink-2" data-theme-dropdown-toggle-icon="auto")
        .dropdown-menu.dropdown-menu-end.dropdown-caret.border.py-0.mt-3(aria-labelledby="themeSwitchDropdown")
          .bg-white.dark__bg-1000.rounded-2.py-2
            button(type="button" value='light' data-theme-control="theme").dropdown-item.d-flex.align-items-center.gap-2
              span.fas.fa-sun
              | Light
              span.fas.fa-check.dropdown-check-icon.ms-auto.text-600
            button(type="button" value='dark' data-theme-control="theme").dropdown-item.d-flex.align-items-center.gap-2
              span.fas.fa-moon(data-fa-transform="")
              | Dark
              span.fas.fa-check.dropdown-check-icon.ms-auto.text-600
            button(type="button" value='auto' data-theme-control="theme").dropdown-item.d-flex.align-items-center.gap-2
              span.fas.fa-adjust(data-fa-transform="")
              | Auto
              span.fas.fa-check.dropdown-check-icon.ms-auto.text-600

    li.nav-item.d-none.d-sm-block
      = '\n'
      a.nav-link.px-0.notification-indicator.notification-indicator-warning.notification-indicator-fill.fa-icon-wait(href=`${CWD}${paths['shopping-cart']}`)
        span.fas.fa-shopping-cart(data-fa-transform='shrink-7' style="font-size: 33px;")
        span.notification-indicator-number 1
      = '\n'
    li.nav-item.dropdown
      = '\n'
      a#navbarDropdownNotification.nav-link.notification-indicator.notification-indicator-primary.px-0.fa-icon-wait(role='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false' data-hide-on-body-scroll)
        span.fas.fa-bell(data-fa-transform='shrink-6' style="font-size: 33px;")

      .dropdown-menu.dropdown-caret.dropdown-caret.dropdown-menu-end.dropdown-menu-card.dropdown-menu-notification.dropdown-caret-bg(aria-labelledby='navbarDropdownNotification')
        +CardNotification
      = '\n'

    li.nav-item.dropdown.px-1
      = '\n'
      a#navbarDropdownMenu.nav-link.fa-icon-wait.nine-dots.p-1(role='button' data-hide-on-body-scroll data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false')
        svg(xmlns='http://www.w3.org/2000/svg' width='16' height='43' viewBox='0 0 16 16' fill='none')
          circle(cx='2' cy='2' r='2' fill='#6C6E71')
          circle(cx='2' cy='8' r='2' fill='#6C6E71')
          circle(cx='2' cy='14' r='2' fill='#6C6E71')
          circle(cx='8' cy='8' r='2' fill='#6C6E71')
          circle(cx='8' cy='14' r='2' fill='#6C6E71')
          circle(cx='14' cy='8' r='2' fill='#6C6E71')
          circle(cx='14' cy='14' r='2' fill='#6C6E71')
          circle(cx='8' cy='2' r='2' fill='#6C6E71')
          circle(cx='14' cy='2' r='2' fill='#6C6E71')

      .dropdown-menu.dropdown-caret.dropdown-caret.dropdown-menu-end.dropdown-menu-card.dropdown-caret-bg(aria-labelledby='navbarDropdownMenu'  )
        +NineDotsMenu
      = '\n' 


    li.nav-item.dropdown
      a#navbarDropdownUser.nav-link.pe-0.ps-2(role='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false')
        +Avatar({img: 'team/3-thumb.png', size: 'xl', status: '', round: 'circle'})
      .dropdown-menu.dropdown-caret.dropdown-caret.dropdown-menu-end.py-0(aria-labelledby='navbarDropdownUser')
        +CardUserPreferences