<msfa-layout>
  <msfa-report-layout
    *ngIf="avrop$ | async as avrop; else skeletonRef"
    reportTitle="Gemensam planering"
    [avrop]="avrop"
  >
    <div class="gemensam-planering-view" *ngIf="gemensamPlanering$ | async as report; else loadingRef">
      <dl>
        <dt>Deltar arbetssökande på distans?</dt>
        <dd>{{report.distance ? 'Ja' : 'Nej'}}</dd>
        <dt>Aktiviteter</dt>
        <dd>
          <ul class="gemensam-planering-view__activity-list">
            <li class="gemensam-planering-view__activity-item" *ngFor="let activity of report.activities">
              <digi-icon-check-circle
                class="msfa__digi-icon gemensam-planering-view__activity-check"
                aria-hidden="true"
              ></digi-icon-check-circle>
              {{activity}}
            </li>
          </ul>
        </dd>
      </dl>
      <footer class="gemensam-planering-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 Gemensam planering"></ui-skeleton>
</ng-template>

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