<ng-container *transloco="let t; prefix: 'bookdrop.metadataPicker'">
@if (fetchedMetadata && fetchedMetadata.title) {
  <form [formGroup]="metadataForm" class="metapicker">
    <div class="form-scroll">
      <div class="column-headers">
        <div class="column-label current">
          <span>{{ t('fileData') }}</span>
        </div>
        <div class="column-actions">
          <button
            type="button"
            class="p-button p-button-outlined p-button-sm p-button-icon-only"
            [pTooltip]="t('copyMissingTooltip')"
            tooltipPosition="bottom"
            (click)="copyMissing()"
          >
            <span class="p-button-icon pi pi-angle-left"></span>
          </button>
          <button
            type="button"
            class="p-button p-button-outlined p-button-sm p-button-icon-only"
            [pTooltip]="t('overwriteAllTooltip')"
            tooltipPosition="bottom"
            (click)="copyAll()"
          >
            <span class="p-button-icon pi pi-angle-double-left"></span>
          </button>
          <button
            type="button"
            class="p-button p-button-outlined p-button-sm p-button-icon-only p-button-warn"
            [pTooltip]="t('resetAllTooltip')"
            tooltipPosition="bottom"
            (click)="confirmReset()"
          >
            <span class="p-button-icon pi pi-refresh"></span>
          </button>
        </div>
        <div class="column-label fetched">
          <span>{{ t('fetchedData') }}</span>
        </div>
      </div>
      <div class="metacontent">
        <div class="meta-row field-thumbnail">
          <label class="field-label"></label>
          <div class="thumbnail-row">
            <div class="thumbnail-column">
              @if (metadataForm.get('thumbnailUrl')?.value) {
                <p-image
                  class="thumbnail"
                  [src]="metadataForm.get('thumbnailUrl')?.value"
                  alt="Image"
                  appendTo="body"
                  lazyLoad
                  [preview]="true"
                  [ngClass]="{
                    'changed': isValueCopied('thumbnailUrl'),
                  }"
                ></p-image>
              }
              @else {
                <div class="thumbnail no-cover-text">{{ t('noCoverImage') }}</div>
              }
              <input type="hidden" id="thumbnailUrl" formControlName="thumbnailUrl"/>
            </div>
            <p-button
              size="small"
              [icon]="isValueSaved('thumbnailUrl') ? 'pi pi-check' : (isValueCopied('thumbnailUrl') ? 'pi pi-refresh' : 'pi pi-angle-left')"
              [outlined]="true"
              class="arrow-button"
              [severity]="isValueCopied('thumbnailUrl') ? 'warn' : null"
              [disabled]="!isFetchedDifferent('thumbnailUrl') && !isValueCopied('thumbnailUrl')"
              (click)="isValueCopied('thumbnailUrl') ? resetField('thumbnailUrl') : copyFetchedToCurrent('thumbnailUrl')"
            />
            <div class="thumbnail-column">
              @if (fetchedMetadata.thumbnailUrl) {
                <p-image
                class="thumbnail"
                [src]="fetchedMetadata.thumbnailUrl!"
                alt="Image"
                appendTo="body"
                lazyLoad
                [preview]="true"
                ></p-image>
              }
              @else {
                <div class="thumbnail no-cover-text">{{ t('coverImageNotFound') }}</div>
              }
              <input type="hidden" [value]="fetchedMetadata.thumbnailUrl" readonly/>
            </div>
          </div>
        </div>
        @for (field of metadataFieldsTop; track field) {
          <div class="meta-row field-{{field.controlName}}">
            <label for="{{field.controlName}}" class="field-label">{{ field.label }}</label>
            <div class="meta-fields">
              <input
                pSize="small"
                fluid
                pInputText
                id="{{field.controlName}}"
                formControlName="{{field.controlName}}"
                class="dest"
                [ngClass]="{
                  'changed': isValueChanged(field.controlName),
                }"
              />
              <p-button
                size="small"
                [icon]="isValueSaved(field.controlName) ? 'pi pi-check' : (isValueChanged(field.controlName) || !fetchedMetadata[field.fetchedKey] ? 'pi pi-refresh' : 'pi pi-angle-left')"
                [outlined]="true"
                [ngClass]="{
                  'nosrc' : !fetchedMetadata[field.fetchedKey]
                }"
                class="arrow-button"
                [severity]="isValueChanged(field.controlName) ? 'warn' : null"
                [disabled]="!isFetchedDifferent(field.controlName) && !isValueChanged(field.controlName)"
                (click)="isValueChanged(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
              />
              @if (fetchedMetadata[field.fetchedKey]) {
                <input
                  pSize="small"
                  pInputText
                  [value]="fetchedMetadata[field.fetchedKey] ?? null"
                  class="src"
                  disabled
                  [ngClass]="{
                    'diff': isFetchedDifferent(field.controlName),
                  }"
                />
              }
            </div>
          </div>
        }
        @for (field of metadataPublishDate; track field) {
          <div class="meta-row field-{{field.controlName}}">
            <label for="{{field.controlName}}" class="field-label">{{ field.label }}</label>
            <div class="meta-fields">
              <p-datepicker
                size="small"
                fluid
                inputId="{{field.controlName}}"
                formControlName="{{field.controlName}}"
                dataType="string"
                dateFormat="yy-mm-dd"
                [keepInvalid]="true"
                [showIcon]="true"
                [iconDisplay]="'input'"
                appendTo="body"
                class="dest"
                [ngClass]="{
                  'changed': isValueChanged(field.controlName),
                }">
              </p-datepicker>
              <p-button
                size="small"
                [icon]="isValueSaved(field.controlName) ? 'pi pi-check' : (isValueChanged(field.controlName) || !fetchedMetadata[field.fetchedKey] ? 'pi pi-refresh' : 'pi pi-angle-left')"
                [outlined]="true"
                [ngClass]="{
                  'nosrc' : !fetchedMetadata[field.fetchedKey]
                }"
                class="arrow-button"
                [severity]="isValueChanged(field.controlName) ? 'warn' : null"
                [disabled]="!isFetchedDifferent(field.controlName) && !isValueChanged(field.controlName)"
                (click)="isValueChanged(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
              />
              @if (fetchedMetadata[field.fetchedKey]) {
                <input
                  pSize="small"
                  pInputText
                  [value]="fetchedMetadata[field.fetchedKey] ?? null"
                  class="src"
                  disabled
                  [ngClass]="{
                    'diff': isFetchedDifferent(field.controlName),
                  }"
                />
              }
            </div>
          </div>
        }
        @for (field of metadataChips; track field) {
          <div class="meta-row field-{{field.controlName}}">
            <label for="{{field.controlName}}" class="field-label">{{ field.label }}</label>
            <div class="meta-fields">
              @if (field.controlName === 'authors') {
                <div class="author-chips-container dest full-width"
                     cdkDropList cdkDropListOrientation="mixed"
                     (cdkDropListDropped)="dropAuthor($event)"
                     [ngClass]="{ 'changed': isValueChanged('authors') }">
                  @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 }}
                      <i class="pi pi-times author-chip-remove" (click)="removeAuthor($index)"></i>
                    </span>
                  }
                  <p-autoComplete
                    class="author-add-input"
                    [(ngModel)]="authorInputValue"
                    [ngModelOptions]="{ standalone: true }"
                    size="small"
                    [forceSelection]="false"
                    [dropdown]="false"
                    (onKeyUp)="onAuthorInputKeyUp($event)"
                    (onSelect)="onAuthorInputSelect($event)"
                    placeholder="Add author..."
                  />
                </div>
              } @else {
                <p-autoComplete
                  size="small"
                  formControlName="{{field.controlName}}"
                  [multiple]="true"
                  [typeahead]="false"
                  [dropdown]="false"
                  [forceSelection]="false"
                  class="dest full-width"
                  [ngClass]="{
                    'changed': isValueChanged(field.controlName),
                  }"
                  (onBlur)="onAutoCompleteBlur(field.controlName, $event)"
                />
              }
              <p-button
                size="small"
                [icon]="isValueSaved(field.controlName) ? 'pi pi-check' : (isValueChanged(field.controlName) || !fetchedMetadata[field.fetchedKey] ? 'pi pi-refresh' : 'pi pi-angle-left')"
                [outlined]="true"
                [ngClass]="{
                  'nosrc' : !fetchedMetadata[field.fetchedKey]
                }"
                class="arrow-button"
                [severity]="isValueChanged(field.controlName) ? 'warn' : null"
                [disabled]="!isFetchedDifferent(field.controlName) && !isValueChanged(field.controlName)"
                (click)="isValueChanged(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
              />
              @if (fetchedMetadata[field.fetchedKey]) {
                <p-autoComplete
                  size="small"
                  [ngModel]="fetchedMetadata[field.fetchedKey] ?? []"
                  [ngModelOptions]="{standalone:true}"
                  [disabled]="true"
                  [multiple]="true"
                  [typeahead]="false"
                  [dropdown]="false"
                  [forceSelection]="false"
                  class="src full-width"
                  [ngClass]="{
                    'diff': isFetchedDifferent(field.controlName),
                  }"
                />
              }
            </div>
          </div>
        }
        @for (field of metadataDescription; track field) {
          <div class="meta-row field-{{field.controlName}}">
            <label for="{{field.controlName}}" class="field-label">{{ field.label }}</label>
            <div class="meta-fields">
              <textarea
                pTextarea
                rows="4"
                pSize="small"
                id="{{field.controlName}}"
                formControlName="{{field.controlName}}"
                class="dest"
                [ngClass]="{
                  'changed': isValueChanged(field.controlName),
                }"
              ></textarea>
              <p-button
                size="small"
                [icon]="isValueSaved(field.controlName) ? 'pi pi-check' : (isValueChanged(field.controlName) || !fetchedMetadata[field.fetchedKey] ? 'pi pi-refresh' : 'pi pi-angle-left')"
                [outlined]="true"
                [ngClass]="{
                  'nosrc' : !fetchedMetadata[field.fetchedKey]
                }"
                class="arrow-button"
                [severity]="isValueChanged(field.controlName) ? 'warn' : null"
                [disabled]="!isFetchedDifferent(field.controlName) && !isValueChanged(field.controlName)"
                (click)="isValueChanged(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
              />
              @if (fetchedMetadata[field.fetchedKey]) {
                <textarea
                  pTextarea
                  rows="4"
                  pSize="small"
                  [value]="fetchedMetadata[field.fetchedKey] ?? null"
                  class="src"
                  disabled
                  [ngClass]="{
                    'diff': isFetchedDifferent(field.controlName),
                  }"
                ></textarea>
              }
            </div>
          </div>
        }
        @for (field of metadataFieldsBottom; track field) {
          <div class="meta-row field-{{field.controlName}}">
            <label for="{{field.controlName}}" class="field-label">{{ field.label }}</label>
            <div class="meta-fields">
              <input
                pInputText
                pSize="small"
                id="{{field.controlName}}"
                formControlName="{{field.controlName}}"
                class="dest"
                [ngClass]="{
                  'changed': isValueChanged(field.controlName),
                }"
              />
              <p-button
                size="small"
                [icon]="isValueSaved(field.controlName) ? 'pi pi-check' : (isValueChanged(field.controlName) || !fetchedMetadata[field.fetchedKey] ? 'pi pi-refresh' : 'pi pi-angle-left')"
                [outlined]="true"
                [ngClass]="{
                  'nosrc' : !fetchedMetadata[field.fetchedKey]
                }"
                class="arrow-button"
                [severity]="isValueChanged(field.controlName) ? 'warn' : null"
                [disabled]="!isFetchedDifferent(field.controlName) && !isValueChanged(field.controlName)"
                (click)="isValueChanged(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
              />
              @if (fetchedMetadata[field.fetchedKey]) {
                <input
                  pInputText
                  pSize="small"
                  [value]="fetchedMetadata[field.fetchedKey] ?? null"
                  class="src"
                  disabled
                  [ngClass]="{
                    'diff': isFetchedDifferent(field.controlName),
                  }"
                />
              }
            </div>
          </div>
        }
      </div>
    </div>
  </form>
} @else {
  <form [formGroup]="metadataForm" class="metaeditor">
    <div class="form-scroll">
      <div class="metaheader">
        <p class="missingmd">
          {{ t('unableToFetchMetadata') }}
        </p>
        <p-button
          size="small"
          severity="warn"
          icon="pi pi-refresh"
          [outlined]="true"
          [pTooltip]="t('resetAllTooltip')"
          tooltipPosition="left"
          (onClick)="confirmReset()"
        ></p-button>
      </div>
      <div class="metabody">
        <div class="editor-thumbnail-wrapper">
          <div class="editor-thumbnail-inner field-thumbnail">
            <img
              [src]="metadataForm.get('thumbnailUrl')?.value"
              alt="Book Thumbnail"
              class="thumbnail editor-thumbnail-img"
            />
            <input type="hidden" id="thumbnailUrl" formControlName="thumbnailUrl"/>
          </div>
        </div>
        <div class="metacontent editor-metacontent">
          @for (field of metadataFieldsTop; track field) {
            <div class="meta-row field-{{field.controlName}}">
              <label for="{{field.controlName}}" class="field-label field-label--fixed">{{ field.label }}</label>
              <div class="field-input-row">
                <input
                  pSize="small"
                  fluid
                  pInputText
                  id="{{field.controlName}}"
                  formControlName="{{field.controlName}}"
                  [ngClass]="{
                    'changed': isValueChanged(field.controlName),
                  }"
                />
                <p-button
                  size="small"
                  icon="pi pi-refresh"
                  [outlined]="true"
                  class="arrow-button"
                  severity="warn"
                  [disabled]="!isValueChanged(field.controlName)"
                  (click)="resetField(field.controlName)"
                />
              </div>
            </div>
          }

          @for (field of metadataPublishDate; track field) {
            <div class="meta-row field-{{field.controlName}}">
              <label for="{{field.controlName}}" class="field-label field-label--fixed">{{ field.label }}</label>
              <div class="field-input-row">
                <p-datepicker
                  size="small"
                  fluid
                  inputId="{{field.controlName}}"
                  formControlName="{{field.controlName}}"
                  dataType="string"
                  dateFormat="yy-mm-dd"
                  [keepInvalid]="true"
                  [showIcon]="true"
                  [iconDisplay]="'input'"
                  appendTo="body"
                  class="full-width"
                  [ngClass]="{
                    'changed': isValueChanged(field.controlName),
                  }">
                </p-datepicker>
                <p-button
                  size="small"
                  icon="pi pi-refresh"
                  [outlined]="true"
                  class="arrow-button"
                  severity="warn"
                  [disabled]="!isValueChanged(field.controlName)"
                  (click)="resetField(field.controlName)"
                />
              </div>
            </div>
          }

          @for (field of metadataChips; track field) {
            <div class="meta-row field-{{field.controlName}}">
              <label for="{{field.controlName}}" class="field-label field-label--fixed">{{ field.label }}</label>
              <div class="field-input-row">
                @if (field.controlName === 'authors') {
                  <div class="author-chips-container full-width"
                       cdkDropList cdkDropListOrientation="mixed"
                       (cdkDropListDropped)="dropAuthor($event)"
                       [ngClass]="{ 'changed': isValueChanged('authors') }">
                    @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 }}
                        <i class="pi pi-times author-chip-remove" (click)="removeAuthor($index)"></i>
                      </span>
                    }
                    <p-autoComplete
                      class="author-add-input"
                      [(ngModel)]="authorInputValue"
                      [ngModelOptions]="{ standalone: true }"
                      size="small"
                      [forceSelection]="false"
                      [dropdown]="false"
                      (onKeyUp)="onAuthorInputKeyUp($event)"
                      (onSelect)="onAuthorInputSelect($event)"
                      placeholder="Add author..."
                    />
                  </div>
                } @else {
                  <p-autoComplete
                    size="small"
                    formControlName="{{field.controlName}}"
                    [multiple]="true"
                    [typeahead]="false"
                    [dropdown]="false"
                    [forceSelection]="false"
                    class="full-width"
                    [ngClass]="{
                      'changed': isValueChanged(field.controlName),
                    }"
                    (onBlur)="onAutoCompleteBlur(field.controlName, $event)"
                  />
                }
                <p-button
                  size="small"
                  icon="pi pi-refresh"
                  [outlined]="true"
                  class="arrow-button"
                  severity="warn"
                  [disabled]="!isValueChanged(field.controlName)"
                  (click)="resetField(field.controlName)"
                />
              </div>
            </div>
          }

          @for (field of metadataDescription; track field) {
            <div class="meta-row field-{{field.controlName}}">
              <label for="{{field.controlName}}" class="field-label field-label--fixed">{{ field.label }}</label>
              <div class="field-input-row">
                <textarea
                  pTextarea
                  fluid
                  rows="4"
                  pSize="small"
                  id="{{field.controlName}}"
                  formControlName="{{field.controlName}}"
                  [ngClass]="{
                    'changed': isValueChanged(field.controlName),
                  }"
                ></textarea>
                <p-button
                  size="small"
                  icon="pi pi-refresh"
                  [outlined]="true"
                  class="arrow-button"
                  severity="warn"
                  [disabled]="!isValueChanged(field.controlName)"
                  (click)="resetField(field.controlName)"
                />
              </div>
            </div>
          }

          @for (field of metadataFieldsBottom; track field) {
            <div class="meta-row field-{{field.controlName}}">
              <label for="{{field.controlName}}" class="field-label field-label--fixed">{{ field.label }}</label>
              <div class="field-input-row">
                <input
                  pSize="small"
                  fluid
                  pInputText
                  id="{{field.controlName}}"
                  formControlName="{{field.controlName}}"
                  [ngClass]="{
                    'changed': isValueChanged(field.controlName),
                  }"
                />
                <p-button
                  size="small"
                  icon="pi pi-refresh"
                  [outlined]="true"
                  class="arrow-button"
                  severity="warn"
                  [disabled]="!isValueChanged(field.controlName)"
                  (click)="resetField(field.controlName)"
                />
              </div>
            </div>
          }
        </div>
      </div>
    </div>
  </form>
}
</ng-container>
