@if ((hasParagraph | async) || (noField | async)) {
  @if ((paragraphLoaded | async) || (noField | async)) {
    <div class="sticky-header">
      @if (paragraphLoaded | async) {
        <div>
          <pa-tabs notFullWidth>
            <pa-tab
              (click)="selectedTab = 'ners'"
              [active]="selectedTab === 'ners'">
              NERs
            </pa-tab>
            <pa-tab
              (click)="selectedTab = 'relations'"
              [active]="selectedTab === 'relations'">
              {{ 'resource.relations.title' | translate }}
            </pa-tab>
          </pa-tabs>
        </div>
      }
      @if (selectedTab === 'ners') {
        <pa-input
          [icon]="searchQuery ? 'cross' : 'search'"
          [class.can-reset]="!!searchQuery"
          [(ngModel)]="searchQuery"
          (click)="onSearchInputClick($event)"
          (keyup.enter)="triggerSearch()">
          {{ 'resource.field.search' | translate }}
        </pa-input>
      }
    </div>

    @if (selectedTab === 'ners') {
      <div class="main-container">
        <div class="scrollable-area with-right-panel">
          <div class="paragraphs-container">
            <pa-infinite-scroll (reachAnchor)="loadMore()">
              @for (paragraph of paragraphs | async; track paragraph) {
                <div class="paragraph-container">
                  <p
                    [attr.paragraphId]="paragraph.paragraphId"
                    [class.family-selected]="(selectedFamily | async) !== null"
                    [innerHTML]="paragraph.annotatedText | safeHtml"></p>
                </div>
              }
            </pa-infinite-scroll>
          </div>
        </div>

        <div class="right-panel-container">
          <div class="help">
            <pa-icon
              name="info"
              size="small"></pa-icon>
            <p>
              {{ 'resource.field-annotation.help' | translate }}
            </p>
          </div>
          <div class="ner-families-container">
            @for (family of entityFamilies | async; track family.id) {
              <pa-expander
                emitOnly
                [expanded]="(selectedFamily | async)?.id === family.id"
                (toggleExpander)="selectFamily(family)">
                <pa-expander-header>
                  <div
                    class="family-color"
                    [style.background-color]="family.color"></div>
                  <span class="family-title">{{ family.title }}</span>
                  ({{ family.entities.length }})
                </pa-expander-header>
                <pa-expander-body>
                  <ul
                    class="entity-list"
                    [style.border-left-color]="family.color">
                    @for (entity of family.entities; track entity) {
                      <li paEllipsisTooltip>
                        {{ entity }}
                      </li>
                    }
                    @if (family.entities.length === 0) {
                      <li>{{ 'resource.entities.no-entity' | translate }}</li>
                    }
                  </ul>
                </pa-expander-body>
              </pa-expander>
            }
          </div>
        </div>
      </div>
    } @else {
      <app-relations [entityFamilies]="(entityFamilies | async) || undefined"></app-relations>
    }
  } @else {
    <div class="main-container">
      <div class="scrollable-area">
        <nsi-delayed-spinner size="medium"></nsi-delayed-spinner>
      </div>
    </div>
  }
} @else {
  <div class="main-container">
    <p>{{ 'resource.field-no-paragraph' | translate }}</p>
  </div>
}