<div class="deltagare-tab-sensitive-information" *ngIf="(dataIsLoading$ | async) === false; else loadingRef">
  <div class="deltagare-tab-sensitive-information__tab-column" *ngIf="disabilities$ | async as disabilities">
    <h2>Funktionsnedsättningar</h2>

    <dl *ngIf="disabilities.length; else noDisabilities">
      <ng-container *ngFor="let disability of disabilities; let index = index">
        <dt>Funktionsnedsättning {{index + 1}}</dt>
        <dd>
          <span>{{ disability.title }}</span>
          <digi-ng-popover
            *ngIf="disability.description"
            class="deltagare-tab-sensitive-information__popover"
            [afRelativeIconSize]="true"
            >{{ disability.description }}</digi-ng-popover
          >
        </dd>
      </ng-container>
    </dl>
    <ng-template #noDisabilities>
      <p>Deltagaren har inga funktionsnedsättningar registrerad.</p>
    </ng-template>
  </div>
  <div class="deltagare-tab-sensitive-information__tab-column" *ngIf="avropInformation$ | async as avropInformation">
    <h2>Språk</h2>
    <dl>
      <dt>Behov av tolk:</dt>
      <dd>{{avropInformation.tolkbehov || 'Inget tolkbehov'}}</dd>
      <dt>Behov av språkstöd:</dt>
      <dd>{{avropInformation.sprakstod || 'Inget språkstöd'}}</dd>
      <ng-container *ngIf="workLanguages$ | async as workLanguages">
        <dt>Språk som kan användas på jobbet:</dt>
        <dd>{{ workLanguages.length ? workLanguages.join(', ') : 'Info saknas'}}</dd>
      </ng-container>
    </dl>
  </div>
</div>
<ng-template #loadingRef>
  <ui-loader class="deltagare-tab-sensitive-information__loader" uiType="padded"></ui-loader>
</ng-template>
