<ng-container *transloco="let t; prefix: 'metadata.coverSearch'">
<div class="cover-search-container">
  <div class="panel-header">
    <div class="header-icon-wrapper">
      <i class="pi {{ coverType === 'audiobook' ? 'pi-headphones' : 'pi-image' }} header-icon"></i>
    </div>
    <div class="header-text">
      <h2 class="panel-title">{{ coverType === 'audiobook' ? t('searchAudiobookCover') : t('searchEbookCover') }}</h2>
      <p class="panel-description">{{ t('description') }}</p>
    </div>
    <p-button
      icon="pi pi-times"
      [rounded]="true"
      [text]="true"
      severity="secondary"
      (click)="dynamicDialogRef.close()"
      class="close-button">
    </p-button>
  </div>

  <div class="dialog-content">
    <!-- Search Form -->
    <div class="search-section">
      <form [formGroup]="searchForm" (ngSubmit)="onSearch()">
        <div class="form-row">
          <div class="form-field title-field">
            <label for="title">
              <i class="pi pi-book"></i>
              {{ t('titleLabel') }}
              <span class="required">*</span>
            </label>
            <input
              pInputText
              id="title"
              formControlName="title"
              [placeholder]="t('titlePlaceholder')"
            />
            @if (searchForm.get('title')?.invalid && searchForm.get('title')?.touched) {
              <small class="error-message">
                <i class="pi pi-exclamation-circle"></i>
                {{ t('titleRequired') }}
              </small>
            }
          </div>

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

          <div class="form-actions">
            <p-button
              type="submit"
              [label]="t('searchBtn')"
              icon="pi pi-search"
              [loading]="loading"
              [disabled]="searchForm.invalid">
            </p-button>
            <p-button
              type="button"
              icon="pi pi-refresh"
              [text]="true"
              [rounded]="true"
              severity="secondary"
              (click)="onClear()"
              [pTooltip]="t('resetSearchTooltip')"
              tooltipPosition="top">
            </p-button>
          </div>
        </div>
      </form>
    </div>

    <!-- Results Area -->
    <div class="results-section">
      @if (!hasSearched) {
        <!-- Initial State -->
        <div class="empty-state">
          <div class="empty-state-icon">
            <i class="pi pi-images"></i>
          </div>
          <h3>{{ t('searchForCovers') }}</h3>
          <p>{{ t('searchForCoversDescription') }}</p>
        </div>
      } @else if (loading) {
        <!-- Loading State -->
        <div class="loading-state">
          <p-progressSpinner strokeWidth="3" animationDuration="1s"></p-progressSpinner>
          <p>{{ t('searchingForCovers') }}</p>
        </div>
      } @else if (coverImages.length === 0) {
        <!-- No Results State -->
        <div class="empty-state no-results">
          <div class="empty-state-icon warning">
            <i class="pi pi-search"></i>
          </div>
          <h3>{{ t('noCoversFound') }}</h3>
          <p>{{ t('noCoversFoundDescription') }}</p>
        </div>
      } @else {
        <!-- Results Grid -->
        <div class="results-header">
          <span class="results-count">
            <i class="pi pi-images"></i>
            {{ coverImages.length === 1 ? t('coversFoundSingular', { count: coverImages.length }) : t('coversFoundPlural', { count: coverImages.length }) }}
          </span>
          <span class="results-hint">
            <i class="pi pi-info-circle"></i>
            {{ t('resultsHint') }}
          </span>
        </div>

        <div class="covers-grid">
          @for (cover of coverImages; track cover.url; let i = $index) {
            <div class="cover-card">
              <div class="cover-image-wrapper">
                <p-image
                  [src]="cover.url"
                  [alt]="t('bookCoverAlt', { index: i + 1 })"
                  appendTo="body"
                  [preview]="true">
                </p-image>
                @if (cover.width && cover.height) {
                  <div class="resolution-badge">
                    {{ cover.width }} x {{ cover.height }}
                  </div>
                }
                <div class="cover-overlay">
                  <p-button
                    (click)="selectAndSave(cover)"
                    [label]="t('selectCover')"
                    icon="pi pi-check"
                    size="small">
                  </p-button>
                </div>
              </div>
            </div>
          }
        </div>
      }
    </div>
  </div>
</div>
</ng-container>
