<ng-container *transloco="let t; prefix: 'book.searcher'">
<div class="book-searcher-container">
  <p-iconfield class="search-iconfield" [class.focused]="isSearchFocused" [class.has-results]="isDropdownOpen">
    <p-inputicon class="pi pi-search"/>
    <input
      type="text"
      pInputText
      [(ngModel)]="searchQuery"
      (input)="onSearchInputChange()"
      (focus)="isSearchFocused = true"
      (keydown)="onKeydown($event)"
      [placeholder]="t('placeholder')"
      class="search-input"
    />
    @if (searchQuery) {
      <p-button
        icon="pi pi-times"
        (click)="clearSearch()"
        [text]="true"
        [rounded]="true"
        class="clear-search-btn"
        [attr.aria-label]="t('clearSearch')">
      </p-button>
    }
  </p-iconfield>

  @if (books.length > 0 || searchQuery) {
    <div
      class="search-dropdown layout-menu"
      [class.show]="isDropdownOpen"
    >
      @if (isLoading) {
        @for (i of [1,2,3]; track i) {
          <div class="search-skeleton-item">
            <p-skeleton width="50px" height="67px" borderRadius="4px"/>
            <div class="search-skeleton-details">
              <p-skeleton width="80%" height="1rem"/>
              <p-skeleton width="60%" height="0.8rem"/>
            </div>
          </div>
        }
      } @else if (books.length > 0) {
        @for (book of books; track book; let idx = $index) {
          <div class="search-dropdown-item" [class.active]="activeIndex === idx" (click)="onBookClick(book)">
            <div class="search-item-content">
              <img
                [attr.src]="urlHelper.getThumbnailUrl(book.id, book.metadata?.coverUpdatedOn)"
                [alt]="t('bookCoverAlt')"
                class="search-book-cover"
              />
              <div class="search-book-details">
                <div class="search-book-title-container">
                  <p class="search-book-name">
                    {{ book.metadata?.title | slice: 0:70 }}
                  </p>
                </div>
                <div class="search-book-meta-line">
                  @if (book.metadata?.authors?.length ?? 0 > 0) {
                    <p class="search-book-authors">{{ t('byPrefix') }} {{ getAuthorNames(book.metadata?.authors) }}</p>
                  }
                  @if (getPublishedYear(book.metadata?.publishedDate)) {
                    <span class="metadata-badge year-badge">{{ getPublishedYear(book.metadata?.publishedDate) }}</span>
                  }
                </div>
                @if (getSeriesInfo(book.metadata?.seriesName, book.metadata?.seriesNumber)) {
                  <div class="search-book-series metadata-badge series-badge">
                    <i class="pi pi-book"></i>
                    <span>{{ getSeriesInfo(book.metadata?.seriesName, book.metadata?.seriesNumber) }}</span>
                  </div>
                }
              </div>
            </div>
          </div>
        }
      } @else {
        <div class="search-dropdown-item no-results">
          <span>{{ t('noResults') }}</span>
        </div>
      }
    </div>
  }
</div>
</ng-container>
