Yrkki/cv-generator-fe

<div [ngClass]="portfolioService.toolbarService.pagination ? 'tryKeepTogether' : ''">
  <app-header [key]="accomplishmentType" [headingLevel]="3" [nextSortElement]="nextSort"></app-header>
  <div id="{{ entities[accomplishmentType]?.content }}" class="collapse show">
    <app-header [key]="accomplishmentType + ' Index'" [headingLevel]="4" [editModeOnly]="true"></app-header>
    <div #nextSort id="{{ entities[accomplishmentType + ' Index']?.content }}" class="collapse show">
      <span (keypress)="inputService.keypress($event)"
        (click)="portfolioService.engine.searchService.updateSearchToken($event)">
        <ng-container
          *ngFor="let accomplishment of truncatorService.truncated(sorterService.sorted(filtered)); let i = index; trackBy: trackByFn">
          <ng-container *ngIf="i > 0">&nbsp;{{ frequenciesDivider }} </ng-container>
          <app-index [propertyName]="accomplishment" [truncatorService]="truncatorService"></app-index>
        </ng-container>
      </span>
      <ng-container *ngIf="truncatorService.remainingLength(filtered) > 0">
        <span class="more">+{{ truncatorService.remainingLength(filtered) }}&nbsp;more… </span>
      </ng-container>
    </div>

    <app-header [key]="accomplishmentType + ' List'" [headingLevel]="4" [editModeOnly]="true"></app-header>
    <div #classifierKind id="{{ entities[accomplishmentType + ' List']?.content }}" class="collapse show"
      (keypress)="inputService.keypress($event)" (click)="rotateClassifierKind($event)">
      <div
        *ngFor="let accomplishment of truncatorService.truncated(sorterService.sorted(filtered)); trackBy: trackByFn">
        <ng-container *ngIf="accomplishmentType === 'Languages'; else elseBlockName">
          <app-course-list [propertyName]="accomplishment"></app-course-list>
        </ng-container>
        <ng-template #elseBlockName>
          <app-course [propertyName]="accomplishment"></app-course>
        </ng-template>
      </div>
      <ng-container *ngIf="truncatorService.remainingLength(filtered) > 0">
        <div class="more">+{{ truncatorService.remainingLength(filtered) }}&nbsp;more… </div>
      </ng-container>
    </div>

    <ng-container *ngIf="accomplishmentType === 'Languages'">
      <app-header [key]="accomplishmentType + ' Chart'" [headingLevel]="4" [toggles]="[ToggleKind.Responsive]"
        [editModeOnly]="true"></app-header>
      <div id="{{ entities[accomplishmentType + ' Chart']?.content }}" class="collapse show">
        <app-language></app-language>
      </div>
    </ng-container>
  </div>
</div>