<ng-container *transloco="let t; prefix: 'authorBrowser.detail'">
  @if (loading) {
    <div class="loading-state">
      <p-progressSpinner strokeWidth="4" fill="transparent" animationDuration=".8s">
      </p-progressSpinner>
      <p style="color: var(--primary-color);">{{ t('loading') }}</p>
    </div>
  }

  @if (!loading && author) {
    <div class="author-wrapper">
      <p-tabs [value]="tab" lazy="true" scrollable>
        <p-tablist>
          <p-tab value="books">
            <i class="pi pi-user"></i>
            {{ t('booksTab') }}
          </p-tab>
          @if (canEditMetadata) {
            <p-tab value="edit">
              <i class="pi pi-pencil"></i>
              {{ t('editTab') }}
            </p-tab>
            <p-tab value="match">
              <i class="pi pi-search"></i>
              {{ t('matchTab') }}
            </p-tab>
          }
        </p-tablist>
        <p-tabpanels class="tabpanels-responsive">
          <p-tabpanel value="books">
            <div class="author-header">
              <div class="author-photo-section">
                @if (hasPhoto) {
                  <img
                    [src]="photoUrl"
                    class="author-photo-large"
                    [alt]="author.name"
                    (error)="onPhotoError()"/>
                } @else {
                  <div class="author-photo-placeholder-large">
                    <i class="pi pi-user"></i>
                  </div>
                }
              </div>
              <div class="author-info">
                <div class="author-title-row">
                  <h2 class="author-title">{{ author.name }}</h2>
                  @if (author.asin) {
                    <a [href]="'https://www.amazon.com/stores/author/' + author.asin + '/about'"
                       target="_blank"
                       rel="noopener noreferrer"
                       class="asin-link">
                      <p-tag [value]="'ASIN: ' + author.asin" severity="info"></p-tag>
                    </a>
                    <a [href]="'https://www.audible.com/author/' + author.asin"
                       target="_blank"
                       rel="noopener noreferrer"
                       class="asin-link">
                      <p-tag value="Audible" severity="warn"></p-tag>
                    </a>
                  }
                  @if (canEditMetadata) {
                    <p-button
                      [icon]="quickMatching ? 'pi pi-spin pi-spinner' : 'pi pi-bolt'"
                      [outlined]="true"
                      severity="warn"
                      size="small"
                      [disabled]="quickMatching"
                      (onClick)="quickMatch()"
                      [pTooltip]="t('quickMatchTooltip')"
                      tooltipPosition="top">
                    </p-button>
                  }
                </div>

                @if (author.description) {
                  <div class="description-box">
                    <div #descriptionContent
                      [ngClass]="{'line-clamp-5': !isExpanded, 'line-clamp-none': isExpanded}"
                      class="description-container">
                      <div class="readonly-editor">{{ author.description }}</div>
                    </div>
                    @if (isExpanded || isOverflowing) {
                      <p-button
                        [label]="isExpanded ? t('showLess') : t('showMore')"
                        [icon]="isExpanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
                        iconPos="right"
                        size="small"
                        text
                        (click)="toggleExpand()">
                      </p-button>
                    }
                  </div>
                }
              </div>
            </div>

            @if (authorBooks$ | async; as books) {
              <div class="books-section">
                <h3 class="section-title">{{ t('booksBy', {name: author.name}) }} ({{ books.length }})</h3>
                @if (books.length === 0) {
                  <div class="empty-books">
                    <i class="pi pi-book"></i>
                    <p>{{ t('noBooksFound') }}</p>
                  </div>
                } @else {
                  <virtual-scroller #scroll [items]="books" class="books-virtual-scroller">
                    <div class="books-grid" #container
                      [ngStyle]="{'grid-template-columns': 'repeat(auto-fill, minmax(' + gridColumnMinWidth + ', 1fr))'}">
                      @for (book of scroll.viewPortItems; track book.id; let i = $index) {
                        <div class="virtual-scroller-item"
                          [ngStyle]="{width: currentCardSize.width + 'px', height: currentCardSize.height + 'px'}">
                          <app-book-card
                            [index]="books.indexOf(book)"
                            [book]="book"
                            [isSeriesCollapsed]="false"
                            [overlayPreferenceService]="bookCardOverlayPreferenceService">
                          </app-book-card>
                        </div>
                      }
                    </div>
                  </virtual-scroller>
                }
              </div>
            }
          </p-tabpanel>

          @if (canEditMetadata) {
            <p-tabpanel value="edit">
              <app-author-editor
                [authorId]="author.id"
                [author]="author"
                (authorUpdated)="onAuthorUpdated($event)">
              </app-author-editor>
            </p-tabpanel>
            <p-tabpanel value="match">
              <app-author-match
                [authorId]="author.id"
                [authorName]="author.name"
                (authorMatched)="onAuthorUpdated($event)">
              </app-author-match>
            </p-tabpanel>
          }
        </p-tabpanels>
      </p-tabs>
    </div>
  }
</ng-container>
