@if (book$ | async; as book) {
  <div class="metadata-viewer-container" *transloco="let t; prefix: 'metadata.viewer'">
    <div class="metadata-header">

      <div class="cover-section">
        <div class="cover-wrapper">

          <p-image
            [src]="getBookCoverUrl(book)"
            alt="Image"
            width="250"
            appendTo="body"
            [preview]="true">
          </p-image>

          @if (book?.metadata!.seriesNumber != null) {
            <div class="series-badge">
              #{{ book?.metadata!.seriesNumber }}
            </div>
          }

          <div
            class="cover-progress-bar-container"
            [style.--progress-count]="getProgressCount(book)">
            @let progress = getProgressPercent(book);
            @if (progress !== null) {
              <p-progressBar
                [value]="progress"
                [showValue]="false"
                class="cover-progress-bar"
                [ngClass]="{
                  'progress-complete': progress === 100,
                  'progress-incomplete': progress < 100
                }"
              ></p-progressBar>
            }

            @if (getKoProgressPercent(book) !== null) {
              <p-progressBar
                [value]="getKoProgressPercent(book)"
                [showValue]="false"
                class="cover-progress-bar"
                [ngClass]="[
                  getKoProgressPercent(book) === 100 ? 'progress-complete-ko' : 'progress-incomplete-ko'
                ]"
              >
              </p-progressBar>
            }

            @if (getKoboProgressPercent(book) !== null) {
              <p-progressBar
                [value]="getKoboProgressPercent(book)"
                [showValue]="false"
                class="cover-progress-bar"
                [ngClass]="[
                  getKoboProgressPercent(book) === 100 ? 'progress-complete-kobo' : 'progress-incomplete-kobo'
                ]"
              >
              </p-progressBar>
            }
          </div>
        </div>

        @if (navigationState$ | async) {
          <div class="navigation-buttons-mobile">
            <p-button
              icon="pi pi-chevron-left"
              [disabled]="!canNavigatePrevious()"
              (onClick)="navigatePrevious()"
              rounded
              outlined
              severity="info"
              [pTooltip]="t('goToPreviousBook')"
              tooltipPosition="bottom">
            </p-button>
            <span class="navigation-position">
              {{ getNavigationPosition() }}
            </span>
            <p-button
              icon="pi pi-chevron-right"
              iconPos="right"
              [disabled]="!canNavigateNext()"
              (onClick)="navigateNext()"
              severity="info"
              rounded
              outlined
              [pTooltip]="t('goToNextBook')"
              tooltipPosition="bottom">
            </p-button>
          </div>
        }
      </div>

      <div class="info-section">
        <div class="info-content">

          <div class="title-group">
            @if (book?.metadata?.seriesName) {
              <div class="series-link" (click)="goToSeries(book?.metadata?.seriesName!)">
                {{ book?.metadata?.seriesName }}
                @if (book?.metadata?.seriesNumber) {
                  #{{ book?.metadata?.seriesNumber }}
                }
              </div>
            }

            <div class="title-wrapper">
              <div class="title-content">
                <h1 class="book-title">
                  {{ book?.metadata?.title }}@if (book?.metadata?.subtitle) {
                  : {{ book.metadata?.subtitle }}
                }
                </h1>
                <i
                  class="pi lock-icon"
                  [ngClass]="isMetadataFullyLocked(book?.metadata!) ? 'pi-lock locked' : 'pi-lock-open unlocked'"
                  [pTooltip]="isMetadataFullyLocked(book?.metadata!) ? t('metadataLocked') : t('metadataUnlocked')"
                  tooltipPosition="top"
                ></i>
              </div>

              <p class="authors">
                @for (author of book?.metadata!.authors; track $index; let isLast = $last; let isFirst = $first) {
                  @if (isFirst && book!.metadata!.authors!.length > 1) {
                    <a class="author-link" (click)="goToAuthorBooks(author)">{{ author }}</a>
                    <span class="first-author-badge">{{ t('firstAuthorBadge') }}</span>
                  } @else {
                    <a class="author-link" (click)="goToAuthorBooks(author)">{{ author }}</a>
                  }
                  @if (!isLast) {
                    <span class="author-separator">, </span>
                  }
                }
              </p>
            </div>

            <div class="formats-inline">
              @if (getDisplayFormat(book?.primaryFile); as displayFormat) {
                <span class="format-tag-wrapper primary-format" (click)="goToFileType(book?.primaryFile?.filePath)" [pTooltip]="book?.primaryFile?.fileName ?? ''" tooltipPosition="top">
                  <app-tag size="3xs" variant="pill" [customBgColor]="getFileTypeBgColor(displayFormat)" customTextColor="#fff">
                    {{ displayFormat }}
                  </app-tag>
                  <span class="format-badge">{{ t('primaryBadge') }}</span>
                </span>
              }
              @if (getDisplayFormat(book?.primaryFile) && getUniqueAlternativeFormats(book).length > 0) {
                <span class="format-pipe">|</span>
              }
              @for (formatExt of getUniqueAlternativeFormats(book); track formatExt) {
                <span class="format-tag-wrapper" (click)="goToFileType('.' + formatExt)" [pTooltip]="formatExt" tooltipPosition="top">
                  <app-tag size="3xs" variant="pill" [customBgColor]="getFileTypeBgColor(formatExt)" customTextColor="#fff">
                    {{ formatExt }}
                  </app-tag>
                </span>
              }
              @if (book?.isPhysical) {
                <app-tag size="3xs" variant="pill" [customBgColor]="'var(--book-type-physical-color)'" customTextColor="#fff">{{ t('physicalBadge') }}</app-tag>
              }
            </div>
          </div>

          <div class="ratings-section">

            <div class="personal-rating">
              <div class="rating-group">
                <i class="pi pi-thumbs-up-fill rating-icon" [pTooltip]="t('personalRating')" tooltipPosition="top"></i>
                <p-rating
                  [ngModel]="book?.personalRating"
                  (onRate)="onPersonalRatingChange(book, $event)"
                  stars="10"
                  [style.--p-rating-icon-active-color]="getStarColorScaled(book?.personalRating, 10)">
                </p-rating>
              </div>
              <p-button
                text
                size="small"
                icon="pi pi-undo"
                severity="warn"
                (onClick)="resetPersonalRating(book)"
                [pTooltip]="t('resetRating')"
                tooltipPosition="top"
                class="reset-button">
              </p-button>
            </div>

            @if (book?.metadata?.amazonRating || book?.metadata?.asin || book?.metadata?.goodreadsRating || book?.metadata?.goodreadsId || book?.metadata?.hardcoverRating || book?.metadata?.hardcoverId || book?.metadata?.lubimyczytacRating || book?.metadata?.lubimyczytacId || book?.metadata?.ranobedbRating || book?.metadata?.ranobedbId || book?.metadata?.audibleRating || book?.metadata?.audibleId || book?.metadata?.googleId) {
              <div class="gradient-divider"></div>
            }

            <div class="external-ratings">
              @if (book?.metadata?.amazonRating || book?.metadata?.asin) {
                <a
                  class="rating-link"
                  [href]="'https://www.amazon.' + amazonDomain + '/dp/' + (book.metadata?.asin ?? '')"
                  target="_blank"
                  rel="noopener noreferrer"
                  [pTooltip]="book?.metadata?.amazonRating ? getRatingTooltip(book, 'amazon') : undefined"
                  tooltipPosition="top"
                >
                  <img src="https://www.amazon.com/favicon.ico" alt="Amazon" class="rating-favicon"/>
                  @if (book?.metadata?.amazonRating) {
                    <span class="rating-value">{{ getRatingPercent(book.metadata!.amazonRating) }}%</span>
                  }
                </a>
              }

              @if (book?.metadata?.goodreadsRating || book?.metadata?.goodreadsId) {
                <a
                  class="rating-link"
                  [href]="'https://www.goodreads.com/book/show/' + (book.metadata?.goodreadsId ?? '')"
                  target="_blank"
                  rel="noopener noreferrer"
                  [pTooltip]="book?.metadata?.goodreadsRating ? getRatingTooltip(book, 'goodreads') : undefined"
                  tooltipPosition="top"
                >
                  <img src="https://www.goodreads.com/favicon.ico" alt="Goodreads" class="rating-favicon"/>
                  @if (book?.metadata?.goodreadsRating) {
                    <span class="rating-value">{{ getRatingPercent(book.metadata!.goodreadsRating) }}%</span>
                  }
                </a>
              }

              @if (book?.metadata?.hardcoverRating || book?.metadata?.hardcoverId) {
                <a
                  class="rating-link"
                  [href]="'https://hardcover.app/books/' + (book.metadata?.hardcoverId ?? '')"
                  target="_blank"
                  rel="noopener noreferrer"
                  [pTooltip]="book?.metadata?.hardcoverRating ? getRatingTooltip(book, 'hardcover') : undefined"
                  tooltipPosition="top"
                >
                  <img src="https://assets.hardcover.app/static/favicon.ico" alt="Hardcover" class="rating-favicon"/>
                  @if (book?.metadata?.hardcoverRating) {
                    <span class="rating-value">{{ getRatingPercent(book.metadata!.hardcoverRating) }}%</span>
                  }
                </a>
              }

              @if (book?.metadata?.lubimyczytacRating || book?.metadata?.lubimyczytacId) {
                <a
                  class="rating-link"
                  [href]="book.metadata?.lubimyczytacId ? 'https://lubimyczytac.pl/ksiazka/' + book.metadata?.lubimyczytacId + '/ksiazka' : ''"
                  target="_blank"
                  rel="noopener noreferrer"
                  [pTooltip]="book?.metadata?.lubimyczytacRating ? getRatingTooltip(book, 'lubimyczytac') : undefined"
                  tooltipPosition="top"
                >
                  <img src="https://lubimyczytac.pl/favicon.ico" alt="Lubimyczytac" class="rating-favicon"/>
                  @if (book?.metadata?.lubimyczytacRating) {
                    <span class="rating-value">{{ getRatingPercent(book.metadata!.lubimyczytacRating) }}%</span>
                  }
                </a>
              }

              @if (book?.metadata?.ranobedbRating || book?.metadata?.ranobedbId) {
                <a
                  class="rating-link"
                  [href]="'https://ranobedb.org/book/' + (book.metadata?.ranobedbId ?? '')"
                  target="_blank"
                  rel="noopener noreferrer"
                  [pTooltip]="book?.metadata?.ranobedbRating ? getRatingTooltip(book, 'ranobedb') : undefined"
                  tooltipPosition="top"
                >
                  <img src="https://www.ranobedb.org/favicon.png" alt="Ranobedb" class="rating-favicon"/>
                  @if (book?.metadata?.ranobedbRating) {
                    <span class="rating-value">{{ getRatingPercent(book.metadata!.ranobedbRating) }}%</span>
                  }
                </a>
              }

              @if (book?.metadata?.audibleRating || book?.metadata?.audibleId) {
                <a
                  class="rating-link"
                  [href]="'https://www.audible.com/pd/' + (book.metadata?.audibleId ?? '')"
                  target="_blank"
                  rel="noopener noreferrer"
                  [pTooltip]="book?.metadata?.audibleRating ? getRatingTooltip(book, 'audible') : undefined"
                  tooltipPosition="top"
                >
                  <img src="https://www.audible.com/favicon.ico" alt="Audible" class="rating-favicon"/>
                  @if (book?.metadata?.audibleRating) {
                    <span class="rating-value">{{ getRatingPercent(book.metadata!.audibleRating) }}%</span>
                  }
                </a>
              }

              @if (book?.metadata?.googleId) {
                <a
                  class="rating-link"
                  [href]="'https://books.google.com/books?id=' + book.metadata!.googleId"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <img src="https://books.google.com/favicon.ico" alt="Google Books" class="rating-favicon"/>
                </a>
              }

              @if (book?.metadata?.comicMetadata?.webLink) {
                <a
                  class="rating-link"
                  [href]="book.metadata!.comicMetadata!.webLink"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <img src="https://www.comicvine.com/favicon.ico" alt="Comic Vine" class="rating-favicon"/>
                </a>
              }
            </div>
          </div>

          <div class="tags-section">
            @if (book?.metadata?.categories?.length) {
              <div class="tag-row">
                <span class="tag-label">{{ t('genresLabel') }}</span>
                <div class="tag-scroll">
                  <div class="tag-container">
                    @for (category of book.metadata!.categories; track category) {
                      <a (click)="goToCategory(category)" class="tag-clickable">
                        <app-tag color="red" size="xs">{{ category }}</app-tag>
                      </a>
                    }
                  </div>
                </div>
              </div>
            }

            @if (book?.metadata?.moods?.length) {
              <div class="tag-row">
                <span class="tag-label">{{ t('moodsLabel') }}</span>
                <div class="tag-scroll">
                  <div class="tag-container">
                    @for (mood of book.metadata!.moods; track mood) {
                      <a (click)="goToMood(mood)" class="tag-clickable">
                        <app-tag color="indigo" size="xs">{{ mood }}</app-tag>
                      </a>
                    }
                  </div>
                </div>
              </div>
            }

            @if (book?.metadata?.tags?.length) {
              <div class="tag-row">
                <span class="tag-label">{{ t('tagsLabel') }}</span>
                <div class="tag-scroll">
                  <div class="tag-container">
                    @for (tag of book.metadata!.tags; track tag) {
                      <a (click)="goToTag(tag)" class="tag-clickable">
                        <app-tag color="green" size="xs">{{ tag }}</app-tag>
                      </a>
                    }
                  </div>
                </div>
              </div>
            }
          </div>

          <div class="metadata-grid">
            <div class="metadata-item">
              <span class="metadata-key">{{ t('libraryLabel') }}</span>
              @if (book?.libraryName) {
                <span class="metadata-value metadata-link" (click)="goToLibrary(book.libraryId!)">
                  {{ book?.libraryName }}
                </span>
              } @else {
                <span class="metadata-value">-</span>
              }
            </div>

            <div class="metadata-item">
              <span class="metadata-key">{{ t('publisherLabel') }}</span>
              @if (book?.metadata?.publisher) {
                <span class="metadata-value metadata-link" (click)="goToPublisher(book?.metadata?.publisher!)">
                  {{ book?.metadata?.publisher }}
                </span>
              } @else {
                <span class="metadata-value">-</span>
              }
            </div>

            <div class="metadata-item">
              <span class="metadata-key">{{ t('publishedLabel') }}</span>
              @if (book?.metadata!.publishedDate) {
                <span class="metadata-value metadata-link" (click)="goToPublishedYear(book?.metadata!.publishedDate!)">
                  {{ book?.metadata!.publishedDate }}
                </span>
              } @else {
                <span class="metadata-value">-</span>
              }
            </div>

            <div class="metadata-item">
              <span class="metadata-key">{{ t('languageLabel') }}</span>
              @if (book?.metadata!.language) {
                <span class="metadata-value metadata-link" (click)="goToLanguage(book?.metadata!.language!)">
                  {{ book?.metadata!.language }}
                </span>
              } @else {
                <span class="metadata-value">-</span>
              }
            </div>

            <div class="metadata-item">
              <span class="metadata-key">{{ t('bookloreProgressLabel') }}</span>
              <span class="metadata-value-group">
                <app-tag size="3xs" variant="pill" [color]="getProgressColor(getProgressPercent(book))">
                  {{ getProgressPercent(book) !== null ? getProgressPercent(book) + '%' : 'N/A' }}
                </app-tag>
                @if (getProgressPercent(book) !== null) {
                  <p-button
                    [pTooltip]="t('resetProgress')"
                    tooltipPosition="bottom"
                    icon="pi pi-refresh"
                    size="small"
                    severity="danger"
                    text
                    class="inline-action-button"
                    (onClick)="resetProgress(book, ResetProgressTypes.BOOKLORE)">
                  </p-button>
                }
              </span>
            </div>

            <div class="metadata-item">
              <span class="metadata-key">{{ t('metadataMatchLabel') }}</span>
              @if (book?.metadataMatchScore != null) {
                <span (click)="goToMatchScoreRange(book?.metadataMatchScore!)" style="cursor: pointer;">
                  <app-tag size="3xs" variant="pill" [color]="getMatchScoreColor(book?.metadataMatchScore!)">
                    {{ (book?.metadataMatchScore!) | number:'1.0-0' }}%
                  </app-tag>
                </span>
              } @else {
                <span class="metadata-value">-</span>
              }
            </div>

            <div class="metadata-item">
              <span class="metadata-key">{{ t('isbnLabel') }}</span>
              @if (book?.metadata?.isbn13 || book?.metadata?.isbn10) {
                <span class="metadata-value">
                  {{ book.metadata!.isbn13 }}
                  @if (book?.metadata?.isbn13 && book?.metadata?.isbn10) {
                    /
                  }
                  {{ book.metadata!.isbn10 }}
                </span>
              } @else {
                <span class="metadata-value">-</span>
              }
            </div>

            <div class="metadata-item">
              <span class="metadata-key">{{ t('readStatusLabel') }}</span>
              <span class="metadata-value-group">
                <span (click)="goToReadStatus(selectedReadStatus)" style="cursor: pointer;">
                  <app-tag size="3xs" variant="pill" [color]="getStatusColor(selectedReadStatus)">
                    {{ getStatusLabel(selectedReadStatus) }}
                  </app-tag>
                </span>
                <i class="pi pi-pencil edit-icon" (click)="menu.toggle($event)"></i>
                <p-menu #menu [popup]="true" [model]="readStatusMenuItems"></p-menu>
              </span>
            </div>

            @if (book?.koreaderProgress && book.koreaderProgress?.percentage != null) {
              <div class="metadata-item">
                <span class="metadata-key">{{ t('koreaderProgressLabel') }}</span>
                <span class="metadata-value-group">
                  <app-tag size="3xs" variant="pill" [color]="getKoProgressColor(getKOReaderPercentage(book))">
                    {{ getKOReaderPercentage(book) + '%' }}
                  </app-tag>
                  <p-button
                    [pTooltip]="t('resetProgress')"
                    tooltipPosition="bottom"
                    icon="pi pi-refresh"
                    size="small"
                    severity="danger"
                    text
                    class="inline-action-button"
                    (onClick)="resetProgress(book, ResetProgressTypes.KOREADER)">
                  </p-button>
                </span>
              </div>
            }

            @if (book?.koboProgress && book.koboProgress?.percentage != null) {
              <div class="metadata-item">
                <span class="metadata-key">{{ t('koboProgressLabel') }}</span>
                <span class="metadata-value-group">
                  <app-tag size="3xs" variant="pill" [color]="getKoProgressColor(book.koboProgress?.percentage)">
                    {{ book.koboProgress?.percentage | number:'1.0-1' }}%
                  </app-tag>
                  <p-button
                    [pTooltip]="t('resetProgress')"
                    tooltipPosition="bottom"
                    icon="pi pi-refresh"
                    size="small"
                    severity="danger"
                    text
                    class="inline-action-button"
                    (onClick)="resetProgress(book, ResetProgressTypes.KOBO)">
                  </p-button>
                </span>
              </div>
            }

            @if (selectedReadStatus === ReadStatus.READ) {
              <div class="metadata-item">
                @if (book?.dateFinished) {
                  <span class="metadata-key">{{ t('finishedOnLabel') }}</span>
                  @if (!isEditingDateFinished) {
                    <span class="metadata-value-group">
                      <span class="metadata-value">{{ formatDate(book.dateFinished) }}</span>
                      <i class="pi pi-pencil edit-icon" (click)="toggleDateFinishedEdit(book)"></i>
                    </span>
                  } @else {
                    <span class="metadata-value-group">
                      <p-datepicker
                        [(ngModel)]="editDateFinished"
                        dateFormat="dd-M-yy"
                        size="small"
                        [showIcon]="true"
                        [iconDisplay]="'input'"
                        appendTo="body"
                        [style]="{ 'width': '125px', 'font-size': '12px' }">
                      </p-datepicker>
                      <p-button rounded icon="pi pi-check" size="small" severity="success" text (onClick)="saveDateFinished(book)" [pTooltip]="t('saveDate')"></p-button>
                      <p-button rounded icon="pi pi-times" size="small" severity="danger" text (onClick)="cancelDateFinishedEdit()" [pTooltip]="'common.cancel' | transloco"></p-button>
                    </span>
                  }
                }
              </div>
            }

            <div class="metadata-item">
              <span class="metadata-key">{{ t('pageCountLabel') }}</span>
              @if (book?.metadata!.pageCount) {
                <span class="metadata-value metadata-link" (click)="goToPageCountRange(book?.metadata!.pageCount!)">
                  {{ book?.metadata!.pageCount }}
                </span>
              } @else {
                <span class="metadata-value">-</span>
              }
            </div>

            <div class="metadata-item">
              <span class="metadata-key">{{ t('ageRatingLabel') }}</span>
              @if (book?.metadata?.ageRating != null) {
                <span class="metadata-value metadata-link" (click)="goToAgeRating(book?.metadata?.ageRating!)">
                  {{ getAgeRatingLabel(book?.metadata?.ageRating) }}
                </span>
              } @else {
                <span class="metadata-value">-</span>
              }
            </div>

            <div class="metadata-item">
              <span class="metadata-key">{{ t('contentRatingLabel') }}</span>
              @if (book?.metadata?.contentRating) {
                <span class="metadata-value metadata-link" (click)="goToContentRating(book?.metadata?.contentRating!)">
                  {{ getContentRatingLabel(book?.metadata?.contentRating) }}
                </span>
              } @else {
                <span class="metadata-value">-</span>
              }
            </div>

            @if (isAudiobook(book) && hasAudiobookMetadata(book)) {
              @let audio = book.metadata!.audiobookMetadata!;
              @if (book.metadata?.narrator) {
                <div class="metadata-item">
                  <span class="metadata-key">{{ t('audiobookNarrator') }}</span>
                  <a class="metadata-value metadata-link" (click)="goToNarrator(book.metadata!.narrator!)">
                    {{ book.metadata?.narrator }}
                  </a>
                </div>
              }
              @if (audio.durationSeconds) {
                <div class="metadata-item">
                  <span class="metadata-key">{{ t('audiobookDuration') }}</span>
                  <span class="metadata-value">{{ formatDuration(audio.durationSeconds) }}</span>
                </div>
              }
              @if (audio.chapterCount) {
                <div class="metadata-item">
                  <span class="metadata-key">{{ t('audiobookChapters') }}</span>
                  <span class="metadata-value">{{ audio.chapterCount }}</span>
                </div>
              }
              @if (book.metadata?.abridged != null) {
                <div class="metadata-item">
                  <span class="metadata-key">{{ t('audiobookAbridged') }}</span>
                  <span class="metadata-value">{{ book.metadata?.abridged ? t('abridged') : t('unabridged') }}</span>
                </div>
              }
            }

            @if (hasDigitalFile(book)) {
              <div class="metadata-item">
                <span class="metadata-key">{{ t('fileSizeLabel') }}</span>
                @if (book?.primaryFile?.fileSizeKb) {
                  <span class="metadata-value metadata-link" (click)="goToFileSizeRange(book?.primaryFile?.fileSizeKb!)">
                    {{ formatFileSize(book?.primaryFile) }}
                  </span>
                } @else {
                  <span class="metadata-value">-</span>
                }
              </div>
            }
          </div>

          @if (hasDigitalFile(book)) {
            <div class="file-path-section">
              <span class="metadata-key">{{ t('filePathLabel') }}</span>
              <i class="pi eye-icon" [ngClass]="showFilePath ? 'pi-eye-slash' : 'pi-eye'" (click)="showFilePath = !showFilePath"></i>
              @if (showFilePath) {
                <code class="file-path-code">{{ book?.primaryFile?.filePath }}</code>
              }
            </div>
          }
        </div>

        @if (userService.userState$ | async; as userState) {
          <div class="action-buttons-container">
            <div class="action-buttons">
              @if (navigationState$ | async) {
                <div class="action-group navigation-group">
                  <p-button
                    icon="pi pi-chevron-left"
                    [disabled]="!canNavigatePrevious()"
                    (onClick)="navigatePrevious()"`
                    outlined
                    severity="secondary"
                    [pTooltip]="t('goToPreviousBook')"
                    tooltipPosition="bottom">
                  </p-button>
                  <span class="navigation-position">
                    {{ getNavigationPosition() }}
                  </span>
                  <p-button
                    icon="pi pi-chevron-right"
                    iconPos="right"
                    [disabled]="!canNavigateNext()"
                    (onClick)="navigateNext()"
                    severity="secondary"
                    outlined
                    [pTooltip]="t('goToNextBook')"
                    tooltipPosition="bottom">
                  </p-button>
                </div>
              }
              @if (hasDigitalFile(book)) {
                <div class="action-group primary-actions">
                  @if (readMenuItems$ | async; as readItems) {
                    @if (readItems.length > 0) {
                      <p-splitbutton [label]="getReadButtonLabel(book)" [icon]="getReadButtonIcon(book)" [model]="readItems" (onClick)="read(book.id)" severity="primary" class="read-button-responsive"/>
                    } @else {
                      <p-button [label]="getReadButtonLabel(book)" [icon]="getReadButtonIcon(book)" (onClick)="read(book.id)" severity="primary" class="read-button-responsive"/>
                    }
                  } @else {
                    <p-button [label]="getReadButtonLabel(book)" [icon]="getReadButtonIcon(book)" (onClick)="read(book.id)" severity="primary" class="read-button-responsive"/>
                  }
                </div>
              }
              <div class="action-group secondary-actions">
                @if ((userState.user!.permissions.canDownload || userState.user!.permissions.admin) && hasAnyFiles(book)) {
                  @if ((book!.alternativeFormats && book!.alternativeFormats.length > 0) || (book!.supplementaryFiles && book!.supplementaryFiles.length > 0)) {
                    @if (downloadMenuItems$ | async; as downloadItems) {
                      <p-splitbutton [label]="(getDisplayFormat(book.primaryFile) ?? 'File') + ' · ' + formatFileSize(book.primaryFile)" icon="pi pi-download" [model]="downloadItems" (onClick)="download(book)" severity="success" outlined class="mobile-icon-only"/>
                    }
                  } @else {
                    <p-button [label]="(getDisplayFormat(book.primaryFile) ?? 'File') + ' · ' + formatFileSize(book.primaryFile)" icon="pi pi-download" severity="success" outlined (onClick)="download(book)" class="mobile-icon-only"></p-button>
                  }
                }
                @if (userState.user!.permissions.canEditMetadata || userState.user!.permissions.admin) {
                  <p-button
                    [label]="isAutoFetching ? t('fetchingBtn') : t('fetchMetadataBtn')"
                    [icon]="isAutoFetching ? 'pi pi-spin pi-spinner' : 'pi pi-bolt'"
                    [outlined]="true"
                    severity="warn"
                    (onClick)="quickRefresh(book!.id)"
                    [disabled]="isAutoFetching"
                    [pTooltip]="t('fetchMetadataTooltip')"
                    tooltipPosition="top"
                    class="mobile-icon-only">
                  </p-button>
                }
                @if (otherItems$ | async; as otherItems) {
                  @if (otherItems.length > 0) {
                    <p-button icon="pi pi-ellipsis-v" severity="info" outlined (click)="entitymenu.toggle($event)"></p-button>
                    <p-tieredMenu #entitymenu [model]="otherItems" [popup]="true" appendTo="body"></p-tieredMenu>
                  }
                }
              </div>
            </div>
          </div>
        }
      </div>
    </div>

    <div class="description-section">
      <div class="section-header">
        <i class="pi pi-align-left"></i>
        <span>{{ t('synopsisTitle') }}</span>
      </div>
      <div class="description-body">
        <div #descriptionContent [ngClass]="{ 'line-clamp-7': !isExpanded }" class="description-content">
          <div class="description-html" [innerHTML]="sanitizeDescription(book.metadata!.description)"></div>
        </div>
        @if (isExpanded || isOverflowing) {
          <button class="expand-toggle" (click)="toggleExpand()">
            {{ isExpanded ? t('showLess') : t('showMore') }}
            <i class="pi" [ngClass]="isExpanded ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
          </button>
        }
      </div>
    </div>

    @if (isComicBook(book) && hasComicMetadata(book)) {
      <div class="comic-metadata-section">
        <div class="section-header clickable" (click)="isComicSectionExpanded = !isComicSectionExpanded">
          <div class="section-header-left">
            <i class="pi pi-images"></i>
            <span>{{ t('comicDetailsTitle') }}</span>
          </div>
          <i class="pi section-toggle-icon" [ngClass]="isComicSectionExpanded ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
        </div>

        <div class="comic-metadata-content" [ngClass]="{'collapsed': !isComicSectionExpanded}">
          @let comic = book.metadata!.comicMetadata!;

          <div class="comic-info-grid">
            @if (comic.issueNumber) {
              <div class="comic-info-item">
                <span class="comic-info-label">{{ t('comicIssue') }}</span>
                <span class="comic-info-value">#{{ comic.issueNumber }}</span>
              </div>
            }
            @if (comic.volumeName) {
              <div class="comic-info-item">
                <span class="comic-info-label">{{ t('comicVolume') }}</span>
                <span class="comic-info-value">
                  {{ comic.volumeName }}
                  @if (comic.volumeNumber) {
                    <span class="comic-volume-number">Vol. {{ comic.volumeNumber }}</span>
                  }
                </span>
              </div>
            }
            @if (comic.storyArc) {
              <div class="comic-info-item">
                <span class="comic-info-label">{{ t('comicStoryArc') }}</span>
                <span class="comic-info-value">
                  {{ comic.storyArc }}
                  @if (comic.storyArcNumber) {
                    <span class="comic-arc-number">(#{{ comic.storyArcNumber }})</span>
                  }
                </span>
              </div>
            }
            @if (comic.alternateSeries) {
              <div class="comic-info-item">
                <span class="comic-info-label">{{ t('comicAltSeries') }}</span>
                <span class="comic-info-value">
                  {{ comic.alternateSeries }}
                  @if (comic.alternateIssue) {
                    #{{ comic.alternateIssue }}
                  }
                </span>
              </div>
            }
            @if (comic.format) {
              <div class="comic-info-item">
                <span class="comic-info-label">{{ t('comicFormat') }}</span>
                <span class="comic-info-value">{{ comic.format }}</span>
              </div>
            }
            @if (comic.imprint) {
              <div class="comic-info-item">
                <span class="comic-info-label">{{ t('comicImprint') }}</span>
                <span class="comic-info-value">{{ comic.imprint }}</span>
              </div>
            }
          </div>

          @if (hasAnyCreators(comic)) {
            <div class="comic-subsection">
              <div class="comic-subsection-title">
                <i class="pi pi-users"></i>
                <span>{{ t('creatorsTitle') }}</span>
              </div>
              <div class="comic-creators-grid">
                @if (comic.pencillers?.length) {
                  <div class="comic-creator-row">
                    <span class="comic-creator-role">{{ t('pencillers') }}</span>
                    <div class="comic-creator-names">
                      @for (name of comic.pencillers; track name) {
                        <a class="comic-creator-link" (click)="goToCreator(name, 'penciller')">{{ name }}</a>
                      }
                    </div>
                  </div>
                }
                @if (comic.inkers?.length) {
                  <div class="comic-creator-row">
                    <span class="comic-creator-role">{{ t('inkers') }}</span>
                    <div class="comic-creator-names">
                      @for (name of comic.inkers; track name) {
                        <a class="comic-creator-link" (click)="goToCreator(name, 'inker')">{{ name }}</a>
                      }
                    </div>
                  </div>
                }
                @if (comic.colorists?.length) {
                  <div class="comic-creator-row">
                    <span class="comic-creator-role">{{ t('colorists') }}</span>
                    <div class="comic-creator-names">
                      @for (name of comic.colorists; track name) {
                        <a class="comic-creator-link" (click)="goToCreator(name, 'colorist')">{{ name }}</a>
                      }
                    </div>
                  </div>
                }
                @if (comic.letterers?.length) {
                  <div class="comic-creator-row">
                    <span class="comic-creator-role">{{ t('letterers') }}</span>
                    <div class="comic-creator-names">
                      @for (name of comic.letterers; track name) {
                        <a class="comic-creator-link" (click)="goToCreator(name, 'letterer')">{{ name }}</a>
                      }
                    </div>
                  </div>
                }
                @if (comic.coverArtists?.length) {
                  <div class="comic-creator-row">
                    <span class="comic-creator-role">{{ t('coverArtists') }}</span>
                    <div class="comic-creator-names">
                      @for (name of comic.coverArtists; track name) {
                        <a class="comic-creator-link" (click)="goToCreator(name, 'coverArtist')">{{ name }}</a>
                      }
                    </div>
                  </div>
                }
                @if (comic.editors?.length) {
                  <div class="comic-creator-row">
                    <span class="comic-creator-role">{{ t('editors') }}</span>
                    <div class="comic-creator-names">
                      @for (name of comic.editors; track name) {
                        <a class="comic-creator-link" (click)="goToCreator(name, 'editor')">{{ name }}</a>
                      }
                    </div>
                  </div>
                }
              </div>
            </div>
          }

          @if (comic.characters?.length || comic.teams?.length || comic.locations?.length) {
            <div class="comic-subsection">
              <div class="comic-subsection-title">
                <i class="pi pi-globe"></i>
                <span>{{ t('universeTitle') }}</span>
              </div>
              <div class="comic-tags-container">
                @if (comic.characters?.length) {
                  <div class="comic-tag-row">
                    <span class="comic-tag-label">{{ t('characters') }}</span>
                    <div class="comic-tag-list">
                      @for (character of comic.characters; track character) {
                        <a class="comic-tag-clickable" (click)="goToCharacter(character)">
                          <app-tag color="cyan" size="xs">{{ character }}</app-tag>
                        </a>
                      }
                    </div>
                  </div>
                }
                @if (comic.teams?.length) {
                  <div class="comic-tag-row">
                    <span class="comic-tag-label">{{ t('teams') }}</span>
                    <div class="comic-tag-list">
                      @for (team of comic.teams; track team) {
                        <a class="comic-tag-clickable" (click)="goToTeam(team)">
                          <app-tag color="violet" size="xs">{{ team }}</app-tag>
                        </a>
                      }
                    </div>
                  </div>
                }
                @if (comic.locations?.length) {
                  <div class="comic-tag-row">
                    <span class="comic-tag-label">{{ t('locations') }}</span>
                    <div class="comic-tag-list">
                      @for (location of comic.locations; track location) {
                        <a class="comic-tag-clickable" (click)="goToLocation(location)">
                          <app-tag color="amber" size="xs">{{ location }}</app-tag>
                        </a>
                      }
                    </div>
                  </div>
                }
              </div>
            </div>
          }

          @if (comic.manga || comic.blackAndWhite || comic.readingDirection === 'rtl') {
            <div class="comic-properties">
              @if (comic.manga) {
                <span class="comic-property-badge manga">
                  <i class="pi pi-book"></i> {{ t('manga') }}
                </span>
              }
              @if (comic.blackAndWhite) {
                <span class="comic-property-badge bw">
                  <i class="pi pi-palette"></i> {{ t('blackAndWhite') }}
                </span>
              }
              @if (comic.readingDirection === 'rtl') {
                <span class="comic-property-badge rtl">
                  <i class="pi pi-arrow-left"></i> {{ t('rightToLeft') }}
                </span>
              }
            </div>
          }

          @if (comic.webLink) {
            <div class="comic-web-link">
              <a [href]="comic.webLink" target="_blank" rel="noopener noreferrer" class="comic-external-link">
                <i class="pi pi-external-link"></i>
                <span>{{ formatWebLink(comic.webLink) }}</span>
              </a>
            </div>
          }

          @if (comic.notes) {
            <div class="comic-notes">
              <div class="comic-notes-label">
                <i class="pi pi-file-edit"></i>
                <span>{{ t('notesLabel') }}</span>
              </div>
              <p class="comic-notes-content">{{ comic.notes }}</p>
            </div>
          }
        </div>
      </div>
    }

    <app-metadata-tabs
      [book]="book"
      [bookInSeries]="bookInSeries"
      [recommendedBooks]="recommendedBooks"
      (readBook)="onReadBook($event)"
      (downloadBook)="onDownloadBook($event)"
      (downloadFile)="onDownloadFile($event)"
      (downloadAllFiles)="onDownloadAllFiles($event)"
      (deleteBookFile)="onDeleteBookFile($event)"
      (deleteSupplementaryFile)="onDeleteSupplementaryFile($event)"
      (detachBookFile)="onDetachBookFile($event)">
    </app-metadata-tabs>

    <p-dialog
      [header]="t('confirm.detachFileHeader')"
      [(visible)]="showDetachDialog"
      [modal]="true"
      [closable]="true"
      [style]="{ width: '450px' }"
      [breakpoints]="{ '575px': '95vw' }">
      <div class="detach-dialog-content">
        <p>{{ t('confirm.detachFileMessage', { fileName: detachFileName }) }}</p>
        <div class="detach-dialog-option">
          <p-checkbox
            [(ngModel)]="detachCopyMetadata"
            [binary]="true"
            inputId="copyMetadata">
          </p-checkbox>
          <label for="copyMetadata">{{ t('confirm.detachFileCopyMetadata') }}</label>
        </div>
      </div>
      <ng-template #footer>
        <p-button
          [label]="'common.cancel' | transloco"
          severity="secondary"
          (onClick)="showDetachDialog = false">
        </p-button>
        <p-button
          [label]="t('confirm.detachFileBtn')"
          severity="warn"
          icon="pi pi-external-link"
          (onClick)="confirmDetach()">
        </p-button>
      </ng-template>
    </p-dialog>
  </div>
} @else {
  <div class="loading-state" *transloco="let t; prefix: 'metadata.viewer'">
    <p-progressSpinner strokeWidth="4" fill="transparent" animationDuration=".8s"></p-progressSpinner>
    <p class="loading-text">{{ t('loadingBookDetails') }}</p>
  </div>
}