<ng-container *transloco="let t; prefix: 'authorBrowser.photoSearch'">
  <div class="photo-search-container">
    <div class="search-section">
      <form [formGroup]="searchForm" (ngSubmit)="onSearch()">
        <div class="form-row">
          <div class="form-field">
            <label for="photoQuery">
              <i class="pi pi-user"></i>
              {{ t('queryLabel') }}
            </label>
            <input
              pInputText
              id="photoQuery"
              formControlName="query"
              [placeholder]="t('queryPlaceholder')"/>
          </div>

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

    <div class="results-section">
      @if (!hasSearched) {
        <div class="empty-state">
          <div class="empty-state-icon">
            <i class="pi pi-images"></i>
          </div>
          <h3>{{ t('readyTitle') }}</h3>
          <p>{{ t('readyHint') }}</p>
        </div>
      } @else if (searching) {
        <div class="loading-state">
          <p-progressSpinner strokeWidth="3" animationDuration="1s"></p-progressSpinner>
          <p>{{ t('searching') }}</p>
        </div>
      } @else if (photos.length === 0) {
        <div class="empty-state no-results">
          <div class="empty-state-icon warning">
            <i class="pi pi-search"></i>
          </div>
          <h3>{{ t('noResults') }}</h3>
          <p>{{ t('noResultsHint') }}</p>
        </div>
      } @else {
        <div class="results-header">
          <span class="results-count">
            <i class="pi pi-images"></i>
            {{ t('resultsFound', { count: photos.length }) }}
          </span>
        </div>

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