<msfa-layout>
  <section class="avrop" *ngIf="currentStep$ | async as currentStep">
    <digi-typography>
      <header class="avrop__header">
        <h1>Nya deltagare</h1>
        <p>
          Här ser du alla nya deltagare. Deltagarna ska tilldelas en handledare innan tjänstens start. Kryssa för de
          deltagare du vill tilldela en handledare. Du kan välja en, eller flera personer samtidigt, genom att kryssa i
          boxarna nedan.
        </p>

        <digi-notification-alert
          *ngIf="currentStep === 4 && selectedHandledare$ | async as selectedHandledare"
          af-heading="Allt gick bra"
          af-variation="success"
        >
          <p>Tilldelningen är nu skickad till {{selectedHandledare.fullName}}.</p>
        </digi-notification-alert>
      </header>

      <main class="avrop__steps">
        <div class="avrop__step-header">
          <h2 class="avrop__sub-heading">
            <ng-container [ngSwitch]="currentStep">
              <ng-container *ngSwitchCase="1">Välj deltagare att tilldela</ng-container>
              <ng-container *ngSwitchCase="2">Tilldela handledare</ng-container>
              <ng-container *ngSwitchCase="3">Förehandsgranska och tilldela</ng-container>
              <ng-container *ngSwitchCase="4">Tilldelade delgare</ng-container>
            </ng-container>
          </h2>

          <div class="avrop__progress-bar" *ngIf="currentStep < 4">
            <span>Steg {{ currentStep }} av {{ totalAmountOfSteps }}:</span>
            <digi-ng-progress-progressbar
              [afSteps]="totalAmountOfSteps"
              [afActiveStep]="currentStep"
            ></digi-ng-progress-progressbar>
          </div>
        </div>
        <ng-container *ngIf="avropData$ | async as avropData">
          <div class="avrop__content" *ngIf="avropData.data.length; else noAvrop">
            <div class="avrop__filter" *ngIf="currentStep === 1">
              <h3>Filter</h3>
              <msfa-avrop-filters></msfa-avrop-filters>
            </div>
            <div class="avrop__select-handledare" *ngIf="currentStep === 2">
              <ng-container *ngIf="availableHandledare$ | async as availableHandledare; else loadingRef">
                <digi-form-select
                  *ngIf="availableHandledare?.length; else noAvailabeHandledare"
                  af-label="Välj handledare att tilldela"
                  af-placeholder="Välj handledare"
                  [afRequired]="true"
                  af-validation="error"
                  (afOnChange)="changeHandledare($event.detail)"
                >
                  <option
                    *ngFor="let availableHandledare of availableHandledare"
                    [value]="availableHandledare.ciamUserId"
                  >
                    {{ availableHandledare.fullName }}
                  </option>
                </digi-form-select>

                <ng-template #noAvailableHandledare>
                  <p>Inga handledare har behörighet till markerade deltagare</p>
                </ng-template>
              </ng-container>
            </div>

            <h3>Välj deltagare att tilldela handledare</h3>
            <msfa-avrop-list
              [availableAvrop]="avropData.data"
              [paginationMeta]="avropData.meta"
              [selectedAvrop]="selectedAvrop$ | async"
              [isLocked]="avropIsLocked$ | async"
              [isSubmitted]="avropIsSubmitted$ | async"
              [handledare]="selectedHandledare$ | async"
              [handledareConfirmed]="handledareConfirmed$ | async"
              [avropLoading]="avropLoading$ | async"
              (selectionChanged)="updateSelectedAvrop($event, currentStep)"
              (paginated)="setNewPage($event)"
            ></msfa-avrop-list>
          </div>

          <div class="avrop__footer" *ngIf="avropData.data.length" [ngSwitch]="currentStep">
            <digi-notification-alert
              *ngIf="error$ | async as error"
              af-heading="Felmeddelande"
              af-variation="danger"
              af-closeable="true"
              (afOnClose)="resetError()"
            >
              <p>{{error}}</p>
            </digi-notification-alert>

            <div class="avrop__cta-wrapper">
              <ng-container *ngSwitchCase="1">
                <digi-button af-size="m" (afOnClick)="lockSelectedAvrop()">Nästa</digi-button>
              </ng-container>
              <ng-container *ngSwitchCase="2">
                <digi-button af-variation="secondary" af-size="m" (afOnClick)="unlockSelectedAvrop()"
                  >Tillbaka</digi-button
                >
                <digi-button af-size="m" (afOnClick)="confirmHandledare()">Tilldela</digi-button>
              </ng-container>
              <ng-container *ngSwitchCase="3">
                <digi-button af-variation="secondary" af-size="m" (afOnClick)="unconfirmHandledare()"
                  >Tillbaka</digi-button
                >
                <digi-button af-size="m" (afOnClick)="save()">Bekräfta tilldelning</digi-button>
              </ng-container>
              <ng-container *ngSwitchCase="4">
                <digi-button af-size="m" (afOnClick)="returnToStep1()">Tillbaka till nya deltagare</digi-button>
              </ng-container>
            </div>
          </div>
        </ng-container>
      </main>
    </digi-typography>
  </section>

  <ng-template #loadingRef>
    <msfa-loader></msfa-loader>
  </ng-template>
  <ng-template #noAvailabeHandledare>
    <!-- lägg in lämpligt innehåll -->
  </ng-template>
  <ng-template #noAvrop>
    <p>Det finns för tillfället inga nya deltagare att tilldela.</p>
  </ng-template>
</msfa-layout>
