@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 (loaded) {
      @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>
        }

        @for (paragraph of filteredParagraphs | async; track paragraph.paragraphId + paragraph.key) {
          <div class="paragraph-container">
            @if (paragraph.url) {
              <p>
                <img
                  class="image"
                  [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>{{ paragraph.text }}</p>
              }
            } @else {
              <p class="with-type">
                @if (paragraph.kind === 'TABLE') {
                  <stf-preview-table [markdown]="paragraph.text"></stf-preview-table>
                } @else {
                  <span>{{ paragraph.text }}</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 (paragraph.activeClassifications.length > 0) {
              <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)) {
          <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>
        }
      } @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 && !(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>