// Page Header Start
.page-header
  .header-wrapper.grid.grid-cols-12.m-0
    form(action='#', method='get').form-inline.search-full.col-auto
      .form-group.w-full
        .Typeahead.Typeahead--twitterUsers
          .u-posRelative 
            input.demo-input.Typeahead-input.form-control-plaintext.w-full(type='text' placeholder='Search Anything Here...' name='q' title='' autofocus)
            .spinner-border.Typeahead-spinner(role='status')   
              span.sr-only Loading...
            i(data-feather='x').close-search
          .Typeahead-menu
    .header-logo-wrapper.hidden.col-auto.p-0(class="lg:block")
      .logo-wrapper
        a(href='index.html')
          img.max-w-full.h-auto.for-light(src='../assets/images/logo/logo.png', alt='')
          img.max-w-full.h-auto.for-dark(src='../assets/images/logo/logo_dark.png', alt='')
      .toggle-sidebar
        i.status_toggle.middle(data-feather='align-center').sidebar-toggle

    .left-header(class="col-span-5 xxl:col-span-6 xl:col-span-5 lg:col-span-4 md:col-span-3")
      .notification-slider
        div.h-full(class="!flex items-center") 
          img(src="../assets/images/giftools.gif" alt="gif")
          h6.mb-0.font-normal
            span.font-primary Don't Miss Out!
            span.f-light  Our new update has been released.
          i.icon-arrow-top-right.f-light
        div.h-full(class="!flex items-center") 
          img(src="../assets/images/giftools.gif" alt="gif")
          h6.mb-0.font-normal
            span.f-light Something you love is now on sale!
          a.ms-1(href="https://1.envato.market/3GVzd" target="_blank") Buy now !
          
    .nav-right(class="col-span-7 xxl:col-span-6 xl:col-span-7 md:col-span-11").float-right.right-header.p-0.ms-auto
      ul.nav-menus
        li.language-nav
          .translate_wrapper.relative
            input#lang-toggle(type="checkbox").peer.hidden
            label(for="lang-toggle").current_lang.flex.items-center.cursor-pointer(class="!mb-0")
              span.lang.flex.items-center
                i.flag-icon.flag-icon-us
                span.lang-txt EN
            .more_lang.custom-scrollbar.absolute.top-full.mt-2.bg-white.rounded-md.shadow-md.w-44.z-50.hidden(class="peer-checked:block")
              .lang.selected(data-value='en')
                .flex.items-center(class="cursor-pointer")
                  i.flag-icon.flag-icon-us
                  span.lang-txt.text-sm.flex.flex-col
                    | English
                    span.text-xs.text-gray-500 (US)

              .lang(data-value='de')
                .flex.items-center(class="cursor-pointer")
                  i.flag-icon.flag-icon-de
                  span.lang-txt.text-sm Deutsch

              .lang(data-value='es')
                .flex.items-center(class="cursor-pointer")
                  i.flag-icon.flag-icon-es
                  span.lang-txt.text-sm Español

              .lang(data-value='fr')
                .flex.items-center(class="cursor-pointer")
                  i.flag-icon.flag-icon-fr
                  span.lang-txt.text-sm Français

              .lang(data-value='pt')
                .flex.items-center(class="cursor-pointer")
                  i.flag-icon.flag-icon-pt
                  span.lang-txt.text-sm.flex.flex-col
                    | Português
                    span.text-xs.text-gray-500 (BR)

              .lang(data-value='cn')
                .flex.items-center(class="cursor-pointer")
                  i.flag-icon.flag-icon-cn
                  span.lang-txt.text-sm 简体中文

              .lang(data-value='ae')
                .flex.items-center(class="cursor-pointer")
                  i.flag-icon.flag-icon-ae
                  span.lang-txt.text-sm.flex.flex-col
                    | لعربية
                    span.text-xs.text-gray-500 (ae)

        li.fullscreen-body                        
          span
            svg#maximize-screen
              use(href='../assets/svg/icon-sprite.svg#full-screen')
        li                          
          span.header-search
            svg
              use(href='../assets/svg/icon-sprite.svg#search')
        li.onhover-dropdown
          svg
            use(href='../assets/svg/icon-sprite.svg#star')
          .onhover-show-div.bookmark-flip
            .flip-card
              .flip-card-inner
                .front
                  h6.mb-0.dropdown-title(class="f-[18px]") Bookmark
                  ul.bookmark-dropdown
                    li
                      .grid.grid-cols-12(class="gap-x-3.5")
                        .col-span-4.text-center
                          .bookmark-content
                            .bookmark-icon
                              i(data-feather='file-text')
                            span Forms  
                        .col-span-4.text-center
                          .bookmark-content    
                            .bookmark-icon
                              i(data-feather='user')
                            span Profile
                        .col-span-4.text-center
                          .bookmark-content
                            .bookmark-icon
                              i(data-feather='server')
                            span Tables
                    li.text-center
                      a.flip-btn#flip-btn.btn.btn-primary.w-full.block.text-white.font-bold(href="#!" class="hover:text-white") Add Bookmark 
                .back
                  ul
                    li
                      .bookmark-dropdown.flip-back-content
                        input(type='text' placeholder='Search...')
                    li
                      a.flip-back#flip-back.btn.btn-primary.w-full.block.text-white.font-bold(href="#!" class="hover:text-white")
                        | Back 
        li
          .mode
            svg
              use(href='../assets/svg/icon-sprite.svg#moon')
        li.cart-nav.onhover-dropdown
          .cart-box
            svg
              use(href='../assets/svg/icon-sprite.svg#stroke-ecommerce')
            span.badge.rounded-full.badge-danger.text-white 2 
          .cart-dropdown.onhover-show-div
            h6.mb-0.dropdown-title(class="f-[18px]") Cart
            ul
              li
                .flex.relative
                  img.max-w-full.h-auto.me-3(src='../assets/images/other-images/cart-img.jpg', alt='' class="w-14 rounded-[5px]")
                  .grow
                    span Furniture Chair for Home
                    .qty-box
                      .input-group.flex
                        span.input-group-prepend
                          button.btn.quantity-left-minus(type='button' data-type='minus' data-field='')
                            | -
                        input.form-control.input-number(type='text' name='quantity' value='1')
                        span.input-group-prepend
                          button.btn.quantity-right-plus(type='button' data-type='plus' data-field='')
                            | +

                    h6.font-primary $12.45
                  .close-circle
                    a.bg-danger(href='#')
                      i(data-feather='x')
              li
                .flex.relative
                  img.max-w-full.h-auto.me-3(src='../assets/images/other-images/cart-img1.jpg', alt='' class="w-14 rounded-[5px]")
                  .grow
                    span Rest Well Chair
                    .qty-box
                      .input-group.flex 
                        span.input-group-prepend
                          button.btn.quantity-left-minus(type='button' data-type='minus' data-field='')
                            | -
                        input.form-control.input-number(type='text' name='quantity' value='1')
                        span.input-group-prepend
                          button.btn.quantity-right-plus(type='button' data-type='plus' data-field='')
                            | +

                    h6.font-primary $49.00
                  .close-circle
                    a.bg-danger(href='#')  
                      i(data-feather='x')

              li.total
                h6.mb-0
                  | Order Total : 
                  span.f-right $1000.00
              li.text-center
                a.block.view-cart.font-bold.btn.btn-primary.text-white(href='cart.html' class="hover:text-white")
                  | View Cart
                a.view-checkout.btn.btn-primary.text-white.font-bold(href='checkout.html' class="hover:text-white") 
                  | Checkout
        li.onhover-dropdown  
          .notification-box
            svg
              use(href='../assets/svg/icon-sprite.svg#notification')
            span.badge.rounded-full.badge-success.text-white 4   
          .onhover-show-div.notification-dropdown 
            h6.mb-0.dropdown-title(class="f-[18px]") Notifications
            ul  
              li.border-primary.toast.default-show-toast.items-center.text-light.fade.show(class="!border-l-4 !border-y-0 !border-r-0" aria-live='assertive' aria-atomic='true' data-bs-autohide='false')
                .flex.justify-between.items-center
                  .toast-body.p-3
                    p   
                      | Delivery processing
                  button.btn-close.ml-auto.me-2(type='button' data-bs-dismiss='toast' aria-label='Close')
              li.border-success.toast.default-show-toast.items-center.text-light.fade.show(class="!border-l-4 !border-y-0 !border-r-0" aria-live='assertive' aria-atomic='true' data-bs-autohide='false')
                .flex.justify-between.items-center
                  .toast-body.p-3
                    p 
                      | Order Complete      
                  button.btn-close.ml-auto.me-2(type='button' data-bs-dismiss='toast' aria-label='Close')
              li.border-secondary.toast.default-show-toast.items-center.text-light.fade.show(class="!border-l-4 !border-y-0 !border-r-0" aria-live='assertive' aria-atomic='true' data-bs-autohide='false')
                .flex.justify-between.items-center
                  .toast-body.p-3
                    p
                      | Tickets Generated
                  button.btn-close.ml-auto.me-2(type='button' data-bs-dismiss='toast' aria-label='Close')
              li.border-warning.toast.default-show-toast.items-center.text-light.fade.show(class="!border-l-4 !border-y-0 !border-r-0" aria-live='assertive' aria-atomic='true' data-bs-autohide='false')
                .flex.justify-between.items-center
                  .toast-body.p-3
                    p
                      | Delivery Complete
                  button.btn-close.ml-auto.me-2(type='button' data-bs-dismiss='toast' aria-label='Close')
        li.profile-nav.onhover-dropdown(class="!py-0 !pe-0")
          .flex.profile-media.items-center   
            img(src='../assets/images/dashboard/profile.png', alt='')
            .profile-content
              span Emay Walter
              p.mb-0 Admin 
                i.align-middle.fa-solid.fa-angle-down
          ul.profile-dropdown.onhover-show-div
            li 
              a(href='login.html' class="flex items-center")
                i(data-feather='user')
                span Account 
            li
              a(href='mail-box.html' class="flex items-center")
                i(data-feather='mail')
                span Inbox
            li
              a(href='task.html' class="flex items-center")
                i(data-feather='file-text')
                span Taskboard
            li
              a(href='add-user.html' class="flex items-center")
                i(data-feather='settings')
                span Settings
            li
              a(href='login.html' class="flex items-center")
                i(data-feather='log-in') 
                span Log out
    script.result-template(type='text/x-handlebars-template').
      <div class="ProfileCard u-cf">                        
      <div class="ProfileCard-avatar"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-airplay m-0"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg></div>
      <div class="ProfileCard-details">
      <div class="ProfileCard-realName">{{name}}</div>
      </div>
      </div>
    script.empty-template(type='text/x-handlebars-template').
      <div class="EmptyMessage">Your search turned up 0 results. This most likely means the backend is down, yikes!</div>
// Page Header Ends                              
