// Bookmark Start
.bookmark.pull-right
  ul
    li
      a(href='#' data-container='body', data-bs-toggle='popover', data-placement='top', title='', data-original-title='Chat')
        i(data-feather='message-square')
    li
      a(href='#' data-container='body', data-bs-toggle='popover', data-placement='top', title='', data-original-title='Icons')
        i(data-feather='command')
    li
      a(href='#' data-container='body', data-bs-toggle='popover', data-placement='top', title='', data-original-title='Learning')
        i(data-feather='layers')
    li
      a(href='#')
        i.bookmark-search(data-feather='star')
      form(action='#', method='get').form-inline.search-form
        .form-group.form-control-search
          .Typeahead.Typeahead--twitterUsers
            .u-posRelative
              input.demo-input.Typeahead-input.form-control-plaintext.w-full(type='text' placeholder='Search..' name='q' title='')
              .spinner-border.Typeahead-spinner(role='status')
                span.sr-only Loading...
            .Typeahead-menu
            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>
// Bookmark Ends
