@if (extraMetadataFullscreen) {
  <div class="backdrop"></div>
}
<div class="main-container">
  <div class="scrollable-area">
    @for (error of errors | slice: 0 : 5; track error.body) {
      <div class="error-container">
        <p>
          <pa-icon
            name="warning"
            size="small"></pa-icon>
          {{ error.body }}
        </p>
      </div>
    }
    @if (errors.length > 5) {
      <div class="error-container">
        <p>
          <pa-icon
            name="warning"
            size="small"></pa-icon>
          {{ 'resource.preview.more-errors' | translate: { num: errors.length } }}
        </p>
      </div>
    }

    @if (fieldId | async) {
      @if (loadingField | async) {
        <nsi-skeleton
          width="100%"
          height="2rem"></nsi-skeleton>
      } @else {
        @if (((questionsAnswers | async) || []).length > 0) {
          <pa-tabs notFullWidth>
            <pa-tab
              (click)="selectedTab = 'content'"
              [active]="selectedTab === 'content'">
              <span class="body-m">{{ 'resource.preview.content' | translate }}</span>
            </pa-tab>
            <pa-tab
              (click)="selectedTab = 'questions-answers'"
              [active]="selectedTab === 'questions-answers'">
              <span class="body-m">{{ 'resource.preview.questions-answers' | translate }}</span>
            </pa-tab>
          </pa-tabs>
        }

        @if (selectedTab === 'content') {
          @let extractId = extractConfigId | async;
          @let extractName = (extractConfig | async)?.name;
          @let splitId = splitConfigId | async;
          @let splitName = (splitConfig | async)?.name;
          @if (extractId || splitId) {
            <nsi-info-card>
              <div class="body-s">
                @if (extractName || extractId) {
                  <div class="custom-processing">
                    <strong>{{ 'resource.custom-processing.extract-strategy' | translate }}:</strong>
                    <span>{{ extractName || extractId }}</span>
                    @if (!extractName) {
                      <span>({{ 'resource.custom-processing.deleted' | translate }})</span>
                    }
                  </div>
                }
                @if (splitName || splitId) {
                  <div class="custom-processing">
                    <strong>{{ 'resource.custom-processing.split-strategy' | translate }}:</strong>
                    <span>{{ splitName || splitId }}</span>
                    @if (!splitName) {
                      <span>({{ 'resource.custom-processing.deleted' | translate }})</span>
                    }
                  </div>
                }
                <a [routerLink]="aiModelsUrl | async">{{ 'resource.custom-processing.ai-models-link' | translate }}</a>
              </div>
            </nsi-info-card>
          }
          @if (hasFilters | async) {
            <div class="filters-container">
              <div class="filters">
                @if (((paragraphTypes | async) || []).length > 1) {
                  <div>
                    <nsi-dropdown-button
                      aspect="basic"
                      freeWidth
                      [popupRef]="paragraphTypeDropdown">
                      {{ 'Paragraph type' | translate }}
                    </nsi-dropdown-button>
                    <pa-dropdown #paragraphTypeDropdown>
                      @for (type of paragraphTypes | async; track type) {
                        <pa-option
                          [value]="type"
                          (selectOption)="onClickOption(type, $event)"
                          dontCloseOnSelect>
                          <pa-checkbox
                            [value]="((selectedTypes | async) || []).includes(type)"
                            (change)="toggleType(type)">
                            {{ type }}
                          </pa-checkbox>
                        </pa-option>
                      }
                    </pa-dropdown>
                  </div>
                }
                @if (((labelSets | async | keyvalue) || []).length > 0) {
                  <div>
                    <app-label-dropdown
                      [labelSets]="labelSets | async"
                      [selection]="(selectedLabels | async) || []"
                      (selectionChange)="updateSelectedLabels($event)"
                      [fullWidth]="true"
                      [multiple]="true"
                      aspect="basic">
                      {{ 'resource.classification-column' | translate }}
                    </app-label-dropdown>
                  </div>
                }
              </div>
              @if (hasSelectedFilters | async) {
                <div class="selected-filters">
                  <div class="title-xxs">{{ 'resource.filtered-by' | translate }}</div>
                  @for (type of selectedTypes | async; track type) {
                    <pa-chip-closeable (closed)="toggleType(type)">
                      {{ type }}
                    </pa-chip-closeable>
                  }
                  @for (label of selectedLabels | async; track label.labelset + label.label) {
                    <pa-chip-closeable (closed)="removeLabel(label)">
                      {{ label.labelset + '/' + label.label }}
                    </pa-chip-closeable>
                  }
                </div>
              }
            </div>
          }
          @if (agenticQuestion | async; as agenticQuestion) {
            <div class="title-xxs">{{ 'resource.agentic-question.answer' | translate }}</div>
            @if (currentAgenticAnswer()) {
              <p>{{ currentAgenticAnswer() }}</p>
            } @else {
              <p>
                <i>{{ 'resource.agentic-question.not-processed' | translate }}</i>
              </p>
            }
            <pa-button
              (click)="processAgenticQuestion()"
              [disabled]="agenticProcessing()">
              {{
                (currentAgenticAnswer() ? 'resource.agentic-question.re-process' : 'resource.agentic-question.process')
                  | translate
              }}
            </pa-button>
            @if (agenticProcessing()) {
              <nsi-spinner></nsi-spinner>
            }
            <div class="title-xxs">{{ 'resource.agentic-question.question' | translate }}</div>
            <p>{{ agenticQuestion.question }}</p>
            <div class="title-xxs">{{ 'resource.agentic-question.config' | translate }}</div>
            <p>{{ agenticQuestion.agentic_config_id }}</p>
          } @else {
            @for (paragraph of filteredParagraphs | async; track paragraph.paragraphId + paragraph.key) {
              @let hasLabels = paragraph.activeClassifications.length > 0;
              <div class="paragraph-container">
                @if (paragraph.url) {
                  <p>
                    <img
                      class="image"
                      alt=""
                      [src]="paragraph.url | async" />
                  </p>
                } @else if (paragraph.kind === 'TEXT') {
                  @if (((attachments | async) || {})[paragraph.key || '']; as attachments) {
                    <p class="with-attachments">
                      <span>{{ paragraph.text }}</span>
                      <span>
                        <nsi-dropdown-button
                          aspect="basic"
                          size="small"
                          freeWidth
                          [popupRef]="attachmentsDropdown">
                          {{ 'resource.attachments' | translate }}
                        </nsi-dropdown-button>
                        <pa-dropdown #attachmentsDropdown>
                          @for (attachment of attachments; track attachment) {
                            <pa-option
                              (selectOption)="navigateToField(attachment)"
                              [description]="attachment.field_id">
                              {{ 'resource.field-' + attachment.field_type | translate }}
                            </pa-option>
                          }
                        </pa-dropdown>
                      </span>
                    </p>
                  } @else {
                    <p [class.with-hover]="hasLabels">
                      <span [innerHTML]="paragraph.textWithFormat"></span>
                    </p>
                  }
                } @else {
                  <p class="with-type with-hover">
                    @if (paragraph.kind === 'TABLE') {
                      <stf-preview-table [markdown]="paragraph.text"></stf-preview-table>
                    } @else {
                      <span [innerHTML]="paragraph.textWithFormat"></span>
                    }
                    <span
                      [paTooltip]="
                        paragraph.kind === 'OCR' || paragraph.kind === 'INCEPTION'
                          ? 'resource.tooltip.' + paragraph.kind.toLowerCase()
                          : undefined
                      ">
                      <nsi-badge kind="neutral">{{ paragraph.kind }}</nsi-badge>
                    </span>
                  </p>
                }
                @if (hasLabels) {
                  <div class="labels-container">
                    <span class="title-xxs">{{ 'resource.preview.labels' | translate }}</span>
                    @for (label of paragraph.activeClassifications; track label.labelset + label.label) {
                      <pa-chip
                        [backgroundColor]="
                          ((labelSets | async) || {})[label.labelset]?.color
                        ">
                        {{ label.label }}
                      </pa-chip>
                    }
                  </div>
                }
              </div>
            }
            @if (hasMorePages | async) {
              <div>
                <pa-button
                  aspect="basic"
                  (click)="loadMoreMessages()">
                  {{ 'generic.show_more' | translate }}
                </pa-button>
              </div>
            }

            @if ((paragraphs | async)?.length === 0 && !(jsonTextField | async) && !(keyValueField | async)) {
              <div class="paragraph-container">
                <p>{{ 'resource.field-no-paragraph' | translate }}</p>
              </div>
            }

            @if (jsonTextField | async) {
              <div class="paragraph-container">
                <pre><code>{{ jsonTextField | async }}</code></pre>
              </div>
            }

            @if (keyValueField | async; as kvField) {
              <stf-key-value-field
                [data]="kvField.data"
                [schema]="kvField.schema"></stf-key-value-field>
            }
          }
        } @else {
          @if (questionsAnswers | async; as questionsAnswers) {
            @for (item of questionsAnswers; track item.question.text) {
              <div class="question-answer">
                <div class="title-xxs">{{ 'resource.preview.question' | translate }}</div>
                <p>{{ item.question.text }}</p>
                <div class="title-xxs">{{ 'resource.preview.answers' | translate }}</div>
                @for (answer of item.answers; track answer.text) {
                  <p>{{ answer.text }}</p>
                }
              </div>
            }
          }
        }
      }
    } @else {
      @if (resource | async; as resource) {
        <div class="resource-container">
          @if (resource.hidden) {
            <nsi-info-card
              icon="warning"
              type="warning">
              {{ 'resource.preview.hide-warning' | translate }}
            </nsi-info-card>
          }
          <div class="title-m">{{ 'resource.preview.general' | translate }}</div>

          <div class="title-xxs">{{ 'generic.uid' | translate }}</div>
          <p>{{ resource.uuid }}</p>

          <div class="title-xxs">{{ 'generic.slug' | translate }}</div>
          <p>{{ resource.slug }}</p>

          <div class="title-xxs">{{ 'resource.title' | translate }}</div>
          <p>{{ resource.title }}</p>

          <div class="title-xxs">{{ 'resource.summary' | translate }}</div>
          <p [innerHtml]="(summary | async) || '-'"></p>

          <div class="title-xxs">{{ 'resource.thumbnail.label' | translate }}</div>
          <div class="thumbnails-container">
            @for (thumb of thumbnails | async; track thumb.uri) {
              <div>
                <stf-thumbnail
                  noDeletion
                  [selected]="resource.thumbnail === thumb.uri"
                  [url]="thumb.blob"
                  [alt]="'Thumbnail ' + $index"></stf-thumbnail>
              </div>
            }
            @if (!(hasThumbnail | async)) {
              –
            }
          </div>

          @if (resource.origin; as origin) {
            <div class="title-m">{{ 'resource.preview.origin' | translate }}</div>

            <div class="title-xxs">{{ 'resource.origin.collaborators' | translate }}</div>
            <p>{{ origin.collaborators?.join(', ') || '–' }}</p>

            <div class="title-xxs">{{ 'resource.origin.created' | translate }}</div>
            <p>{{ origin.created || '–' }}</p>

            <div class="title-xxs">{{ 'resource.origin.modified' | translate }}</div>
            <p>{{ origin.modified || '–' }}</p>

            <div class="title-xxs">{{ 'resource.origin.filename' | translate }}</div>
            <p>{{ origin.filename || '–' }}</p>

            <div class="title-xxs">{{ 'resource.origin.url' | translate }}</div>
            <p>{{ origin.url || '–' }}</p>

            <div class="title-xxs">{{ 'resource.origin.tags' | translate }}</div>
            <p>{{ origin.tags?.join(', ') || '–' }}</p>

            <div class="title-xxs">{{ 'resource.origin.related' | translate }}</div>
            <p>{{ origin.related?.join(', ') || '–' }}</p>

            <div class="title-xxs">{{ 'resource.origin.path' | translate }}</div>
            <p>{{ origin.path || '–' }}</p>

            <div class="title-xxs">{{ 'resource.origin.metadata.title' | translate }}</div>
            @if (origin.metadata; as originMetadata) {
              <pa-table columns="50% 50%">
                @for (item of originMetadata | keyvalue; track item.key) {
                  <pa-table-row>
                    <pa-table-cell>{{ item.key }}</pa-table-cell>
                    <pa-table-cell>{{ item.value }}</pa-table-cell>
                  </pa-table-row>
                }
              </pa-table>
            } @else {
              <p>–</p>
            }
          }
          @if (extraMetadata | async; as extraMetadata) {
            <div class="title-m title-with-button">
              {{ 'resource.extra-metadata.label' | translate }}
              <pa-button
                icon="fullscreen"
                kind="secondary"
                size="small"
                aspect="basic"
                [paTooltip]="'resource.extra-metadata.fullscreen' | translate"
                (click)="extraMetadataFullscreen = true">
                {{ 'resource.extra-metadata.fullscreen' | translate }}
              </pa-button>
            </div>
            <div
              class="extra-metadata-container"
              [class.fullscreen]="extraMetadataFullscreen">
              @if (extraMetadataFullscreen) {
                <div class="fullscreen-header">
                  <pa-button
                    icon="cross"
                    kind="secondary"
                    aspect="basic"
                    (click)="extraMetadataFullscreen = false">
                    {{ 'generic.close' | translate }}
                  </pa-button>
                </div>
              }
              <pre><code>{{extraMetadata}}</code></pre>
            </div>
          }
          @if (resource.security) {
            <div class="title-m">{{ 'resource.security.label' | translate }}</div>
            <div class="title-xxs">{{ 'resource.security.access-groups.label' | translate }}</div>
            <p [innerHTML]="resource.security.access_groups.join('<br>') || '–'"></p>
          }
        </div>
      } @else if (noField | async) {
        <div class="resource-container">
          <p>{{ 'resource.error.no-field' | translate }}</p>
        </div>
      } @else {
        <nsi-delayed-spinner size="medium"></nsi-delayed-spinner>
      }
    }
  </div>
  <div class="buttons-container">
    <div class="buttons">
      @if (currentFieldId && currentFieldId.field_type !== 'key_value' && !(isArag | async)) {
        <pa-button
          [disabled]="loadingPreview"
          (click)="openViewer()">
          {{ 'resource.preview.open-viewer' | translate }}
        </pa-button>
      }
      @if (dataAugmentationErrors.length > 0) {
        <pa-button
          aspect="basic"
          kind="destructive"
          (click)="openWarnings()">
          {{ dataAugmentationErrors.length }}
          {{
            (dataAugmentationErrors.length === 1 ? 'resource.warning.warning' : 'resource.warning.warnings') | translate
          }}
        </pa-button>
      }
    </div>
  </div>
</div>

<div class="viewer-container">
  <div [innerHTML]="viewerWidget | async"></div>
</div>