@if (selectedFetchedMetadata$ | async; as selectedFetchedMetadata) {
  <div class="metadata-container">
    <app-metadata-picker
      [fetchedMetadata]="selectedFetchedMetadata"
      [book$]="book$"
      [detailLoading]="detailLoading"
      (goBack)="onGoBack()">
    </app-metadata-picker>
  </div>
} @else {
  <div class="searcher-container" *transloco="let t; prefix: 'metadata.searcher'">
    <form [formGroup]="form" (ngSubmit)="onSubmit()" class="search-card">
      <div class="search-grid">
        <div class="search-field search-field-provider">
          <label>
            <i class="pi pi-globe"></i>
            {{ t('providersLabel') }}
          </label>
          <p-multiselect
            [filter]="false"
            showToggleAll="false"
            [options]="providers"
            formControlName="provider"
            [placeholder]="t('selectProviders')"
            class="'custom-multiselect'">
          </p-multiselect>
        </div>

        <div class="search-field">
          <label>
            <i class="pi pi-barcode"></i>
            {{ t('isbnLabel') }}
            <i
              class="pi pi-info-circle"
              [pTooltip]="t('isbnTooltip')"
              tooltipPosition="right"
              style="margin-left: 0.25rem; color: var(--primary-color); cursor: pointer;"
            ></i>
          </label>
          <input
            pInputText
            formControlName="isbn"
            [placeholder]="t('isbnPlaceholder')"
            class="custom-input"/>
        </div>

        <div class="search-field">
          <label>
            <i class="pi pi-book"></i>
            {{ t('titleLabel') }}
          </label>
          <input
            pInputText
            formControlName="title"
            [placeholder]="t('titlePlaceholder')"
            class="custom-input"/>
        </div>

        <div class="search-field">
          <label>
            <i class="pi pi-user"></i>
            {{ t('authorLabel') }}
          </label>
          <input
            pInputText
            formControlName="author"
            [placeholder]="t('authorPlaceholder')"
            class="custom-input"/>
        </div>

        <div class="search-field search-button-field">
          <p-button
            [label]="t('searchBtn')"
            type="submit"
            [disabled]="!isSearchEnabled || loading"
            icon="pi pi-search"
            class="'custom-search-button'">
          </p-button>
        </div>
      </div>
    </form>

    @if (loading || searchTriggered) {
      <div class="provider-status">
        <div class="status-header">
          <div class="results-info">
            <h3>
              <i class="pi pi-list"></i>
              {{ t('searchResults') }}
            </h3>
            <span class="results-count">{{ t('booksFound', { count: filteredMetadata.length }) }}</span>
          </div>
          @if (loading) {
            <span class="fetching-badge">
              <i class="pi pi-spin pi-spinner"></i>
              {{ t('fetching') }}
            </span>
          }
        </div>
        <div class="provider-pills">
          @for (tab of getProviderTabs(); track tab.provider) {
            <div class="provider-pill"
                 [class.has-results]="tab.count > 0"
                 [class.active]="isProviderPillActive(tab.provider)"
                 [class]="'provider-pill provider-' + tab.provider.toLowerCase() + (tab.count > 0 ? ' has-results' : '') + (isProviderPillActive(tab.provider) ? ' active' : '')"
                 (click)="tab.count > 0 && onProviderPillClick(tab.provider, $event)"
                 [style.cursor]="tab.count > 0 ? 'pointer' : 'default'">
              <div class="pill-icon">
                <i class="pi pi-database"></i>
              </div>
              <div class="pill-content">
                <span class="pill-name">{{ tab.provider }}</span>
                @if (isProviderLoading(tab.provider)) {
                  <i class="pi pi-spin pi-spinner pill-spinner"></i>
                } @else {
                  <span class="pill-count">{{ tab.count }}</span>
                }
              </div>
            </div>
          }
        </div>
      </div>
    }

    @if (!searchTriggered && allFetchedMetadata.length === 0) {
      <div class="empty-state">
        <div class="empty-icon">
          <i class="pi pi-search"></i>
        </div>
        <h3>{{ t('readyToSearch') }}</h3>
        <p>{{ t('readyToSearchHint') }}</p>
      </div>
    }

    @if (searchTriggered && allFetchedMetadata.length === 0 && !loading) {
      <div class="empty-state">
        <div class="empty-icon no-results">
          <i class="pi pi-inbox"></i>
        </div>
        <h3>{{ t('noResultsFound') }}</h3>
        <p>{{ t('noResultsHint') }}</p>
      </div>
    }

    @if (allFetchedMetadata.length > 0) {
      <div class="results-section">
        <div class="results-grid">
          @for (metadata of filteredMetadata; track trackByMetadata($index, metadata)) {
            <div class="metadata-card" (click)="onBookClick(metadata)">
              <div class="card-image">
                <img
                  [src]="metadata.thumbnailUrl || 'assets/images/missing-cover.jpg'"
                  [alt]="metadata.title"
                  loading="lazy"/>
                <div class="card-overlay">
                  <i class="pi pi-eye"></i>
                  <span>{{ t('selectOverlay') }}</span>
                </div>
              </div>

              <div class="card-content">
                <div class="card-header">
                  <h4 class="card-title">{{ truncateText(metadata.title!, 60) }}</h4>
                  <div
                    class="card-provider"
                    [class]="'card-provider provider-' + getProviderClass(metadata)"
                    [innerHTML]="buildProviderLink(metadata)"
                    (click)="onProviderClick($event)">
                  </div>
                </div>

                @if (metadata.authors && metadata.authors.length > 0) {
                  <p class="card-authors">
                    <i class="pi pi-user"></i>
                    {{ truncateText(metadata.authors.join(', '), 50) }}
                  </p>
                }

                <div class="card-meta">
                  @if (metadata.isbn13 || metadata.isbn10) {
                    <span class="meta-badge">
                      <i class="pi pi-barcode"></i>
                      {{ metadata.isbn13 || metadata.isbn10 }}
                    </span>
                  }
                  @if (metadata.publishedDate) {
                    <span class="meta-badge">
                      <i class="pi pi-calendar"></i>
                      {{ metadata.publishedDate }}
                    </span>
                  }
                </div>

                @if (metadata.description) {
                  <p class="card-description">
                    {{ truncateText(sanitizeHtml(metadata.description), 350) }}
                  </p>
                }
              </div>
            </div>
          }
        </div>
      </div>
    }
  </div>
}