<msfa-layout>
  <msfa-report-layout
    *ngIf="avrop$ | async as avrop; else skeletonRef"
    reportTitle="Periodisk redovisning"
    [avrop]="avrop"
  >
    <div class="periodisk-redovisning-view" *ngIf="periodiskRedovisning$ | async as report; else loadingRef">
      <dl>
        <dt>Period</dt>
        <dd>{{getPeriodName(report.period)}}</dd>
        <dt>Har ni under perioden tillhandahållit språkstöd till deltagaren?</dt>
        <dd>{{report.hasOfferedLanguageSupport ? 'Ja' : 'Nej' }}</dd>

        <dt>Har ni lämnat individuella förslag på lämpliga arbeten att söka till deltagaren?</dt>
        <dd>{{report.hasOfferedJob ? 'Ja' : 'Nej' }}</dd>

        <dt>Aktiviteter</dt>

        <dd *ngIf="report.activities.length === 0; else activityList">
          Deltagaren har inte deltagit i några aktiviteter denna period
        </dd>
        <ng-template #activityList>
          <dd *ngFor="let activity of report.activities" class="periodisk-redovisning-view__activity-item">
            <digi-icon-check-circle
              class="msfa__digi-icon periodisk-redovisning-view__activity-check"
              aria-hidden="true"
            ></digi-icon-check-circle>
            <span>{{getActivityInfoAsString(activity)}}</span>
          </dd>
        </ng-template>
      </dl>
      <footer class="periodisk-redovisning-view__footer">
        <ui-back-link uiRouterLink="../../">Tillbaka till deltagaren</ui-back-link>
      </footer>
    </div>
  </msfa-report-layout>
</msfa-layout>

<ng-template #skeletonRef>
  <ui-skeleton [uiCount]="3" uiText="Laddar Periodisk redovisning"></ui-skeleton>
</ng-template>

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