Yrkki/cv-generator-fe

<ng-template #spectrum let-key="key">
  <div [ngClass]="portfolioService.toolbarService.pagination ? 'tryKeepTogether' : ''">
    <div [ngClass]="portfolioService.toolbarService.getColumnsClass(entities[key]?.columns!)">
      <app-header [key]="key" [headingLevel]="3" [nextSortElement]="nextSort">
      </app-header>
      <div #nextSort id="{{ entities[key]?.content }}" class="collapse show">
        <div [ngClass]="portfolioService.toolbarService.getColumnsClass(entities[key]?.contentColumns!)">
          <div [ngClass]="portfolioService.toolbarService.pagination ? 'tryKeepTogether' : ''">
            <ng-container *ngIf="key === 'Country'; else elseBlockIndex">
              <app-header [key]="key + ' Index'" [headingLevel]="4" [editModeOnly]="true"></app-header>
              <div id="{{ entities[key + ' Index']?.content }}" class="collapse show">
                <app-spectrum [key]="key"></app-spectrum>
              </div>

              <app-header [key]="key + ' Map'" [headingLevel]="4"></app-header>
              <div id="{{ entities[key + ' Map']?.content }}" class="collapse show">
                <ng-container *ngTemplateOutlet="map!;context:{key: 'Country'}"></ng-container>
              </div>
            </ng-container>
            <ng-template #elseBlockIndex>
              <app-spectrum [key]="key"></app-spectrum>
            </ng-template>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #header let-key="key">
  <app-header [key]="key" [headingLevel]="2" [toggles]="[ToggleKind.ContentColumns]"></app-header>
</ng-template>

<ng-template #map let-key="key">
  <div *ngIf="getFrequenciesCache(key)?.length || 0 > 0">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12 cell-value">
          <app-map></app-map>
        </div>
      </div>
    </div>
  </div>
</ng-template>

<div [ngClass]="portfolioService.toolbarService.getColumnsClass(entities['Project Summary']?.layoutColumns!)">
  <div [ngClass]="portfolioService.toolbarService.pagination ? 'tryKeepTogether' : ''">
    <div [ngClass]="portfolioService.toolbarService.getColumnsClass(entities['Areas of Expertise']?.columns!)">
      <ng-container *ngTemplateOutlet="header!;context:{key: 'Areas of Expertise'}"></ng-container>
      <div id="{{ entities['Areas of Expertise']?.content }}" class="collapse show">
        <div
          [ngClass]="portfolioService.toolbarService.getColumnsClass(entities['Areas of Expertise']?.contentColumns!)">
          <ng-container *ngTemplateOutlet="spectrum!;context:{key: 'Client'}"></ng-container>
          <ng-container *ngTemplateOutlet="spectrum!;context:{key: 'Country'}"></ng-container>
          <ng-container *ngTemplateOutlet="spectrum!;context:{key: 'Industry'}"></ng-container>
          <ng-container *ngTemplateOutlet="spectrum!;context:{key: 'Project type'}"></ng-container>
          <ng-container *ngTemplateOutlet="spectrum!;context:{key: 'System type'}"></ng-container>
        </div>
      </div>
    </div>
  </div>

  <div [ngClass]="portfolioService.toolbarService.pagination ? 'tryKeepTogether' : ''">
    <div [ngClass]="portfolioService.toolbarService.getColumnsClass(entities['Skills']?.columns!)">
      <ng-container *ngTemplateOutlet="header!;context:{key: 'Skills'}"></ng-container>
      <div id="{{ entities['Skills']?.content }}" class="collapse show">
        <div [ngClass]="portfolioService.toolbarService.getColumnsClass(entities['Skills']?.contentColumns!)">
          <ng-container *ngTemplateOutlet="spectrum!;context:{key: 'Platform'}"></ng-container>
          <ng-container *ngTemplateOutlet="spectrum!;context:{key: 'Architecture'}"></ng-container>
          <ng-container *ngTemplateOutlet="spectrum!;context:{key: 'Languages and notations'}"></ng-container>
          <ng-container *ngTemplateOutlet="spectrum!;context:{key: 'IDEs and Tools'}"></ng-container>
          <ng-container *ngTemplateOutlet="spectrum!;context:{key: 'Methodology and practices'}"></ng-container>
        </div>
      </div>
    </div>
  </div>
</div>

<div [ngClass]="portfolioService.toolbarService.pagination ? 'tryKeepTogether' : ''">
  <div [ngClass]="portfolioService.toolbarService.getColumnsClass(entities['Job Functions']?.columns!)">
    <ng-container *ngTemplateOutlet="header!;context:{key: 'Job Functions'}"></ng-container>
    <div id="{{ entities['Job Functions']?.content }}" class="collapse show">
      <div [ngClass]="portfolioService.toolbarService.getColumnsClass(entities['Job Functions']?.contentColumns!)">
        <ng-container *ngTemplateOutlet="spectrum!;context:{key: 'Role'}"></ng-container>
        <ng-container *ngTemplateOutlet="spectrum!;context:{key: 'Responsibilities'}"></ng-container>
        <ng-container *ngTemplateOutlet="spectrum!;context:{key: 'Team size'}"></ng-container>
        <ng-container *ngTemplateOutlet="spectrum!;context:{key: 'Position'}"></ng-container>
        <ng-container *ngTemplateOutlet="spectrum!;context:{key: 'Reference'}"></ng-container>
      </div>
    </div>
  </div>
</div>