<msfa-layout>
  <ng-container *ngIf="(showUnauthorizedError$ | async) === false; else roleError">
    <digi-typography>
      <section *ngIf="allDeltagareData$ | async as allDeltagareData; else loadingRef" class="deltagare">
        <header class="deltagare__header">
          <h1>Deltagarlista</h1>
          <p>
            Här ser du en lista på de deltagare som tillhör din organisation. Klicka på deltagarens namn för att öppna
            och se mer information om deltagarna.
          </p>
        </header>
        <div class="deltagare__filter">
          <digi-form-checkbox
            (afOnChange)="setOnlyMyDeltagare($event.detail.target.checked)"
            [afChecked]="onlyMyDeltagare$ | async"
            af-label="Visa endast mina tilldelade deltagare"
            class="deltagare__only-my-deltagare"
          ></digi-form-checkbox>
        </div>
        <msfa-deltagare-list-table
          (paginated)="setNewPage($event)"
          (sorted)="handleDeltagareSort($event)"
          *ngIf="allDeltagareData.data.length; else noDeltagare"
          [deltagareLoading]="deltagareLoading$ | async"
          [deltagare]="allDeltagareData.data"
          [paginationMeta]="allDeltagareData.meta"
          [sort]="sort$ | async"
        ></msfa-deltagare-list-table>
      </section>
    </digi-typography>
  </ng-container>
</msfa-layout>

<ng-template #loadingRef>
  <ui-skeleton [uiCount]="3" uiText="Laddar deltagarlista"></ui-skeleton>
</ng-template>

<ng-template #noDeltagare>
  <p *ngIf="(deltagareLoading$ | async) === false">
    Inga deltagare hittades{{(onlyMyDeltagare$ | async) ? '. Bocka ur "Visa endast mina tilldelade deltagare" för att se
    deltagare som tillhör din organisation.' : ' som tillhör din organisation.' }}
  </p>
</ng-template>
ﬂØ
<ng-template #roleError>
  <msfa-unauthorized-alert></msfa-unauthorized-alert>
</ng-template>
