@if (hasParagraph | async) {
  @if (paragraphLoaded | async) {
    <div class="main-container">
      <div>
        <div class="sticky-header">
          <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>
        <div class="scrollable-area paragraphs-container">
          <pa-infinite-scroll (reachAnchor)="loadMore()">
            @for (paragraph of paragraphs | async; track paragraph) {
              <div
                class="paragraph-container"
                >
                <p>{{ paragraph.text }}</p>
                <div class="labels-container">
                  @for (label of paragraph.generatedClassifications; track label) {
                    <pa-chip [backgroundColor]="(availableLabels | async)?.[label.labelset]?.color">
                      {{ label.label }}
                    </pa-chip>
                  }
                  @for (label of paragraph.userClassifications; track label) {
                    @if (!label.cancelled_by_user) {
                      <pa-chip [backgroundColor]="(availableLabels | async)?.[label.labelset]?.color">
                        {{ label.label }}
                      </pa-chip>
                    }
                  }
                </div>
              </div>
            }
          </pa-infinite-scroll>
        </div>
      </div>
    </div>
  } @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>
}