@if (book$ | async; as book) {
  <form [formGroup]="metadataForm" (ngSubmit)="onSave()" class="metadata-picker" *transloco="let t; prefix: 'metadata.picker'">
    <div class="dialog-body">
      @if (detailLoading) {
        <div class="detail-loading-banner">
          <i class="pi pi-spin pi-spinner"></i>
          <span>{{ t('loadingMetadata') }}</span>
        </div>
      }

      <!-- Column Headers -->
      <div class="column-headers">
        <div class="column-label current">
          <i class="pi pi-file-edit"></i>
          <span>{{ t('columnCurrent') }}</span>
        </div>
        <div class="column-actions">
          <p-button
            icon="pi pi-angle-left"
            [rounded]="true"
            [outlined]="true"
            severity="secondary"
            [pTooltip]="t('copyMissingTooltip')"
            tooltipPosition="bottom"
            (onClick)="copyMissing()"
          />
          <p-button
            icon="pi pi-angle-double-left"
            [rounded]="true"
            [outlined]="true"
            severity="primary"
            [pTooltip]="t('copyAllTooltip')"
            tooltipPosition="bottom"
            (onClick)="copyAll()"
          />
        </div>
        <div class="column-label fetched">
          <i class="pi pi-cloud-download"></i>
          <span>{{ t('columnFetched') }}</span>
        </div>
      </div>

      <!-- Cover Image Section -->
      <section class="form-section">
        <div class="section-header">
          <i class="pi pi-image"></i>
          <span>{{ t('sectionCoverImage') }}</span>
        </div>

        <div class="section-content" [class.dual-covers-section]="currentBook && supportsDualCovers(currentBook)">
          <!-- Ebook Cover Row -->
          @if (!currentBook || hasEbookFormat(currentBook)) {
            <div class="field-row cover-field-row">
              <label class="field-label">
                @if (currentBook && supportsDualCovers(currentBook)) {
                  <i class="pi pi-book cover-type-icon"></i> {{ t('coverLabelEbook') }}
                } @else {
                  {{ t('coverLabel') }}
                }
              </label>
              <div class="field-content">
                <div class="field-side current cover-side">
                  <span class="cover-label mobile-only">{{ t('mobileCurrentLabel') }}</span>
                  <div class="cover-wrapper">
                    <p-image
                      class="cover-image"
                      [src]="metadataForm.get('thumbnailUrl')?.value"
                      [alt]="t('currentCoverAlt')"
                      appendTo="body"
                      lazyLoad
                      [preview]="true"
                    />
                    <button
                      type="button"
                      class="lock-badge"
                      [class.locked]="metadataForm.get('coverLocked')?.value"
                      (click)="toggleLock('thumbnailUrl')"
                      [pTooltip]="metadataForm.get('coverLocked')?.value ? t('unlockCoverTooltip') : t('lockCoverTooltip')"
                      tooltipPosition="top"
                    >
                      <i [class]="metadataForm.get('coverLocked')?.value ? 'pi pi-lock' : 'pi pi-lock-open'"></i>
                    </button>
                  </div>
                </div>

                <button
                  type="button"
                  class="transfer-btn"
                  [class.saved]="isValueSaved('thumbnailUrl')"
                  [class.copied]="isValueCopied('thumbnailUrl') && !hoveredFields['thumbnailUrl']"
                  [class.reset]="isValueCopied('thumbnailUrl') && hoveredFields['thumbnailUrl']"
                  (click)="hoveredFields['thumbnailUrl'] && isValueCopied('thumbnailUrl') ? resetField('thumbnailUrl') : copyFetchedToCurrent('thumbnailUrl')"
                  (mouseenter)="onMouseEnter('thumbnailUrl')"
                  (mouseleave)="onMouseLeave('thumbnailUrl')"
                >
                  <i [class]="isValueSaved('thumbnailUrl') ? 'pi pi-check' : (hoveredFields['thumbnailUrl'] && isValueCopied('thumbnailUrl') ? 'pi pi-times' : 'pi pi-arrow-left')"></i>
                </button>

                <div class="field-side fetched cover-side">
                  <span class="cover-label mobile-only">{{ t('mobileFetchedLabel') }}</span>
                  <div class="cover-wrapper">
                    <p-image
                      class="cover-image"
                      [src]="fetchedMetadata.thumbnailUrl!"
                      [alt]="t('fetchedCoverAlt')"
                      appendTo="body"
                      lazyLoad
                      [preview]="true"
                    />
                  </div>
                </div>
              </div>
            </div>
          }

          <!-- Audiobook Cover Row -->
          @if (currentBook && hasAudiobookFormat(currentBook)) {
            <div class="field-row cover-field-row audiobook-cover-row">
              <label class="field-label">
                <i class="pi pi-headphones cover-type-icon"></i> {{ t('coverLabelAudiobook') }}
              </label>
              <div class="field-content">
                <div class="field-side current cover-side">
                  <span class="cover-label mobile-only">{{ t('mobileCurrentLabel') }}</span>
                  <div class="cover-wrapper">
                    <p-image
                      class="cover-image square-cover"
                      [src]="metadataForm.get('audiobookThumbnailUrl')?.value"
                      [alt]="t('currentAudiobookCoverAlt')"
                      appendTo="body"
                      lazyLoad
                      [preview]="true"
                    />
                    <button
                      type="button"
                      class="lock-badge"
                      [class.locked]="metadataForm.get('audiobookCoverLocked')?.value"
                      (click)="toggleLock('audiobookThumbnailUrl')"
                      [pTooltip]="metadataForm.get('audiobookCoverLocked')?.value ? t('unlockCoverTooltip') : t('lockCoverTooltip')"
                      tooltipPosition="top"
                    >
                      <i [class]="metadataForm.get('audiobookCoverLocked')?.value ? 'pi pi-lock' : 'pi pi-lock-open'"></i>
                    </button>
                  </div>
                </div>

                @if (isAudibleProvider()) {
                  <button
                    type="button"
                    class="transfer-btn"
                    [class.saved]="isValueSaved('audiobookThumbnailUrl')"
                    [class.copied]="isValueCopied('audiobookThumbnailUrl') && !hoveredFields['audiobookThumbnailUrl']"
                    [class.reset]="isValueCopied('audiobookThumbnailUrl') && hoveredFields['audiobookThumbnailUrl']"
                    (click)="hoveredFields['audiobookThumbnailUrl'] && isValueCopied('audiobookThumbnailUrl') ? resetField('audiobookThumbnailUrl') : copyFetchedToCurrent('audiobookThumbnailUrl')"
                    (mouseenter)="onMouseEnter('audiobookThumbnailUrl')"
                    (mouseleave)="onMouseLeave('audiobookThumbnailUrl')"
                  >
                    <i [class]="isValueSaved('audiobookThumbnailUrl') ? 'pi pi-check' : (hoveredFields['audiobookThumbnailUrl'] && isValueCopied('audiobookThumbnailUrl') ? 'pi pi-times' : 'pi pi-arrow-left')"></i>
                  </button>
                } @else {
                  <div class="transfer-btn-placeholder"></div>
                }

                <div class="field-side fetched cover-side">
                  <span class="cover-label mobile-only">{{ t('mobileFetchedLabel') }}</span>
                  <div class="cover-wrapper">
                    @if (isAudibleProvider()) {
                      <p-image
                        class="cover-image square-cover"
                        [src]="fetchedMetadata.thumbnailUrl!"
                        [alt]="t('fetchedAudiobookCoverAlt')"
                        appendTo="body"
                        lazyLoad
                        [preview]="true"
                      />
                    } @else {
                      <div class="no-cover-placeholder">
                        <i class="pi pi-image"></i>
                        <span>{{ t('na') }}</span>
                      </div>
                    }
                  </div>
                </div>
              </div>
            </div>
          }
        </div>
      </section>

      <!-- Basic Information Section -->
      <section class="form-section">
        <div class="section-header">
          <i class="pi pi-info-circle"></i>
          <span>{{ t('sectionBasicInfo') }}</span>
        </div>

        <div class="section-content">
          @for (field of metadataFieldsTop; track field) {
            <div class="field-row">
              <label class="field-label">{{ field.label }}</label>
              <div class="field-content">
                <div class="field-side current">
                  <button
                    type="button"
                    class="lock-btn"
                    [class.locked]="metadataForm.get(field.lockedKey)?.value"
                    (click)="toggleLock(field.controlName)"
                  >
                    <i [class]="metadataForm.get(field.lockedKey)?.value ? 'pi pi-lock' : 'pi pi-lock-open'"></i>
                  </button>
                  @if (field.controlName === 'publishedDate') {
                    <input pInputText formControlName="{{field.controlName}}" class="field-input" placeholder="YYYY-MM-DD"/>
                  } @else {
                    <input pInputText formControlName="{{field.controlName}}" class="field-input"/>
                  }
                </div>

                <button
                  type="button"
                  class="transfer-btn"
                  [class.saved]="isValueSaved(field.controlName)"
                  [class.copied]="isValueCopied(field.controlName) && !hoveredFields[field.controlName]"
                  [class.reset]="isValueCopied(field.controlName) && hoveredFields[field.controlName]"
                  (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                  (mouseenter)="onMouseEnter(field.controlName)"
                  (mouseleave)="onMouseLeave(field.controlName)"
                >
                  <i [class]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"></i>
                </button>

                <div class="field-side fetched">
                  <input pInputText [value]="fetchedMetadata[field.fetchedKey] ?? ''" class="field-input" readonly/>
                </div>
              </div>
            </div>
          }
        </div>
      </section>

      <!-- Tags & Categories Section -->
      <section class="form-section">
        <div class="section-header">
          <i class="pi pi-tags"></i>
          <span>{{ t('sectionTagsCategories') }}</span>
        </div>

        <div class="section-content">
          @for (field of metadataChips; track field) {
            <div class="field-row">
              <label class="field-label">{{ field.label }}</label>
              <div class="field-content">
                <div class="field-side current">
                  <button
                    type="button"
                    class="lock-btn"
                    [class.locked]="metadataForm.get(field.lockedKey)?.value"
                    (click)="toggleLock(field.controlName)"
                  >
                    <i [class]="metadataForm.get(field.lockedKey)?.value ? 'pi pi-lock' : 'pi pi-lock-open'"></i>
                  </button>
                  @if (field.controlName === 'authors') {
                    <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]="$index === 0" cdkDrag>
                          @if ($index === 0) { <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]="getFiltered('authors')"
                          [forceSelection]="false"
                          [dropdown]="false"
                          (completeMethod)="filterItems($event, 'authors')"
                          (onKeyUp)="onAuthorInputKeyUp($event)"
                          (onSelect)="onAuthorInputSelect($event)"
                          placeholder="Add author..."
                        />
                      }
                    </div>
                  } @else {
                    <p-autoComplete
                      class="chips-input"
                      formControlName="{{field.controlName}}"
                      [multiple]="true"
                      [dropdown]="false"
                      [forceSelection]="false"
                      [showClear]="true"
                      [suggestions]="getFiltered(field.controlName)"
                      (completeMethod)="filterItems($event, field.controlName)"
                      (onKeyUp)="onAutoCompleteKeyUp(field.controlName, $event)"
                      (onSelect)="onAutoCompleteSelect(field.controlName, $event)"
                    />
                  }
                </div>

                <button
                  type="button"
                  class="transfer-btn"
                  [class.saved]="isValueSaved(field.controlName)"
                  [class.copied]="isValueCopied(field.controlName) && !hoveredFields[field.controlName]"
                  [class.reset]="isValueCopied(field.controlName) && hoveredFields[field.controlName]"
                  (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                  (mouseenter)="onMouseEnter(field.controlName)"
                  (mouseleave)="onMouseLeave(field.controlName)"
                >
                  <i [class]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"></i>
                </button>

                <div class="field-side fetched">
                  <p-autoComplete
                    [ngModel]="fetchedMetadata[field.fetchedKey] ?? []"
                    [ngModelOptions]="{ standalone: true }"
                    [disabled]="true"
                    [multiple]="true"
                    [typeahead]="false"
                    [dropdown]="false"
                    [forceSelection]="false"
                    class="chips-input readonly"
                  />
                </div>
              </div>
            </div>
          }
        </div>
      </section>

      <!-- Description Section -->
      <section class="form-section">
        <div class="section-header">
          <i class="pi pi-align-left"></i>
          <span>{{ t('sectionDescription') }}</span>
        </div>

        <div class="section-content">
          @for (field of metadataDescription; track field) {
            <div class="field-row textarea-row">
              <label class="field-label">{{ field.label }}</label>
              <div class="field-content">
                <div class="field-side current">
                  <button
                    type="button"
                    class="lock-btn"
                    [class.locked]="metadataForm.get(field.lockedKey)?.value"
                    (click)="toggleLock(field.controlName)"
                  >
                    <i [class]="metadataForm.get(field.lockedKey)?.value ? 'pi pi-lock' : 'pi pi-lock-open'"></i>
                  </button>
                  <textarea pTextarea formControlName="{{field.controlName}}" class="field-textarea" rows="4"></textarea>
                </div>

                <button
                  type="button"
                  class="transfer-btn"
                  [class.saved]="isValueSaved(field.controlName)"
                  [class.copied]="isValueCopied(field.controlName) && !hoveredFields[field.controlName]"
                  [class.reset]="isValueCopied(field.controlName) && hoveredFields[field.controlName]"
                  (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                  (mouseenter)="onMouseEnter(field.controlName)"
                  (mouseleave)="onMouseLeave(field.controlName)"
                >
                  <i [class]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"></i>
                </button>

                <div class="field-side fetched">
                  <textarea pTextarea [value]="fetchedMetadata[field.fetchedKey] ?? ''" class="field-textarea" rows="4" readonly></textarea>
                </div>
              </div>
            </div>
          }
        </div>
      </section>

      <!-- Series Information Section -->
      <section class="form-section">
        <div class="section-header">
          <i class="pi pi-book"></i>
          <span>{{ t('sectionSeriesInfo') }}</span>
        </div>

        <div class="section-content">
          @for (field of metadataSeriesFields; track field) {
            <div class="field-row">
              <label class="field-label">{{ field.label }}</label>
              <div class="field-content">
                <div class="field-side current">
                  <button
                    type="button"
                    class="lock-btn"
                    [class.locked]="metadataForm.get(field.lockedKey)?.value"
                    (click)="toggleLock(field.controlName)"
                  >
                    <i [class]="metadataForm.get(field.lockedKey)?.value ? 'pi pi-lock' : 'pi pi-lock-open'"></i>
                  </button>
                  <input pInputText formControlName="{{field.controlName}}" class="field-input"/>
                </div>

                <button
                  type="button"
                  class="transfer-btn"
                  [class.saved]="isValueSaved(field.controlName)"
                  [class.copied]="isValueCopied(field.controlName) && !hoveredFields[field.controlName]"
                  [class.reset]="isValueCopied(field.controlName) && hoveredFields[field.controlName]"
                  (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                  (mouseenter)="onMouseEnter(field.controlName)"
                  (mouseleave)="onMouseLeave(field.controlName)"
                >
                  <i [class]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"></i>
                </button>

                <div class="field-side fetched">
                  <input pInputText [value]="fetchedMetadata[field.fetchedKey] ?? ''" class="field-input" readonly/>
                </div>
              </div>
            </div>
          }
        </div>
      </section>

      <!-- Book Details Section -->
      <section class="form-section">
        <div class="section-header">
          <i class="pi pi-id-card"></i>
          <span>{{ t('sectionBookDetails') }}</span>
        </div>

        <div class="section-content">
          @for (field of metadataBookDetailsFields; track field) {
            <div class="field-row">
              <label class="field-label">{{ field.label }}</label>
              <div class="field-content">
                <div class="field-side current">
                  <button
                    type="button"
                    class="lock-btn"
                    [class.locked]="metadataForm.get(field.lockedKey)?.value"
                    (click)="toggleLock(field.controlName)"
                  >
                    <i [class]="metadataForm.get(field.lockedKey)?.value ? 'pi pi-lock' : 'pi pi-lock-open'"></i>
                  </button>
                  <input pInputText formControlName="{{field.controlName}}" class="field-input"/>
                </div>

                <button
                  type="button"
                  class="transfer-btn"
                  [class.saved]="isValueSaved(field.controlName)"
                  [class.copied]="isValueCopied(field.controlName) && !hoveredFields[field.controlName]"
                  [class.reset]="isValueCopied(field.controlName) && hoveredFields[field.controlName]"
                  (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                  (mouseenter)="onMouseEnter(field.controlName)"
                  (mouseleave)="onMouseLeave(field.controlName)"
                >
                  <i [class]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"></i>
                </button>

                <div class="field-side fetched">
                  <input pInputText [value]="fetchedMetadata[field.fetchedKey] ?? ''" class="field-input" readonly/>
                </div>
              </div>
            </div>
          }
        </div>
      </section>

      <!-- Comic Book Details Section -->
      @if (shouldShowComicSection()) {
        <section class="form-section">
          <div class="section-header collapsible-header" (click)="comicSectionExpanded = !comicSectionExpanded">
            <i class="pi pi-bolt"></i>
            <span>{{ t('sectionComicDetails') }}</span>
            @if (!hasAnyFetchedComicData() && !hasAnyCurrentComicData()) {
              <span class="section-empty-badge">{{ t('nonePresent') }}</span>
            }
            <i [class]="comicSectionExpanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'" class="section-toggle"></i>
          </div>

          @if (comicSectionExpanded) {
            <div class="section-content">
              <!-- Comic text/number/boolean fields -->
              @for (field of comicTextFields; track field) {
                <div class="field-row">
                  <label class="field-label">{{ field.label }}</label>
                  <div class="field-content">
                    <div class="field-side current">
                      <button
                        type="button"
                        class="lock-btn"
                        [class.locked]="metadataForm.get(field.lockedKey)?.value"
                        (click)="toggleLock(field.controlName)"
                      >
                        <i [class]="metadataForm.get(field.lockedKey)?.value ? 'pi pi-lock' : 'pi pi-lock-open'"></i>
                      </button>
                      @if (field.type === 'boolean') {
                        <p-checkbox
                          formControlName="{{field.controlName}}"
                          [binary]="true"
                          class="field-checkbox"
                        />
                      } @else {
                        <input pInputText formControlName="{{field.controlName}}" class="field-input"/>
                      }
                    </div>

                    <button
                      type="button"
                      class="transfer-btn"
                      [class.saved]="isValueSaved(field.controlName)"
                      [class.copied]="isValueCopied(field.controlName) && !hoveredFields[field.controlName]"
                      [class.reset]="isValueCopied(field.controlName) && hoveredFields[field.controlName]"
                      (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                      (mouseenter)="onMouseEnter(field.controlName)"
                      (mouseleave)="onMouseLeave(field.controlName)"
                    >
                      <i [class]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"></i>
                    </button>

                    <div class="field-side fetched">
                      @if (field.type === 'boolean') {
                        <p-checkbox
                          [ngModel]="getFetchedComicValue(field.fetchedKey)"
                          [ngModelOptions]="{ standalone: true }"
                          [binary]="true"
                          [disabled]="true"
                          class="field-checkbox"
                        />
                      } @else {
                        <input pInputText [value]="getFetchedComicValue(field.fetchedKey) ?? ''" class="field-input" readonly/>
                      }
                    </div>
                  </div>
                </div>
              }

              <!-- Comic array fields (creators, characters, teams, locations) -->
              @for (field of comicArrayFields; track field) {
                <div class="field-row">
                  <label class="field-label">{{ field.label }}</label>
                  <div class="field-content">
                    <div class="field-side current">
                      <button
                        type="button"
                        class="lock-btn"
                        [class.locked]="metadataForm.get(field.lockedKey)?.value"
                        (click)="toggleLock(field.controlName)"
                      >
                        <i [class]="metadataForm.get(field.lockedKey)?.value ? 'pi pi-lock' : 'pi pi-lock-open'"></i>
                      </button>
                      <p-autoComplete
                        class="chips-input"
                        formControlName="{{field.controlName}}"
                        [multiple]="true"
                        [dropdown]="false"
                        [forceSelection]="false"
                        [showClear]="true"
                        [suggestions]="getFiltered(field.controlName)"
                        (completeMethod)="filterItems($event, field.controlName)"
                        (onKeyUp)="onAutoCompleteKeyUp(field.controlName, $event)"
                        (onSelect)="onAutoCompleteSelect(field.controlName, $event)"
                      />
                    </div>

                    <button
                      type="button"
                      class="transfer-btn"
                      [class.saved]="isValueSaved(field.controlName)"
                      [class.copied]="isValueCopied(field.controlName) && !hoveredFields[field.controlName]"
                      [class.reset]="isValueCopied(field.controlName) && hoveredFields[field.controlName]"
                      (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                      (mouseenter)="onMouseEnter(field.controlName)"
                      (mouseleave)="onMouseLeave(field.controlName)"
                    >
                      <i [class]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"></i>
                    </button>

                    <div class="field-side fetched">
                      <p-autoComplete
                        [ngModel]="getFetchedComicValue(field.fetchedKey) ?? []"
                        [ngModelOptions]="{ standalone: true }"
                        [disabled]="true"
                        [multiple]="true"
                        [typeahead]="false"
                        [dropdown]="false"
                        [forceSelection]="false"
                        class="chips-input readonly"
                      />
                    </div>
                  </div>
                </div>
              }

              <!-- Comic textarea fields (notes) -->
              @for (field of comicTextareaFields; track field) {
                <div class="field-row textarea-row">
                  <label class="field-label">{{ field.label }}</label>
                  <div class="field-content">
                    <div class="field-side current">
                      <button
                        type="button"
                        class="lock-btn"
                        [class.locked]="metadataForm.get(field.lockedKey)?.value"
                        (click)="toggleLock(field.controlName)"
                      >
                        <i [class]="metadataForm.get(field.lockedKey)?.value ? 'pi pi-lock' : 'pi pi-lock-open'"></i>
                      </button>
                      <textarea pTextarea formControlName="{{field.controlName}}" class="field-textarea" rows="3"></textarea>
                    </div>

                    <button
                      type="button"
                      class="transfer-btn"
                      [class.saved]="isValueSaved(field.controlName)"
                      [class.copied]="isValueCopied(field.controlName) && !hoveredFields[field.controlName]"
                      [class.reset]="isValueCopied(field.controlName) && hoveredFields[field.controlName]"
                      (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                      (mouseenter)="onMouseEnter(field.controlName)"
                      (mouseleave)="onMouseLeave(field.controlName)"
                    >
                      <i [class]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"></i>
                    </button>

                    <div class="field-side fetched">
                      <textarea pTextarea [value]="getFetchedComicValue(field.fetchedKey) ?? ''" class="field-textarea" rows="3" readonly></textarea>
                    </div>
                  </div>
                </div>
              }
            </div>
          }
        </section>
      }

      <!-- Audiobook Details Section -->
      @if (currentBook && hasAudiobookFormat(currentBook)) {
        <section class="form-section">
          <div class="section-header">
            <i class="pi pi-headphones"></i>
            <span>{{ t('sectionAudiobookDetails') }}</span>
          </div>

          <div class="section-content">
            @for (field of audiobookMetadataFields; track field) {
              <div class="field-row">
                <label class="field-label">{{ field.label }}</label>
                <div class="field-content">
                  <div class="field-side current">
                    <button
                      type="button"
                      class="lock-btn"
                      [class.locked]="metadataForm.get(field.lockedKey)?.value"
                      (click)="toggleLock(field.controlName)"
                    >
                      <i [class]="metadataForm.get(field.lockedKey)?.value ? 'pi pi-lock' : 'pi pi-lock-open'"></i>
                    </button>
                    @if (field.type === 'boolean') {
                      <p-checkbox
                        formControlName="{{field.controlName}}"
                        [binary]="true"
                        class="field-checkbox"
                      />
                    } @else {
                      <input pInputText formControlName="{{field.controlName}}" class="field-input"/>
                    }
                  </div>

                  <button
                    type="button"
                    class="transfer-btn"
                    [class.saved]="isValueSaved(field.controlName)"
                    [class.copied]="isValueCopied(field.controlName) && !hoveredFields[field.controlName]"
                    [class.reset]="isValueCopied(field.controlName) && hoveredFields[field.controlName]"
                    (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                    (mouseenter)="onMouseEnter(field.controlName)"
                    (mouseleave)="onMouseLeave(field.controlName)"
                  >
                    <i [class]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"></i>
                  </button>

                  <div class="field-side fetched">
                    @if (field.type === 'boolean') {
                      <p-checkbox
                        [ngModel]="getFetchedAudiobookValue(field.fetchedKey)"
                        [ngModelOptions]="{ standalone: true }"
                        [binary]="true"
                        [disabled]="true"
                        class="field-checkbox"
                      />
                    } @else {
                      <input pInputText [value]="getFetchedAudiobookValue(field.fetchedKey) ?? ''" class="field-input" readonly/>
                    }
                  </div>
                </div>
              </div>
            }
          </div>
        </section>
      }

      <!-- Provider Metadata Section -->
      @if (metadataProviderFields.length > 0) {
        <section class="form-section">
          <div class="section-header">
            <i class="pi pi-cloud"></i>
            <span>{{ t('sectionProviderMetadata') }}</span>
          </div>

          <div class="section-content">
            @for (field of metadataProviderFields; track field) {
              <div class="field-row">
                <label class="field-label">{{ field.label }}</label>
                <div class="field-content">
                  <div class="field-side current">
                    <button
                      type="button"
                      class="lock-btn"
                      [class.locked]="metadataForm.get(field.lockedKey)?.value"
                      (click)="toggleLock(field.controlName)"
                    >
                      <i [class]="metadataForm.get(field.lockedKey)?.value ? 'pi pi-lock' : 'pi pi-lock-open'"></i>
                    </button>
                    <input pInputText formControlName="{{field.controlName}}" class="field-input"/>
                  </div>

                  <button
                    type="button"
                    class="transfer-btn"
                    [class.saved]="isValueSaved(field.controlName)"
                    [class.copied]="isValueCopied(field.controlName) && !hoveredFields[field.controlName]"
                    [class.reset]="isValueCopied(field.controlName) && hoveredFields[field.controlName]"
                    (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                    (mouseenter)="onMouseEnter(field.controlName)"
                    (mouseleave)="onMouseLeave(field.controlName)"
                  >
                    <i [class]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"></i>
                  </button>

                  <div class="field-side fetched">
                    <input pInputText [value]="fetchedMetadata[field.fetchedKey] ?? ''" class="field-input" readonly/>
                  </div>
                </div>
              </div>
            }
          </div>
        </section>
      }
    </div>

    @if (!reviewMode) {
      <footer class="dialog-footer">
        <div class="footer-left">
          <p-button
            [label]="t('backToListBtn')"
            icon="pi pi-arrow-left"
            severity="info"
            [outlined]="true"
            (onClick)="goBackClick()"
          />
        </div>
        <div class="footer-right">
          <p-button
            icon="pi pi-lock-open"
            severity="success"
            [outlined]="true"
            [pTooltip]="t('unlockAllTooltip')"
            tooltipPosition="top"
            (onClick)="unlockAll()"
          />
          <p-button
            icon="pi pi-lock"
            severity="warn"
            [outlined]="true"
            [pTooltip]="t('lockAllTooltip')"
            tooltipPosition="top"
            (onClick)="lockAll()"
          />
          <div class="footer-divider"></div>
          <p-button
            [label]="t('saveChangesBtn')"
            [icon]="isSaving ? 'pi pi-spin pi-spinner' : 'pi pi-check'"
            [loading]="isSaving"
            [disabled]="isSaving"
            severity="primary"
            type="submit"
          />
        </div>
      </footer>
    }
  </form>
}