<template>
  <div v-show="searchResults.length" class="search-number"><div id="findResultsCount" class="toolbarLabel"></div><div>{{ $t('leftPanel.page') }}</div></div>
  <div class="search-container">
    <template v-if="searchResults.length" v-for="(result, currentIndex) in searchResults" :key="result">
      <SearchItem :searchResults="searchResults" :result="result" :currentIndex="currentIndex" />
    </template>
    <div v-else class="no-annotations">{{ $t('leftPanel.noResults') }}</div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useDocumentStore } from '@/stores/modules/document'

const useDocument = useDocumentStore()

const searchResults = computed(() => useDocument.getSearchResults)
</script>

<style lang="scss">
  .search-number {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 16px;
    color: var(--c-side-text);
    background-color: var(--c-findbar-page-number-bg);
  }
  .search-container {
    position: relative;
    height: calc(100% - 95px);
    overflow: auto;
    .no-annotations {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 50%);
      color: var(--c-side-text);
      text-align: center;
      font-weight: 700;
      font-size: 14px;
      line-height: 16px;
    }
  }
</style>
