<ng-container *transloco="let t; prefix: 'authorBrowser.match'">
  <div class="match-container">
    <div class="search-form">
      <div class="search-fields">
        <div class="field">
          <label>{{ t('authorNameLabel') }}</label>
          <input pInputText type="text" [(ngModel)]="searchQuery" [placeholder]="t('authorNamePlaceholder')" class="search-input"/>
        </div>
        <div class="field">
          <label>{{ t('asinLabel') }}</label>
          <input pInputText type="text" [(ngModel)]="asinQuery" [placeholder]="t('asinPlaceholder')" class="search-input"/>
        </div>
        <div class="field region-field">
          <label>{{ t('regionLabel') }}</label>
          <p-select
            [options]="regionOptions"
            [(ngModel)]="selectedRegion"
            optionLabel="label"
            optionValue="value"
            class="region-dropdown">
          </p-select>
        </div>
        <div class="field search-btn-field">
          <p-button
            [label]="t('searchBtn')"
            icon="pi pi-search"
            (onClick)="search()"
            [loading]="searching"
            [disabled]="!canSearch">
          </p-button>
        </div>
      </div>
    </div>

    @if (searching) {
      <div class="search-loading">
        <p-progressSpinner
          [style]="{'width': '40px', 'height': '40px'}"
          strokeWidth="3"
          fill="transparent"
          animationDuration="1.5s">
        </p-progressSpinner>
        <span>{{ t('searching') }}</span>
      </div>
    }

    @if (!searching && hasSearched && results.length === 0) {
      <div class="empty-results">
        <i class="pi pi-info-circle"></i>
        <p>{{ t('noResults') }}</p>
        <p class="hint">{{ t('noResultsHint') }}</p>
      </div>
    }

    @if (!searching && !hasSearched) {
      <div class="ready-state">
        <i class="pi pi-search"></i>
        <p>{{ t('readyToSearch') }}</p>
        <p class="hint">{{ t('readyToSearchHint') }}</p>
      </div>
    }

    @if (!searching && results.length > 0) {
      <div class="results-header">
        <span>{{ t('resultsFound', {count: results.length}) }}</span>
      </div>
      <div class="results-list">
        @for (result of results; track result.asin) {
          <div class="result-card">
            <div class="result-image">
              @if (result.imageUrl) {
                <img [src]="result.imageUrl" [alt]="result.name" loading="lazy"/>
              } @else {
                <div class="result-placeholder">
                  <i class="pi pi-user"></i>
                </div>
              }
            </div>
            <div class="result-info">
              <h4 class="result-name">{{ result.name }}</h4>
              <span class="result-asin">ASIN: {{ result.asin }}</span>
              @if (result.description) {
                <p class="result-description">{{ result.description }}</p>
              }
            </div>
            <div class="result-action">
              <p-button
                [label]="t('matchBtn')"
                icon="pi pi-link"
                severity="success"
                [loading]="matching"
                (onClick)="matchAuthor(result)">
              </p-button>
            </div>
          </div>
        }
      </div>
    }
  </div>
</ng-container>
