<div class="deltagare-tab-personal-information" *ngIf="(dataIsLoading$ | async) === false; else loadingRef">
  <div *ngIf="contactInformation$ | async as contactInformation" class="deltagare-tab-personal-information__tab-column">
    <h2>Personuppgifter</h2>
    <dl>
      <dt>Namn:</dt>
      <dd *ngIf="contactInformation.fullName; else emptyDD">{{ contactInformation.fullName }}</dd>
      <dt>Personnummer:</dt>
      <dd *ngIf="contactInformation.ssn; else emptyDD">
        <msfa-hide-text
          symbols="********-****"
          [changingText]="contactInformation.ssn"
          ariaLabelType="personnummer"
        ></msfa-hide-text>
      </dd>
      <dt>Folkbokföringsadress</dt>
      <dd *ngIf="contactInformation.officialAddress as address; else emptyDD">
        <address>
          {{ address.street }}<br />
          {{ address.postalCode }} {{ address.city }}
        </address>
      </dd>
      <dt>Postadress</dt>
      <dd *ngIf="contactInformation.postalAddress as address; else emptyDD">
        <address>
          {{ address.street }}<br />
          {{ address.postalCode }} {{ address.city }}
        </address>
      </dd>
      <dt>Telefon:</dt>
      <ng-container *ngIf="contactInformation.phoneNumbers?.length; else emptyDD">
        <ng-container *ngFor="let phoneNumber of contactInformation.phoneNumbers">
          <dd>{{ phoneNumber.type }}: {{phoneNumber.number}}</dd>
        </ng-container>
      </ng-container>
      <dt>E-postadress:</dt>
      <dd *ngIf="contactInformation.email; else emptyDD">
        <a href="mailto:{{contactInformation.email}}">{{ contactInformation.email }}</a>
      </dd>
      <ng-container *ngIf="avropInformation$ | async as avropInformation">
        <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>
    </dl>
  </div>
  <ng-container *ngIf="avropInformation$ | async as avropInformation">
    <div class="deltagare-tab-personal-information__tab-column">
      <h2>Om tjänsten</h2>
      <dl>
        <dt>Tillhörande tjänst:</dt>
        <dd *ngIf="avropInformation.tjanst; else emptyDD">{{ avropInformation.tjanst }}</dd>
        <dt>Datum för tjänstens början:</dt>
        <dd *ngIf="avropInformation.startDate; else emptyDD">
          <digi-typography-time [afDateTime]="avropInformation.startDate"></digi-typography-time>
        </dd>
        <dt>Datum för tjänstens slut:</dt>
        <dd *ngIf="avropInformation.endDate; else emptyDD">
          <digi-typography-time [afDateTime]="avropInformation.endDate"></digi-typography-time>
        </dd>
        <ng-container *ngIf="avropInformation.hasAvbrott">
          <dt>Status:</dt>
          <dd class="deltagare-tab-personal-information__avbrott">
            <msfa-icon icon="warning" size="l"></msfa-icon>
            Avbrott
          </dd>
          <dt>Original datum för tjänstens slut:</dt>
          <dd *ngIf="avropInformation.originalEndDate; else emptyDD">
            <digi-typography-time [afDateTime]="avropInformation.originalEndDate"></digi-typography-time>
          </dd>
        </ng-container>
        <dt>Deltagandefrekvens:</dt>
        <dd *ngIf="avropInformation.participationFrequency; else emptyDD">
          {{ avropInformation.participationFrequency }}
        </dd>
        <dt>Nivå:</dt>
        <dd *ngIf="avropInformation.participationFrequency; else emptyDD">{{ avropInformation.trackName }}</dd>
        <dt>Utförande verksamhet:</dt>
        <dd *ngIf="avropInformation.utforandeVerksamhet; else emptyDD">{{ avropInformation.utforandeVerksamhet }}</dd>
        <dt>Utförande adress:</dt>
        <dd *ngIf="avropInformation.utforandeAdress; else emptyDD">
          {{ avropInformation.utforandeAdress + ', ' + avropInformation.kommun }}
        </dd>
        <dt>Genomförandereferens:</dt>
        <dd *ngIf="avropInformation.genomforandeReferens; else emptyDD">{{ avropInformation.genomforandeReferens }}</dd>
      </dl>
    </div>
    <div class="deltagare-tab-personal-information__tab-column">
      <h2>Handledare</h2>
      <dl>
        <dt>Tilldelad handledare:</dt>
        <dd *ngIf="avropInformation.handledare; else emptyDD">{{ avropInformation.handledare }}</dd>
      </dl>
      <ng-container *ngIf="handledarePickerVisible">
        <msfa-handledare-picker-form
          *ngIf=" availableHandledare$ | async as availableHandledare; else loadingRef"
          [selectedHandledareId]="avropInformation.handledareCiamUserId"
          [handledare]="availableHandledare"
          [avropIds]="[avropInformation.id]"
          [label]="avropInformation.handledareCiamUserId ? 'Byt handledare' : 'Välj handledare'"
        ></msfa-handledare-picker-form>
      </ng-container>
    </div>
  </ng-container>
</div>

<ng-template #emptyDD>
  <dd>Info saknas</dd>
</ng-template>
<ng-template #loadingRef>
  <ui-loader class="deltagare-tab-personal-information__loader" uiType="padded"></ui-loader>
</ng-template>
