@if (book$ | async; as book) {
  <form [formGroup]="metadataForm" class="metadata-form" *transloco="let t; prefix: 'metadata.editor'">
    @if (isLoading) {
      <div class="loading-overlay"></div>
    }
    @if (isLoading) {
      <p-progressSpinner class="loading-spinner"></p-progressSpinner>
    }
    <div class="form-content">
      <div class="main-section">
        <div class="covers-section" [class.dual-covers]="supportsDualCovers(book)">
          <!-- Ebook Cover Section -->
          @if (hasEbookFormat(book)) {
            <div class="cover-section">
              @if (supportsDualCovers(book)) {
                <div class="cover-type-label ebook">
                  <i class="pi pi-book"></i> {{ t('ebookCover') }}
                </div>
              }
              <p-image
                [src]="urlHelper.getCoverUrl(book.id, book.metadata?.coverUpdatedOn)"
                alt="Cover Image"
                width="200"
                appendTo="body"
                lazyLoad
                [preview]="true">
              </p-image>
              @if (isUploading) {
                <p-progressSpinner class="upload-spinner"></p-progressSpinner>
              }
              <div class="cover-actions">
                @if (!book.isPhysical) {
                  <p-button
                    icon="pi pi-refresh"
                    (onClick)="regenerateCover(book.id)"
                    [pTooltip]="t('regenerateCoverTooltip')"
                    tooltipPosition="top"
                    [outlined]="true"
                    severity="warn"
                    size="small"
                    [disabled]="book.metadata!['coverLocked']">
                  </p-button>
                }
                <p-button
                  icon="pi pi-palette"
                  (onClick)="generateCustomCover(book.id)"
                  [pTooltip]="t('generateCustomCoverTooltip')"
                  tooltipPosition="top"
                  [outlined]="true"
                  severity="help"
                  size="small"
                  [loading]="isGeneratingCover"
                  [disabled]="book.metadata!['coverLocked'] || isGeneratingCover">
                </p-button>
                <p-button
                  [disabled]="book.metadata!['coverLocked']"
                  outlined
                  size="small"
                  icon="pi pi-search"
                  (onClick)="openCoverSearch()"
                  [pTooltip]="t('searchCoverTooltip')"
                  tooltipPosition="top"
                  severity="info">
                </p-button>
                <p-fileupload
                  [chooseStyleClass]="'p-button-sm p-button-outlined p-button-danger'"
                  [pTooltip]="t('uploadCoverTooltip')"
                  tooltipPosition="top"
                  [disabled]="book.metadata!['coverLocked']"
                  name="file"
                  [url]="getUploadCoverUrl()"
                  mode="basic"
                  chooseIcon="pi pi-upload"
                  accept="image/jpeg,image/png"
                  maxFileSize="5000000"
                  (onUpload)="onUpload($event)"
                  (onError)="onUploadError($event)"
                  [auto]="true"
                  (onBeforeUpload)="onBeforeSend()">
                </p-fileupload>
                @if (!book.metadata!['coverLocked']) {
                  <p-button [pTooltip]="t('lockCoverTooltip')" tooltipPosition="top" size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('thumbnailUrl')" severity="success"></p-button>
                }
                @if (book.metadata!['coverLocked']) {
                  <p-button [pTooltip]="t('unlockCoverTooltip')" tooltipPosition="top" size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('thumbnailUrl')" severity="warn"></p-button>
                }
              </div>
            </div>
          }

          <!-- Audiobook Cover Section -->
          @if (hasAudiobookFormat(book)) {
            <div class="cover-section audiobook-cover-section">
              <div class="cover-type-label audiobook">
                <i class="pi pi-headphones"></i> {{ t('audiobookCover') }}
              </div>
              <p-image
                [src]="urlHelper.getAudiobookCoverUrl(book.id, book.metadata?.audiobookCoverUpdatedOn)"
                alt="Audiobook Cover"
                width="200"
                appendTo="body"
                lazyLoad
                [preview]="true"
                class="square-cover">
              </p-image>
              @if (isUploading) {
                <p-progressSpinner class="upload-spinner"></p-progressSpinner>
              }
              <div class="cover-actions">
                <p-button
                  icon="pi pi-refresh"
                  (onClick)="regenerateAudiobookCover(book.id)"
                  [pTooltip]="t('regenerateAudiobookCoverTooltip')"
                  tooltipPosition="top"
                  [outlined]="true"
                  severity="warn"
                  size="small"
                  [disabled]="book.metadata!['audiobookCoverLocked']">
                </p-button>
                <p-button
                  icon="pi pi-palette"
                  (onClick)="generateCustomAudiobookCover(book.id)"
                  [pTooltip]="t('generateCustomAudiobookCoverTooltip')"
                  tooltipPosition="top"
                  [outlined]="true"
                  severity="help"
                  size="small"
                  [loading]="isGeneratingAudiobookCover"
                  [disabled]="book.metadata!['audiobookCoverLocked'] || isGeneratingAudiobookCover">
                </p-button>
                <p-button
                  [disabled]="book.metadata!['audiobookCoverLocked']"
                  outlined
                  size="small"
                  icon="pi pi-search"
                  (onClick)="openAudiobookCoverSearch()"
                  [pTooltip]="t('searchAudiobookCoverTooltip')"
                  tooltipPosition="top"
                  severity="info">
                </p-button>
                <p-fileupload
                  [chooseStyleClass]="'p-button-sm p-button-outlined p-button-danger'"
                  [pTooltip]="t('uploadAudiobookCoverTooltip')"
                  tooltipPosition="top"
                  [disabled]="book.metadata!['audiobookCoverLocked']"
                  name="file"
                  [url]="getUploadAudiobookCoverUrl()"
                  mode="basic"
                  chooseIcon="pi pi-upload"
                  accept="image/jpeg,image/png"
                  maxFileSize="5000000"
                  (onUpload)="onAudiobookCoverUpload($event)"
                  (onError)="onUploadError($event)"
                  [auto]="true"
                  (onBeforeUpload)="onBeforeSend()">
                </p-fileupload>
                @if (!book.metadata!['audiobookCoverLocked']) {
                  <p-button [pTooltip]="t('lockCoverTooltip')" tooltipPosition="top" size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('audiobookCover')" severity="success"></p-button>
                }
                @if (book.metadata!['audiobookCoverLocked']) {
                  <p-button [pTooltip]="t('unlockCoverTooltip')" tooltipPosition="top" size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('audiobookCover')" severity="warn"></p-button>
                }
              </div>
            </div>
          }
        </div>
        <div class="fields-section">

          <div class="field-row">
            <div class="field-group title-field">
              <label for="title">{{ t('title') }} @if (isEmbeddable('title', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock">
                <input pInputText id="title" formControlName="title"/>
                @if (!book.metadata!['titleLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('title')" severity="success"></p-button>
                }
                @if (book.metadata!['titleLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('title')" severity="warn"></p-button>
                }
              </div>
            </div>

            <div class="field-group subtitle-field">
              <label for="subtitle">{{ t('subtitle') }} @if (isEmbeddable('subtitle', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock">
                <input pInputText id="subtitle" formControlName="subtitle"/>
                @if (!book.metadata!['subtitleLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('subtitle')" severity="success"></p-button>
                }
                @if (book.metadata!['subtitleLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('subtitle')" severity="warn"></p-button>
                }
              </div>
            </div>

            <div class="field-group language-field">
              <label for="language">{{ t('language') }} @if (isEmbeddable('language', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock">
                <input pInputText id="language" formControlName="language"/>
                @if (!book.metadata!['languageLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('language')" severity="success"></p-button>
                }
                @if (book.metadata!['languageLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('language')" severity="warn"></p-button>
                }
              </div>
            </div>
          </div>

          <div class="field-row">
            <div class="field-group authors-field">
              <label for="authors">{{ t('authors') }} @if (isEmbeddable('authors', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock authors-lock-wrapper">
                <div class="author-chips-container" [class.disabled]="metadataForm.get('authors')?.disabled"
                     cdkDropList cdkDropListOrientation="mixed"
                     [cdkDropListDisabled]="metadataForm.get('authors')?.disabled"
                     (cdkDropListDropped)="dropAuthor($event)">
                  @for (author of metadataForm.get('authors')!.value; track $index) {
                    <span class="author-chip" [class.main-author]="$first" cdkDrag>
                      @if ($first) { <span class="main-author-badge">m</span> }
                      {{ author }}
                      @if (!metadataForm.get('authors')?.disabled) {
                        <i class="pi pi-times author-chip-remove" (click)="removeAuthor($index)"></i>
                      }
                    </span>
                  }
                  @if (!metadataForm.get('authors')?.disabled) {
                    <p-autoComplete
                      class="author-add-input"
                      [(ngModel)]="authorInputValue"
                      [ngModelOptions]="{ standalone: true }"
                      [suggestions]="filteredAuthors"
                      [forceSelection]="false"
                      [dropdown]="false"
                      (completeMethod)="filterAuthors($event)"
                      (onKeyUp)="onAuthorInputKeyUp($event)"
                      (onSelect)="onAuthorInputSelect($event)"
                      placeholder="Add author..."
                    />
                  }
                </div>
                @if (!book.metadata!['authorsLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('authors')" severity="success"></p-button>
                }
                @if (book.metadata!['authorsLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('authors')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="field-group publisher-field">
              <label for="publisher">{{ t('publisher') }} @if (isEmbeddable('publisher', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock">
                <p-autoComplete
                  [fluid]="true"
                  formControlName="publisher"
                  inputId="publisher"
                  [multiple]="false"
                  [dropdown]="false"
                  [suggestions]="filteredPublishers"
                  [forceSelection]="false"
                  [showClear]="false"
                  (completeMethod)="filterPublishers($event)">
                </p-autoComplete>
                @if (!book.metadata!['publisherLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('publisher')" severity="success"></p-button>
                }
                @if (book.metadata!['publisherLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('publisher')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="field-group date-field">
              <label for="publishedDate">{{ t('publishDate') }} @if (isEmbeddable('publishedDate', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock">
                <p-datepicker
                  formControlName="publishedDate"
                  inputId="publishedDate"
                  dataType="string"
                  dateFormat="yy-mm-dd"
                  [keepInvalid]="true"
                  [showIcon]="false"
                  [iconDisplay]="'input'"
                  fluid="true"
                  appendTo="body">
                </p-datepicker>
                @if (!book.metadata!['publishedDateLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('publishedDate')" severity="success"></p-button>
                }
                @if (book.metadata!['publishedDateLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('publishedDate')" severity="warn"></p-button>
                }
              </div>
            </div>
          </div>

          <div class="field-row">
            <div class="field-group full-width">
              <label for="categories">{{ t('genres') }} @if (isEmbeddable('categories', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock">
                <div class="autocomplete-wrapper">
                  <p-autoComplete
                    formControlName="categories"
                    [multiple]="true"
                    [dropdown]="false"
                    [suggestions]="filteredCategories"
                    [forceSelection]="false"
                    [showClear]="true"
                    (completeMethod)="filterCategories($event)"
                    (onKeyUp)="onAutoCompleteKeyUp('categories', $event)"
                    (onSelect)="onAutoCompleteSelect('categories', $event)">
                  </p-autoComplete>
                </div>
                @if (!book.metadata!['categoriesLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('categories')" severity="success"></p-button>
                }
                @if (book.metadata!['categoriesLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('categories')" severity="warn"></p-button>
                }
              </div>
            </div>
          </div>

          <div class="field-row">
            <div class="field-group half-width">
              <label for="moods">{{ t('moods') }} @if (isEmbeddable('moods', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock">
                <div class="autocomplete-wrapper">
                  <p-autoComplete
                    formControlName="moods"
                    [multiple]="true"
                    [dropdown]="false"
                    [suggestions]="filteredMoods"
                    [forceSelection]="false"
                    [showClear]="true"
                    (completeMethod)="filterMoods($event)"
                    (onKeyUp)="onAutoCompleteKeyUp('moods', $event)"
                    (onSelect)="onAutoCompleteSelect('moods', $event)">
                  </p-autoComplete>
                </div>
                @if (!book.metadata!['moodsLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('moods')" severity="success"></p-button>
                }
                @if (book.metadata!['moodsLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('moods')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="field-group half-width">
              <label for="tags">{{ t('tags') }} @if (isEmbeddable('tags', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock">
                <div class="autocomplete-wrapper">
                  <p-autoComplete
                    formControlName="tags"
                    [multiple]="true"
                    [dropdown]="false"
                    [suggestions]="filteredTags"
                    [forceSelection]="false"
                    [showClear]="true"
                    (completeMethod)="filterTags($event)"
                    (onKeyUp)="onAutoCompleteKeyUp('tags', $event)"
                    (onSelect)="onAutoCompleteSelect('tags', $event)">
                  </p-autoComplete>
                </div>
                @if (!book.metadata!['tagsLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('tags')" severity="success"></p-button>
                }
                @if (book.metadata!['tagsLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('tags')" severity="warn"></p-button>
                }
              </div>
            </div>
          </div>

          <div class="field-row">
            <div class="field-group series-name-field">
              <label for="seriesName">{{ t('seriesName') }} @if (isEmbeddable('seriesName', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock">
                <p-autoComplete
                  [fluid]="true"
                  formControlName="seriesName"
                  inputId="seriesName"
                  [multiple]="false"
                  [dropdown]="false"
                  [suggestions]="filteredSeries"
                  [forceSelection]="false"
                  [showClear]="false"
                  (completeMethod)="filterSeries($event)">
                </p-autoComplete>
                @if (!book.metadata!['seriesNameLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('seriesName')" severity="success"></p-button>
                }
                @if (book.metadata!['seriesNameLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('seriesName')" severity="warn"></p-button>
                }
              </div>
            </div>

            <div class="field-group small-field">
              <label for="seriesNumber">{{ t('seriesNumber') }} @if (isEmbeddable('seriesNumber', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock">
                <input pInputText id="seriesNumber" formControlName="seriesNumber"/>
                @if (!book.metadata!['seriesNumberLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('seriesNumber')" severity="success"></p-button>
                }
                @if (book.metadata!['seriesNumberLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('seriesNumber')" severity="warn"></p-button>
                }
              </div>
            </div>

            <div class="field-group small-field">
              <label for="seriesTotal">{{ t('seriesTotal') }} @if (isEmbeddable('seriesTotal', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock">
                <input pInputText id="seriesTotal" formControlName="seriesTotal"/>
                @if (!book.metadata!['seriesTotalLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('seriesTotal')" severity="success"></p-button>
                }
                @if (book.metadata!['seriesTotalLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('seriesTotal')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="field-group small-field">
              <label>{{ t('publicReviews') }}</label>
              <div class="field-with-lock">
                <input pSize="small" pInputText [disabled]="true" [value]="t('noValue')"/>
                @if (!book.metadata!['reviewsLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('reviews')" severity="success"></p-button>
                }
                @if (book.metadata!['reviewsLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('reviews')" severity="warn"></p-button>
                }
              </div>
            </div>
          </div>

          <div class="field-row">
            <div class="field-group small-field">
              <label for="isbn10">{{ t('isbn10') }} @if (isEmbeddable('isbn10', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock">
                <input pInputText id="isbn10" formControlName="isbn10"/>
                @if (!book.metadata!['isbn10Locked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('isbn10')" severity="success"></p-button>
                }
                @if (book.metadata!['isbn10Locked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('isbn10')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="field-group small-field">
              <label for="isbn13">{{ t('isbn13') }} @if (isEmbeddable('isbn13', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock">
                <input pInputText id="isbn13" formControlName="isbn13"/>
                @if (!book.metadata!['isbn13Locked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('isbn13')" severity="success"></p-button>
                }
                @if (book.metadata!['isbn13Locked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('isbn13')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="field-group small-field">
              <label for="ageRating">{{ t('ageRating') }} @if (isEmbeddable('ageRating', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock">
                <p-select
                  id="ageRating"
                  formControlName="ageRating"
                  [options]="ageRatingOptions"
                  optionLabel="label"
                  optionValue="value"
                  [placeholder]="t('selectPlaceholder')"
                  [showClear]="true"
                  appendTo="body">
                </p-select>
                @if (!book.metadata!['ageRatingLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('ageRating')" severity="success"></p-button>
                }
                @if (book.metadata!['ageRatingLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('ageRating')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="field-group small-field">
              <label for="contentRating">{{ t('contentRating') }} @if (isEmbeddable('contentRating', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock">
                <p-select
                  id="contentRating"
                  formControlName="contentRating"
                  [options]="contentRatingOptions"
                  optionLabel="label"
                  optionValue="value"
                  [placeholder]="t('selectPlaceholder')"
                  [showClear]="true"
                  appendTo="body">
                </p-select>
                @if (!book.metadata!['contentRatingLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('contentRating')" severity="success"></p-button>
                }
                @if (book.metadata!['contentRatingLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('contentRating')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="field-group small-field">
              <label for="pageCount">{{ t('pages') }} @if (isEmbeddable('pageCount', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
              <div class="field-with-lock">
                <input pInputText id="pageCount" formControlName="pageCount"/>
                @if (!book.metadata!['pageCountLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('pageCount')" severity="success"></p-button>
                }
                @if (book.metadata!['pageCountLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('pageCount')" severity="warn"></p-button>
                }
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- Audiobook Metadata Section -->
      @if (isAudiobook(book)) {
        <div class="collapsible-section" [class.expanded]="audiobookSectionExpanded">
          <div class="collapsible-header" (click)="audiobookSectionExpanded = !audiobookSectionExpanded">
            <i class="pi pi-headphones"></i>
            <span>{{ t('audiobookDetails') }}</span>
            <i [class]="audiobookSectionExpanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'" class="section-toggle"></i>
          </div>
          @if (audiobookSectionExpanded) {
            <div class="collapsible-content">
              <div class="field-row metadata-ids-row">
                @for (field of audiobookMetadataFields; track field) {
                  <div class="field-group metadata-id-field">
                    <label>{{ field.label }} @if (isEmbeddable(field.controlName, book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                    <div class="field-with-lock">
                      @if (field.type === 'boolean') {
                        <p-select [formControlName]="field.controlName" [options]="booleanOptions" optionLabel="label" optionValue="value" appendTo="body"></p-select>
                      } @else {
                        <input pInputText [formControlName]="field.controlName"/>
                      }
                      @if (!metadataForm.get(field.lockedKey)?.value) {
                        <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock(field.controlName)" severity="success"></p-button>
                      }
                      @if (metadataForm.get(field.lockedKey)?.value) {
                        <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock(field.controlName)" severity="warn"></p-button>
                      }
                    </div>
                  </div>
                }
              </div>
            </div>
          }
        </div>
      }

      <!-- Comic Book Metadata Section -->
      @if (isCBX(book)) {
        <div class="collapsible-section" [class.expanded]="comicSectionExpanded">
          <div class="collapsible-header" (click)="comicSectionExpanded = !comicSectionExpanded">
            <i class="pi pi-bolt"></i>
            <span>{{ t('comicBookDetails') }}</span>
            <i [class]="comicSectionExpanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'" class="section-toggle"></i>
          </div>
          @if (comicSectionExpanded) {
            <div class="collapsible-content">
              <!-- Text/number/boolean fields in grid -->
              <div class="comic-text-grid">
                @for (field of comicTextFields; track field) {
                  <div class="field-group">
                    <label>{{ field.label }} @if (isEmbeddable(field.controlName, book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                    <div class="field-with-lock">
                      @if (field.type === 'boolean') {
                        <p-select [formControlName]="field.controlName" [options]="booleanOptions" optionLabel="label" optionValue="value" size="small" appendTo="body"></p-select>
                      } @else {
                        <input pSize="small" pInputText [formControlName]="field.controlName"/>
                      }
                      @if (!metadataForm.get(field.lockedKey)?.value) {
                        <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock(field.controlName)" severity="success"></p-button>
                      }
                      @if (metadataForm.get(field.lockedKey)?.value) {
                        <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock(field.controlName)" severity="warn"></p-button>
                      }
                    </div>
                  </div>
                }
              </div>

              <!-- Array fields (creators, characters, teams, locations) -->
              <div class="comic-array-grid">
                @for (field of comicArrayFields; track field) {
                  <div class="field-group">
                    <label>{{ field.label }} @if (isEmbeddable(field.controlName, book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                    <div class="field-with-lock">
                      <div class="autocomplete-wrapper">
                        <p-autoComplete
                          [formControlName]="field.controlName"
                          [multiple]="true"
                          [dropdown]="false"
                          [suggestions]="[]"
                          [forceSelection]="false"
                          [showClear]="true"
                          (onKeyUp)="onAutoCompleteKeyUp(field.controlName, $event)"
                          (onSelect)="onAutoCompleteSelect(field.controlName, $event)">
                        </p-autoComplete>
                      </div>
                      @if (!metadataForm.get(field.lockedKey)?.value) {
                        <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock(field.controlName)" severity="success"></p-button>
                      }
                      @if (metadataForm.get(field.lockedKey)?.value) {
                        <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock(field.controlName)" severity="warn"></p-button>
                      }
                    </div>
                  </div>
                }
              </div>

              <!-- Textarea fields (notes) -->
              @for (field of comicTextareaFields; track field) {
                <div class="field-row comic-array-row">
                  <div class="field-group full-width">
                    <label>{{ field.label }} @if (isEmbeddable(field.controlName, book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                    <div class="field-with-lock description-with-lock">
                      <textarea pTextarea [formControlName]="field.controlName" rows="4"></textarea>
                      @if (!metadataForm.get(field.lockedKey)?.value) {
                        <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock(field.controlName)" severity="success"></p-button>
                      }
                      @if (metadataForm.get(field.lockedKey)?.value) {
                        <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock(field.controlName)" severity="warn"></p-button>
                      }
                    </div>
                  </div>
                </div>
              }
            </div>
          }
        </div>
      }

      <!-- Provider Metadata Section (collapsible) -->
      <div class="collapsible-section" [class.expanded]="providerSectionExpanded">
        <div class="collapsible-header" (click)="providerSectionExpanded = !providerSectionExpanded">
          <i class="pi pi-database"></i>
          <span>{{ t('providerMetadata') }}</span>
          <i [class]="providerSectionExpanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'" class="section-toggle"></i>
        </div>
        @if (providerSectionExpanded) {
          <div class="collapsible-content">
            <div class="field-row metadata-ids-row">
              @if (isFieldVisible('asin')) {
                <div class="field-group metadata-id-field">
                  <label for="asin">{{ t('amazonAsin') }} @if (isEmbeddable('asin', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="asin" formControlName="asin"/>
                    @if (!book.metadata!['asinLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('asin')" severity="success"></p-button>
                    }
                    @if (book.metadata!['asinLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('asin')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('amazonRating')) {
                <div class="field-group metadata-id-field">
                  <label for="amazonRating">{{ t('amazonRating') }} @if (isEmbeddable('amazonRating', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="amazonRating" formControlName="amazonRating"/>
                    @if (!book.metadata!['amazonRatingLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('amazonRating')" severity="success"></p-button>
                    }
                    @if (book.metadata!['amazonRatingLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('amazonRating')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('amazonReviewCount')) {
                <div class="field-group metadata-id-field">
                  <label for="amazonRatingCount">{{ t('amazonReviewCount') }} @if (isEmbeddable('amazonReviewCount', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="amazonRatingCount" formControlName="amazonReviewCount"/>
                    @if (!book.metadata!['amazonReviewCountLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('amazonReviewCount')" severity="success"></p-button>
                    }
                    @if (book.metadata!['amazonReviewCountLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('amazonReviewCount')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('googleId')) {
                <div class="field-group metadata-id-field">
                  <label for="googleId">{{ t('googleBooksId') }} @if (isEmbeddable('googleId', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="googleId" formControlName="googleId"/>
                    @if (!book.metadata!['googleIdLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('googleId')" severity="success"></p-button>
                    }
                    @if (book.metadata!['googleIdLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('googleId')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('goodreadsId')) {
                <div class="field-group metadata-id-field">
                  <label for="goodreadsId">{{ t('goodreadsId') }} @if (isEmbeddable('goodreadsId', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="goodreadsId" formControlName="goodreadsId"/>
                    @if (!book.metadata!['goodreadsIdLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('goodreadsId')" severity="success"></p-button>
                    }
                    @if (book.metadata!['goodreadsIdLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('goodreadsId')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('goodreadsRating')) {
                <div class="field-group metadata-id-field">
                  <label for="goodreadsRating">{{ t('goodreadsRating') }} @if (isEmbeddable('goodreadsRating', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="goodreadsRating" formControlName="goodreadsRating"/>
                    @if (!book.metadata!['goodreadsRatingLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('goodreadsRating')" severity="success"></p-button>
                    }
                    @if (book.metadata!['goodreadsRatingLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('goodreadsRating')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('goodreadsReviewCount')) {
                <div class="field-group metadata-id-field">
                  <label for="goodreadsReviewCount">{{ t('goodreadsReviewCount') }} @if (isEmbeddable('goodreadsReviewCount', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="goodreadsReviewCount" formControlName="goodreadsReviewCount"/>
                    @if (!book.metadata!['goodreadsReviewCountLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('goodreadsReviewCount')" severity="success"></p-button>
                    }
                    @if (book.metadata!['goodreadsReviewCountLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('goodreadsReviewCount')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('hardcoverId')) {
                <div class="field-group metadata-id-field">
                  <label for="hardcoverId">{{ t('hardcoverId') }} @if (isEmbeddable('hardcoverId', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="hardcoverId" formControlName="hardcoverId"/>
                    @if (!book.metadata!['hardcoverIdLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('hardcoverId')" severity="success"></p-button>
                    }
                    @if (book.metadata!['hardcoverIdLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('hardcoverId')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('hardcoverBookId')) {
                <div class="field-group metadata-id-field">
                  <label for="hardcoverBookId">{{ t('hardcoverBookId') }} @if (isEmbeddable('hardcoverBookId', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="hardcoverBookId" formControlName="hardcoverBookId"/>
                    @if (!book.metadata!['hardcoverBookIdLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('hardcoverBookId')" severity="success"></p-button>
                    }
                    @if (book.metadata!['hardcoverBookIdLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('hardcoverBookId')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('hardcoverRating')) {
                <div class="field-group metadata-id-field">
                  <label for="hardcoverRating">{{ t('hardcoverRating') }} @if (isEmbeddable('hardcoverRating', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="hardcoverRating" formControlName="hardcoverRating"/>
                    @if (!book.metadata!['hardcoverRatingLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('hardcoverRating')" severity="success"></p-button>
                    }
                    @if (book.metadata!['hardcoverRatingLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('hardcoverRating')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('hardcoverReviewCount')) {
                <div class="field-group metadata-id-field">
                  <label for="hardcoverReviewCount">{{ t('hardcoverReviewCount') }} @if (isEmbeddable('hardcoverReviewCount', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="hardcoverReviewCount" formControlName="hardcoverReviewCount"/>
                    @if (!book.metadata!['hardcoverReviewCountLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('hardcoverReviewCount')" severity="success"></p-button>
                    }
                    @if (book.metadata!['hardcoverReviewCountLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('hardcoverReviewCount')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('lubimyczytacId')) {
                <div class="field-group metadata-id-field">
                  <label for="lubimyczytacId">{{ t('lubimyczytacId') }} @if (isEmbeddable('lubimyczytacId', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="lubimyczytacId" formControlName="lubimyczytacId"/>
                    @if (!book.metadata!['lubimyczytacIdLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('lubimyczytacId')" severity="success"></p-button>
                    }
                    @if (book.metadata!['lubimyczytacIdLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('lubimyczytacId')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('lubimyczytacRating')) {
                <div class="field-group metadata-id-field">
                  <label for="lubimyczytacRating">{{ t('lubimyczytacRating') }} @if (isEmbeddable('lubimyczytacRating', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="lubimyczytacRating" formControlName="lubimyczytacRating"/>
                    @if (!book.metadata!['lubimyczytacRatingLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('lubimyczytacRating')" severity="success"></p-button>
                    }
                    @if (book.metadata!['lubimyczytacRatingLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('lubimyczytacRating')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('comicvineId')) {
                <div class="field-group metadata-id-field">
                  <label for="comicvineId">{{ t('comicvineId') }} @if (isEmbeddable('comicvineId', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="comicvineId" formControlName="comicvineId"/>
                    @if (!book.metadata!['comicvineIdLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('comicvineId')" severity="success"></p-button>
                    }
                    @if (book.metadata!['comicvineIdLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('comicvineId')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('ranobedbId')) {
                <div class="field-group metadata-id-field">
                  <label for="ranobedbId">{{ t('ranobedbId') }} @if (isEmbeddable('ranobedbId', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="ranobedbId" formControlName="ranobedbId"/>
                    @if (!book.metadata!['ranobedbIdLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('ranobedbId')" severity="success"></p-button>
                    }
                    @if (book.metadata!['ranobedbIdLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('ranobedbId')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('ranobedbRating')) {
                <div class="field-group metadata-id-field">
                  <label for="ranobedbRating">{{ t('ranobedbRating') }} @if (isEmbeddable('ranobedbRating', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="ranobedbRating" formControlName="ranobedbRating"/>
                    @if (!book.metadata!['ranobedbRatingLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('ranobedbRating')" severity="success"></p-button>
                    }
                    @if (book.metadata!['ranobedbRatingLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('ranobedbRating')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('audibleId')) {
                <div class="field-group metadata-id-field">
                  <label for="audibleId">{{ t('audibleId') }} @if (isEmbeddable('audibleId', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="audibleId" formControlName="audibleId"/>
                    @if (!book.metadata!['audibleIdLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('audibleId')" severity="success"></p-button>
                    }
                    @if (book.metadata!['audibleIdLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('audibleId')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('audibleRating')) {
                <div class="field-group metadata-id-field">
                  <label for="audibleRating">{{ t('audibleRating') }} @if (isEmbeddable('audibleRating', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="audibleRating" formControlName="audibleRating"/>
                    @if (!book.metadata!['audibleRatingLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('audibleRating')" severity="success"></p-button>
                    }
                    @if (book.metadata!['audibleRatingLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('audibleRating')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
              @if (isFieldVisible('audibleReviewCount')) {
                <div class="field-group metadata-id-field">
                  <label for="audibleReviewCount">{{ t('audibleReviewCount') }} @if (isEmbeddable('audibleReviewCount', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
                  <div class="field-with-lock">
                    <input pSize="small" pInputText id="audibleReviewCount" formControlName="audibleReviewCount"/>
                    @if (!book.metadata!['audibleReviewCountLocked']) {
                      <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('audibleReviewCount')" severity="success"></p-button>
                    }
                    @if (book.metadata!['audibleReviewCountLocked']) {
                      <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('audibleReviewCount')" severity="warn"></p-button>
                    }
                  </div>
                </div>
              }
            </div>
          </div>
        }
      </div>

      <div class="description-section">
        <div class="field-group description-field">
          <label for="description">{{ t('description') }} @if (isEmbeddable('description', book)) { <i class="pi pi-file-export embeddable-indicator" [pTooltip]="t('writtenToFileTooltip')" tooltipPosition="top"></i> }</label>
          <div class="field-with-lock description-with-lock">
                <textarea
                  id="description"
                  pTextarea
                  formControlName="description"
                  rows="10">
                </textarea>
            @if (!book.metadata!['descriptionLocked']) {
              <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('description')" severity="success"></p-button>
            }
            @if (book.metadata!['descriptionLocked']) {
              <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('description')" severity="warn"></p-button>
            }
          </div>
        </div>
      </div>
    </div>
    <div class="form-footer">
      <p-divider></p-divider>
      <div class="footer-actions">

        <!-- Desktop Buttons -->
        <div class="desktop-actions">
          @if (showNavigationButtons) {
            <div class="navigation-left">
              <p-button [label]="t('closeBtn')" icon="pi pi-times" [outlined]="true" severity="danger" (onClick)="closeDialog()"></p-button>
              <p-divider layout="vertical"/>
              <p-button [label]="t('previousBookBtn')" [disabled]="disablePrevious" icon="pi pi-arrow-left" [outlined]="true" severity="info" (onClick)="onPrevious()"></p-button>
              <p-button [label]="t('nextBookBtn')" [disabled]="disableNext" icon="pi pi-arrow-right" iconPos="right" [outlined]="true" severity="info" (onClick)="onNext()"></p-button>
            </div>
          }

          @if (navigationState$ | async) {
            <div class="navigation-center">
              <p-button
                icon="pi pi-chevron-left"
                [disabled]="!canNavigatePrevious()"
                (onClick)="navigatePrevious()"
                rounded
                outlined
                severity="info"
                [pTooltip]="t('previousBookTooltip')"
                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('nextBookTooltip')"
                tooltipPosition="bottom">
              </p-button>
            </div>
          }

          <div class="actions-right">
            @if (!book.isPhysical) {
              <p-button
                [label]="isFetchingFromFile ? t('fetchingBtn') : t('fetchFromFileBtn')"
                [icon]="isFetchingFromFile ? 'pi pi-spin pi-spinner' : 'pi pi-file'"
                [outlined]="true"
                severity="secondary"
                (onClick)="fetchFromFile(book.id)"
                [disabled]="isFetchingFromFile"
                [pTooltip]="t('fetchFromFileTooltip')"
                tooltipPosition="top">
              </p-button>
            }
            <p-button
              [label]="isAutoFetching ? t('fetchingBtn') : t('autoFetchBtn')"
              [icon]="isAutoFetching ? 'pi pi-spin pi-spinner' : 'pi pi-bolt'"
              [outlined]="true"
              severity="info"
              (onClick)="autoFetch(book.id)"
              [disabled]="isAutoFetching"
              [pTooltip]="t('autoFetchTooltip')"
              tooltipPosition="top">
            </p-button>
            <p-divider layout="vertical"/>
            <p-button [label]="t('unlockAllBtn')" icon="pi pi-lock-open" [outlined]="true" severity="success" (onClick)="unlockAll()" [pTooltip]="t('unlockAllTooltip')" tooltipPosition="top"></p-button>
            <p-button [label]="t('lockAllBtn')" icon="pi pi-lock" [outlined]="true" severity="warn" (onClick)="lockAll()" [pTooltip]="t('lockAllTooltip')" tooltipPosition="top"></p-button>
            <p-divider layout="vertical"/>
            <p-button [label]="t('saveBtn')" icon="pi pi-check" [loading]="isSaving" [disabled]="isSaving" (onClick)="onSave()"></p-button>
          </div>
        </div>

        <!-- Mobile Buttons -->
        <div class="mobile-actions">
          @if (showNavigationButtons) {
            <div class="mobile-nav-buttons">
              <p-button size="small" icon="pi pi-times" [outlined]="true" severity="danger" (onClick)="closeDialog()" [pTooltip]="t('closeBtn')" tooltipPosition="top"></p-button>
              <p-button size="small" icon="pi pi-arrow-left" [disabled]="disablePrevious" [outlined]="true" severity="info" (onClick)="onPrevious()" [pTooltip]="t('previousBookBtn')" tooltipPosition="top"></p-button>
              <p-button size="small" icon="pi pi-arrow-right" [disabled]="disableNext" iconPos="right" [outlined]="true" severity="info" (onClick)="onNext()" [pTooltip]="t('nextBookBtn')" tooltipPosition="top"></p-button>
            </div>
          }

          <div class="mobile-actions-row">
            @if (navigationState$ | async) {
              <div class="navigation-center">
                <p-button
                  icon="pi pi-chevron-left"
                  [disabled]="!canNavigatePrevious()"
                  (onClick)="navigatePrevious()"
                  rounded
                  outlined
                  severity="info"
                  [pTooltip]="t('previousBookTooltip')"
                  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('nextBookTooltip')"
                  tooltipPosition="bottom">
                </p-button>
              </div>
            }
            <div class="mobile-lock-actions">
              @if (!book.isPhysical) {
                <p-button
                  icon="pi pi-file"
                  [outlined]="true"
                  severity="secondary"
                  (onClick)="fetchFromFile(book.id)"
                  [disabled]="isFetchingFromFile"
                  [pTooltip]="t('fetchFromFileBtn')"
                  tooltipPosition="top">
                </p-button>
              }
              <p-button
                icon="pi pi-bolt"
                [outlined]="true"
                severity="info"
                (onClick)="autoFetch(book.id)"
                [disabled]="isAutoFetching"
                [pTooltip]="t('autoFetchBtn')"
                tooltipPosition="top">
              </p-button>

              <p-button
                icon="pi pi-lock-open"
                [outlined]="true"
                severity="success"
                (onClick)="unlockAll()"
                [pTooltip]="t('unlockAllBtn')"
                tooltipPosition="top">
              </p-button>

              <p-button
                icon="pi pi-lock"
                [outlined]="true"
                severity="warn"
                (onClick)="lockAll()"
                [pTooltip]="t('lockAllBtn')"
                tooltipPosition="top">
              </p-button>
            </div>

            <div class="mobile-save-action">
              <p-button
                [label]="t('saveBtn')"
                icon="pi pi-check"
                [loading]="isSaving"
                [disabled]="isSaving"
                (onClick)="onSave()">
              </p-button>
            </div>
          </div>
        </div>


      </div>
    </div>
  </form>
}