@if (fetchedMetadata && fetchedMetadata.title) {
  <form [formGroup]="metadataForm" class="metapicker flex flex-col w-full">
    <div class="flex-grow overflow-auto">
      <div class="metaheader relative flex items-center">
        <label class="md:w-[8rem]"></label>
        <div class="flex w-full items-center">
          <p class="w-1/2 pr-3" style="text-align:right">File Metadata</p>
          <div class="midbuttons">
            <p-button
              size="small"
              severity="success"
              icon="pi pi-angle-left"
              class="mx-2"
              [outlined]="true"
              pTooltip="Copy missing fields from fetched metadata"
              tooltipPosition="bottom"
              (onClick)="copyMissing()"
            ></p-button>
            <p-button
              size="small"
              severity="success"
              icon="pi pi-angle-double-left"
              class="mx-2"
              [outlined]="true"
              pTooltip="Overwrite all fields with fetched metadata"
              tooltipPosition="bottom"
              (onClick)="copyAll()"
            ></p-button>
          </div>
          <p class="w-1/2 pl-3">Fetched</p>
        </div>
        <div class="ml-auto absolute" style="right:1rem">
          <p-button
            size="small"
            severity="warn"
            icon="pi pi-refresh"
            [outlined]="true"
            pTooltip="Reset all fields to original values"
            tooltipPosition="left"
            (onClick)="confirmReset()"
          ></p-button>
        </div>
      </div>
      <div class="metacontent">
        <div class="meta-row flex items-center">
          <label class="md:w-[8rem] text-sm">Cover</label>
          <div class="flex w-full items-center justify-center">
            <p-image class="thumbnail" [src]="metadataForm.get('thumbnailUrl')?.value" alt="Image" appendTo="body" lazyLoad [preview]="true"></p-image>
            <input type="hidden" id="thumbnailUrl" formControlName="thumbnailUrl" class="md:!w-1/2"/>
            <p-button
              size="small"
              [icon]="isValueSaved('thumbnailUrl') ? 'pi pi-check' : (hoveredFields['thumbnailUrl'] && isValueCopied('thumbnailUrl') ? 'pi pi-times' : 'pi pi-arrow-left')"
              [outlined]="true"
              [ngClass]="
              {
                'green-outlined-button': isValueCopied('thumbnailUrl') && !hoveredFields['thumbnailUrl'],
                'red-outlined-button': isValueCopied('thumbnailUrl') && hoveredFields['thumbnailUrl']
              }"
              class="arrow-button"
              (click)="hoveredFields['thumbnailUrl'] && isValueCopied('thumbnailUrl') ? resetField('thumbnailUrl') : copyFetchedToCurrent('thumbnailUrl')"
              (mouseenter)="onMouseEnter('thumbnailUrl')"
              (mouseleave)="onMouseLeave('thumbnailUrl')"/>
            <input type="hidden" [value]="fetchedMetadata.thumbnailUrl" class="md:!w-1/2" readonly/>
            <p-image class="thumbnail" [src]="fetchedMetadata.thumbnailUrl!" alt="Image" appendTo="body" lazyLoad [preview]="true"></p-image>
          </div>
        </div>
        @for (field of metadataFieldsTop; track field) {
          <div class="meta-row flex items-center field-{{field.controlName}}">
            <label for="{{field.controlName}}" class="md:w-[8rem] text-sm">{{ field.label }}</label>
            <div class="meta-fields flex w-full">
              <input
                pSize="small"
                fluid
                pInputText
                id="{{field.controlName}}"
                formControlName="{{field.controlName}}"
                class="dest md:!w-1/2"
                [ngClass]="{
                  'outlined-input-green': isValueCopied(field.controlName) && !hoveredFields[field.controlName],
                }"
              />
              <p-button
                size="small"
                [icon]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"
                [outlined]="true"
                [ngClass]="
                {
                  'green-outlined-button': isValueCopied(field.controlName) && !hoveredFields[field.controlName],
                  'red-outlined-button': isValueCopied(field.controlName) && hoveredFields[field.controlName],
                  'notneeded' : !fetchedMetadata[field.fetchedKey]
                }"
                class="arrow-button"
                (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                (mouseenter)="onMouseEnter(field.controlName)"
                (mouseleave)="onMouseLeave(field.controlName)"/>
              <input 
                pSize="small"
                pInputText
                [value]="fetchedMetadata[field.fetchedKey] ?? null"
                class="src md:!w-1/2"
                disabled
                [ngClass]="{
                  'notneeded': !fetchedMetadata[field.fetchedKey],
                }"/>
            </div>
          </div>
        }
        @for (field of metadataChips; track field) {
          <div class="meta-row flex items-center field-{{field.controlName}}">
            <label for="{{field.controlName}}" class="md:w-[8rem] text-sm">{{ field.label }}</label>
            <div class="meta-fields flex w-full items-center">
              <p-autoComplete
                size="small"
                formControlName="{{field.controlName}}"
                [multiple]="true"
                [typeahead]="false"
                [dropdown]="false"
                [forceSelection]="false"
                class="dest w-full"
                [ngClass]="{'outlined-input-green': isValueCopied(field.controlName) && !hoveredFields[field.controlName]}"
                (onBlur)="onAutoCompleteBlur(field.controlName, $event)"/>
              <p-button
                size="small"
                [icon]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"
                [outlined]="true"
                [ngClass]="
                {
                  'green-outlined-button': isValueCopied(field.controlName) && !hoveredFields[field.controlName],
                  'red-outlined-button': isValueCopied(field.controlName) && hoveredFields[field.controlName],
                  'notneeded' : !fetchedMetadata[field.fetchedKey]
                }"
                class="arrow-button"
                (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                (mouseenter)="onMouseEnter(field.controlName)"
                (mouseleave)="onMouseLeave(field.controlName)"/>
              <p-autoComplete
                size="small"
                [ngModel]="fetchedMetadata[field.fetchedKey] ?? []"
                [ngModelOptions]="{standalone:true}"
                [disabled]="true"
                [multiple]="true"
                [typeahead]="false"
                [dropdown]="false"
                [forceSelection]="false"
                class="src w-full"
                [ngClass]="{
                  'notneeded': !fetchedMetadata[field.fetchedKey],
                }"/>
            </div>
          </div>
        }
        @for (field of metadataDescription; track field) {
          <div class="meta-row flex items-center field-{{field.controlName}}">
            <label for="{{field.controlName}}" class="md:w-[8rem] text-sm">{{ field.label }}</label>
            <div class="meta-fields flex w-full items-center">
              <textarea
                rows="4"
                pSize="small"
                pTextarea
                id="{{field.controlName}}"
                formControlName="{{field.controlName}}"
                class="dest md:!w-1/2"
                [ngClass]="{'outlined-input-green': isValueCopied(field.controlName) && !hoveredFields[field.controlName]}"
              ></textarea>
              <p-button
                size="small"
                [icon]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"
                [outlined]="true"
                [ngClass]="
                {
                  'green-outlined-button': isValueCopied(field.controlName) && !hoveredFields[field.controlName],
                  'red-outlined-button': isValueCopied(field.controlName) && hoveredFields[field.controlName],
                  'notneeded' : !fetchedMetadata[field.fetchedKey]
                }"
                class="arrow-button"
                (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                (mouseenter)="onMouseEnter(field.controlName)"
                (mouseleave)="onMouseLeave(field.controlName)"/>
              <textarea
                rows="4"
                pSize="small"
                pInputText
                [value]="fetchedMetadata[field.fetchedKey] ?? null"
                class="src md:!w-1/2"
                disabled
                [ngClass]="{
                  'notneeded': !fetchedMetadata[field.fetchedKey],
                }"></textarea>
            </div>
          </div>
        }
        @for (field of metadataFieldsBottom; track field) {
          <div class="meta-row flex items-cente field-{{field.controlName}}">
            <label for="{{field.controlName}}" class="md:w-[8rem] text-sm">{{ field.label }}</label>
            <div class="meta-fields flex w-full">
              <input
                pInputText
                pSize="small"
                id="{{field.controlName}}"
                formControlName="{{field.controlName}}"
                class="dest md:!w-1/2"
                [ngClass]="{
                  'outlined-input-green': isValueCopied(field.controlName) && !hoveredFields[field.controlName],
                }"
              />
              <p-button
                size="small"
                [icon]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"
                [outlined]="true"
                [ngClass]="
                {
                  'green-outlined-button': isValueCopied(field.controlName) && !hoveredFields[field.controlName],
                  'red-outlined-button': isValueCopied(field.controlName) && hoveredFields[field.controlName],
                  'notneeded' : !fetchedMetadata[field.fetchedKey]
                }"
                class="arrow-button"
                (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                (mouseenter)="onMouseEnter(field.controlName)"
                (mouseleave)="onMouseLeave(field.controlName)"/>
              <input
                pInputText
                pSize="small"
                [value]="fetchedMetadata[field.fetchedKey] ?? null"
                class="src md:!w-1/2"
                disabled
                [ngClass]="{
                  'notneeded': !fetchedMetadata[field.fetchedKey],
                }"/>
            </div>
          </div>
        }
      </div>
    </div>
  </form>
} @else {
  <form [formGroup]="metadataForm" class="metaeditor flex w-full">
    <div class="flex-grow overflow-auto">
      <div class="metaheader relative flex items-center">
        <p class="text-sm flex items-center" style="gap: 0.5rem">
          Unable to fetch metadata for this file
        </p>
        <p-button
          size="small"
          severity="warn"
          icon="pi pi-refresh"
          [outlined]="true"
          pTooltip="Reset all fields to original values"
          tooltipPosition="left"
          (onClick)="confirmReset()"
        ></p-button>
      </div>
      <div class="flex flex-col p-4 md:flex-row">
        <div class="flex items-start justify-center md:w-[20%] md:h-full">
          <div class="w-full md:h-full">
            <img 
              [src]="metadataForm.get('thumbnailUrl')?.value"
              alt="Book Thumbnail"
              class="thumbnail w-full md:h-full object-contain"
            />
            <input type="hidden" id="thumbnailUrl" formControlName="thumbnailUrl"/>
          </div>
        </div>

        <div class="metacontent md:w-[80%]">
          @for (field of metadataFieldsTop; track field) {
            <div class="meta-row flex items-center">
              <label for="{{field.controlName}}" class="w-[8rem] text-sm">{{ field.label }}</label>
              <div class="flex w-full">
                <input
                  pSize="small"
                  fluid
                  pInputText
                  id="{{field.controlName}}"
                  formControlName="{{field.controlName}}"
                />
              </div>
            </div>
          }

          @for (field of metadataChips; track field) {
            <div class="meta-row flex items-center">
              <label for="{{field.controlName}}" class="w-[8rem] text-sm">{{ field.label }}</label>
              <div class="flex w-full">
                <p-autoComplete formControlName="{{field.controlName}}" [multiple]="true" [typeahead]="false" [dropdown]="false" [forceSelection]="false" class="w-full" (onBlur)="onAutoCompleteBlur(field.controlName, $event)"></p-autoComplete>
              </div>
            </div>
          }

          @for (field of metadataDescription; track field) {
            <div class="meta-row flex items-center">
              <label for="{{field.controlName}}" class="w-[8rem] text-sm">{{ field.label }}</label>
              <div class="flex w-full">
                <textarea fluid rows="4" pSize="small" pTextarea id="{{field.controlName}}" formControlName="{{field.controlName}}"></textarea>
              </div>
            </div>
          }

          @for (field of metadataFieldsBottom; track field) {
            <div class="meta-row flex items-center">
              <label for="{{field.controlName}}" class="w-[8rem] text-sm">{{ field.label }}</label>
              <div class="flex w-full">
                <input
                  fluid
                  pInputText
                  pSize="small"
                  id="{{field.controlName}}"
                  formControlName="{{field.controlName}}"
                />
              </div>
            </div>
          }
        </div>
      </div>  
    </div>
  </form>
}
