<template>
  <div
    class="topNav"
    :class="{ topNavBarColor: barColor }"
  >
    <div class="side">
      <font-awesome-icon
        class="menuIcon navIcon"
        :icon="['fas', 'bars']"
        role="button"
        tabindex="0"
        @click="toggleSideNav"
        @keypress="toggleSideNav"
      />
      <font-awesome-icon
        ref="historyArrowBack"
        class="navBackIcon navIcon fa-arrow-left"
        :icon="['fas', 'arrow-left']"
        role="button"
        tabindex="0"
        :title="backwardText"
        @click="historyBack"
        @keypress="historyBack"
      />
      <font-awesome-icon
        ref="historyArrowForward"
        class="navForwardIcon navIcon fa-arrow-right"
        :icon="['fas', 'arrow-right']"
        role="button"
        tabindex="0"
        :title="forwardText"
        @click="historyForward"
        @keypress="historyForward"
      />
      <font-awesome-icon
        v-if="!hideSearchBar"
        class="navSearchIcon navIcon"
        :icon="['fas', 'search']"
        role="button"
        tabindex="0"
        @click="toggleSearchContainer"
        @keypress="toggleSearchContainer"
      />
      <font-awesome-icon
        class="navNewWindowIcon navIcon"
        :icon="['fas', 'clone']"
        :title="newWindowText"
        @click="createNewWindow"
      />
      <div
        class="logo"
        role="link"
        tabindex="0"
        :title="$t('Subscriptions.Subscriptions')"
        @click="navigate('subscriptions')"
        @keydown.space.prevent="navigate('subscriptions')"
        @keydown.enter.prevent="navigate('subscriptions')"
      >
        <div
          class="logoIcon"
        />
        <div
          class="logoText"
        />
      </div>
    </div>
    <div class="middle">
      <div
        v-if="!hideSearchBar"
        v-show="showSearchContainer"
        ref="searchContainer"
        class="searchContainer"
      >
        <ft-input
          ref="searchInput"
          :placeholder="$t('Search / Go to URL')"
          class="searchInput"
          :is-search="true"
          :select-on-focus="true"
          :data-list="searchSuggestionsDataList"
          :spellcheck="false"
          :show-clear-text-button="true"
          @input="getSearchSuggestionsDebounce"
          @click="goToSearch"
        />
        <font-awesome-icon
          class="navFilterIcon navIcon"
          :class="{ filterChanged: searchFilterValueChanged }"
          :icon="['fas', 'filter']"
          role="button"
          tabindex="0"
          @click="showFilters = !showFilters"
          @keypress="showFilters = !showFilters"
        />
      </div>
      <ft-search-filters
        v-if="!hideSearchBar"
        v-show="showFilters"
        class="searchFilters"
        @filterValueUpdated="handleSearchFilterValueChanged"
      />
    </div>
    <ft-profile-selector class="side profiles" />
  </div>
</template>

<script src="./top-nav.js" />
<style scoped lang="sass" src="./top-nav.sass" />