<div class="header-panel clearfix" data-hm-tap="vm.search.selectedBookmark = null">
  <button class="btn btn-icon btn-settings"
    title="{{ vm.platform.GetConstant(vm.globals.Constants.Button_Settings_Label) }}"
    data-ng-click="vm.view.change(vm.view.views.settings)" tabindex="1002">
    <i class="fas fa-cog" aria-hidden="true"></i>
    <span class="sr-only">{{ vm.platform.GetConstant(vm.globals.Constants.Button_Settings_Label) }}</span>
  </button>
  <button class="btn btn-icon btn-toggle-bookmark" data-ng-if="!vm.utility.IsMobilePlatform(vm.platformName)"
    data-ng-class="{ 'active': vm.bookmark.active }"
    title="{{ vm.bookmark.active ? vm.platform.GetConstant(vm.globals.Constants.Button_EditBookmark_Label) : vm.platform.GetConstant(vm.globals.Constants.Button_AddBookmark_Label) }}"
    data-ng-click="vm.events.searchForm_ToggleBookmark_Click()" tabindex="1001">
    <i class="far fa-bookmark" aria-hidden="true"></i>
    <span class="sr-only" data-ng-if="vm.bookmark.active">{{
      vm.platform.GetConstant(vm.globals.Constants.Button_EditBookmark_Label) }}</span>
    <span class="sr-only" data-ng-if="!vm.bookmark.active">{{
      vm.platform.GetConstant(vm.globals.Constants.Button_AddBookmark_Label) }}</span>
  </button>
  <button class="btn btn-icon" title="{{ vm.search.displayTreeView ? vm.platform.GetConstant(vm.globals.Constants.Button_SearchResults_Label) : 
      vm.platform.GetConstant(vm.globals.Constants.Button_BookmarkTree_Label) }}"
    data-ng-click="vm.events.searchForm_ToggleView_Click()" tabindex="1000">
    <i class="fas fa-list animate-fade-in" data-ng-if="vm.search.displayTreeView" aria-hidden="true"></i>
    <i class="fas fa-stream animate-fade-in" data-ng-if="!vm.search.displayTreeView" aria-hidden="true"></i>
    <span class="sr-only" data-ng-if="vm.search.displayTreeView">
      {{ vm.platform.GetConstant(vm.globals.Constants.Button_SearchResults_Label) }}
    </span>
    <span class="sr-only" data-ng-if="!vm.search.displayTreeView">
      {{ vm.platform.GetConstant(vm.globals.Constants.Button_BookmarkTree_Label) }}
    </span>
  </button>
  <div class="search-form form-group btn-icon-container">
    <input type="text" class="form-control" name="txtSearch" maxlength="200"
      placeholder="{{ vm.platform.GetConstant(vm.globals.Constants.Search_Field_Description) }}"
      data-ng-model="vm.search.query" data-ng-change="vm.events.searchForm_SearchText_Change()"
      data-ng-keydown="vm.events.searchForm_SearchText_KeyDown($event)" data-ng-trim="false" autocapitalize="off"
      autocomplete="off" autocorrect="off" spellcheck="false" tabindex="1" />
    <label for="txtSearch">
      <i class="fas fa-search"></i>
    </label>
    <div class="lookahead-container">
      <span class="measure" data-ng-bind-html="vm.search.queryMeasure"></span>
      <span class="lookahead" data-ng-show="vm.search.lookahead"
        data-ng-click="vm.events.searchForm_SearchText_Autocomplete()">{{
        vm.search.lookahead }}</span>
    </div>
    <button class="btn btn-icon btn-clear" data-ng-show="vm.search.query"
      title="{{ vm.platform.GetConstant(vm.globals.Constants.Button_Clear_Label) }}"
      data-ng-click="vm.events.searchForm_Clear_Click()">
      <i class="fas fa-times" aria-hidden="true"></i>
    </button>
  </div>
</div>
<button class="btn btn-fab fixed" data-ng-if="vm.utility.IsMobilePlatform(vm.platformName)"
  title="{{ vm.platform.GetConstant(vm.globals.Constants.Button_AddBookmark_Label) }}"
  data-ng-click="vm.events.searchForm_AddBookmark_Click()" tabindex="-1">
  <i class="far fa-bookmark" aria-hidden="true"></i>
  <span class="sr-only">{{ vm.platform.GetConstant(vm.globals.Constants.Button_AddBookmark_Label) }}</span>
</button>
<div class="search-results-panel" data-ng-if="!vm.search.displayTreeView" data-ng-show="vm.search.results">
  <h4 data-ng-show="!vm.search.query && vm.search.results.length === 0">
    {{ vm.platform.GetConstant(vm.globals.Constants.Search_NoBookmarks_Message) }}
  </h4>
  <h4 data-ng-show="vm.search.query && vm.search.results.length === 0">
    {{ vm.platform.GetConstant(vm.globals.Constants.Search_NoResults_Message) }}
  </h4>
  <div class="bookmark-list" data-ng-show="vm.search.results.length > 0"
    data-infinite-scroll="vm.events.searchForm_SearchResults_Scroll()"
    data-infinite-scroll-container="'.search-results-panel'">
    <div class="bookmark" data-ng-repeat="result in vm.search.results | limitTo:vm.search.resultsDisplayed"
      data-hm-press="vm.utility.IsMobilePlatform(vm.platformName) && vm.events.searchForm_SelectBookmark_Press($event, result.id)"
      data-ng-keydown="vm.events.searchForm_SearchResult_KeyDown($event)"
      data-ng-class="{ 'animate': vm.search.selectedBookmark === result.id }" tabindex="{{ $index + 1 }}">
      <div class="menu" data-ng-class="{ 'animate animate-fade-in': vm.utility.IsMobilePlatform(vm.platformName) }"
        data-ng-if="vm.utility.IsMobilePlatform(vm.platformName)"
        data-ng-show="vm.search.selectedBookmark === result.id" tabindex="-1">
        <button class="btn btn-fab"
          title="{{ vm.platform.GetConstant(vm.globals.Constants.Button_ShareBookmark_Label) }}"
          data-ng-click="vm.events.searchForm_ShareBookmark_Click($event, result)">
          <i class="fas fa-share-alt" aria-hidden="true"></i>
          <span class="sr-only">{{ vm.platform.GetConstant(vm.globals.Constants.Button_ShareBookmark_Label) }}</span>
        </button>
        <button class="btn btn-fab"
          title="{{ vm.platform.GetConstant(vm.globals.Constants.Button_EditBookmark_Label) }}"
          data-ng-click="vm.events.searchForm_UpdateBookmark_Click($event, result)">
          <i class="fas fa-edit" aria-hidden="true"></i>
          <span class="sr-only">{{ vm.platform.GetConstant(vm.globals.Constants.Button_EditBookmark_Label) }}</span>
        </button>
        <button class="btn btn-fab btn-delete-bookmark"
          title="{{ vm.platform.GetConstant(vm.globals.Constants.Button_DeleteBookmark_Label) }}"
          data-ng-click="vm.events.searchForm_DeleteBookmark_Click($event, result)">
          <i class="fas fa-trash" aria-hidden="true"></i>
          <span class="sr-only">{{ vm.platform.GetConstant(vm.globals.Constants.Button_DeleteBookmark_Label) }}</span>
        </button>
      </div>
      <div class="bookmark-content"
        data-ng-click="!vm.utility.IsMobilePlatform(vm.platformName) && vm.events.openUrl($event, result.url)"
        data-hm-tap="vm.events.openUrl($event, result.url)">
        <h4 class="bookmark-heading">{{ vm.bookmark.getTitleForDisplay(result) }}</h4>
        <div class="bookmark-text">
          <div class="description">{{ result.description }}</div>
          <div class="url">{{ result.url }}</div>
        </div>
      </div>
      <button class="btn btn-icon btn-edit-bookmark"
        title="{{ vm.platform.GetConstant(vm.globals.Constants.Button_EditBookmark_Label) }}"
        data-ng-if="!vm.utility.IsMobilePlatform(vm.platformName)"
        data-ng-click="vm.events.searchForm_UpdateBookmark_Click($event, result)">
        <i class="fas fa-edit" aria-hidden="true"></i>
        <span class="sr-only">{{ vm.platform.GetConstant(vm.globals.Constants.Button_EditBookmark_Label) }}</span>
      </button>
    </div>
  </div>
</div>
<div class="bookmark-tree-panel" data-ng-if="vm.search.displayTreeView">
  <bookmark-tree class="bookmark-list" nodes="vm.search.bookmarkTree" platform-name="vm.platformName"
    selected-bookmark="vm.search.selectedBookmark"
    edit-bookmark="vm.events.searchForm_UpdateBookmark_Click(event, bookmark)"
    select-bookmark="vm.events.searchForm_SelectBookmark_Press(event, bookmarkId)"
    share-bookmark="vm.events.searchForm_ShareBookmark_Click(event, bookmark)"
    delete-bookmark="vm.events.searchForm_DeleteBookmark_Click(event, bookmark)"
    open-url="vm.events.openUrl(event, url)" data-ng-if="vm.search.bookmarkTree">
  </bookmark-tree>
  <h4 data-ng-if="!vm.search.bookmarkTree || vm.search.bookmarkTree.length === 0">
    {{ vm.platform.GetConstant(vm.globals.Constants.Search_NoBookmarks_Message) }}
  </h4>
</div>