<msfa-layout>
  <msfa-report-layout
    *ngIf="avrop$ | async as avrop; else skeletonRef"
    reportTitle="Signal om arbete eller studier"
    [avrop]="avrop"
  >
    <div class="signal-view" *ngIf="signal$ | async as signal; else loadingRef">
      <dt>Typ av sysselsättning</dt>
      <dd>{{typeToText(signal.type)}}</dd>
      <dt>Omfattning</dt>
      <dd>{{omfattningToText(signal.omfattning)}}</dd>
      <ng-container *ngIf="signal.omfattning === 'deltid'">
        <dt>Antal procent vid deltid</dt>
        <dd>{{signal.omfattningPercent}}%</dd>
      </ng-container>
      <dt>Startdatum</dt>
      <dd><digi-typography-time [afDateTime]="signal.startDate"></digi-typography-time></dd>

      <footer class="signal-view__footer">
        <ui-back-link route="../../">Tillbaka till deltagaren</ui-back-link>
      </footer>
    </div>
  </msfa-report-layout>
</msfa-layout>

<ng-template #skeletonRef>
  <ui-skeleton [uiCount]="3" uiText="Laddar Signal om arbete eller studier"></ui-skeleton>
</ng-template>

<ng-template #loadingRef>
  <ui-loader uiType="padded"></ui-loader>
</ng-template>
