<msfa-layout>
  <digi-typography>
    <section class="employee-invite">
      <header class="employee-invite__header">
        <h1>Skapa personalkonto</h1>
        <p>Här kan du skicka en inbjudningslänk via e-post för att skapa nya personalkonton.</p>
      </header>
      <form [formGroup]="formGroup" (ngSubmit)="submitForm()">
        <div class="employee-invite__description">
          <h2>Skicka en inbjudningslänk</h2>
          <ol>
            <li>Skriv in personalens e-postadresser i fältet och klicka på "Skicka inbjudningslänk".</li>
            <li>
              Personalen öppnar inbjudningslänken via sin e-post och genom identifiering med Bank-ID skapas det nya
              personalkontot.
            </li>
            <li>
              När personalkontot är skapat ser du det i personallistan. Initialt saknar det nya personalkontot
              behörigheter.
            </li>
            <li>
              Tilldela personalkontot behörigheter genom att klicka på personalens namn i personallistan. Välj redigera
              i personalkontot och lägg till behörigheter. Nu kan personalen logga in och arbeta.
            </li>
          </ol>
        </div>
        <digi-ng-form-textarea
          formControlName="emails"
          afSize="m"
          afDescription="Fältet accepterar kommaseparerade e-postadresser för att skicka inbjudningar till flera e-postadresser samtidigt."
          [afRequired]="true"
          [afDisableValidStyle]="true"
          [afInvalidMessage]="emailsControl.errors?.message || 'Ogiltig e-postadress'"
          [afInvalid]="emailsControl.invalid && emailsControl.dirty"
          afLabel="E-postadresser"
        ></digi-ng-form-textarea>

        <digi-notification-alert
          *ngIf="(lastInvites$ | async) && !emailsControl.dirty"
          class="employee-invite__alert"
          [afVariation]="alertTexts.variation"
          [afHeading]="alertTexts.heading"
          af-heading-level="h3"
        >
          <p *ngIf="alertTexts.variation === 'warning'">
            Inbjudan skickades endast till vissa mottagare. Skicka inbjudningar igen till de e-postadresser där inbjudan
            misslyckades.
          </p>
          <p *ngIf="alertTexts.variation === 'danger'">Något gick fel. Skicka inbjudningar igen.</p>
          <ng-container *ngIf="lastInvitedFailedInvites.length">
            <h4>Inbjudan kunde inte skickas till:</h4>
            <p>{{lastInvitedFailedInvites.join(', ')}}</p>
          </ng-container>
          <ng-container *ngIf="lastInvitedNewUsers.length">
            <h4>Inbjudan har skickats till:</h4>
            <p>{{lastInvitedNewUsers.join(', ')}}</p>
          </ng-container>
          <ng-container *ngIf="lastInvitedAssignedUsers.length">
            <h4>Inbjudan har skickats till:</h4>
            <p>{{lastInvitedAssignedUsers.join(', ')}}</p>
            <p>
              {{lastInvitedAssignedUsers.length > 1 ? 'Användarna' : 'Användaren'}} fanns redan i systemet och är nu
              tillagd i personallistan.
            </p>
          </ng-container>
          <ng-container *ngIf="lastInvitedAlreadyInvitedUsers.length">
            <h4>E-postadressen har redan fått en inbjudan:</h4>
            <p>{{lastInvitedAlreadyInvitedUsers.join(', ')}}</p>
          </ng-container>
          <ng-container *ngIf="lastInvitedExistingUsers.length">
            <h4>E-postadressen var redan registrerad:</h4>
            <p>{{lastInvitedExistingUsers.join(', ')}}</p>
          </ng-container>
        </digi-notification-alert>

        <footer class="employee-invite__footer">
          <digi-button af-size="m" af-type="submit"> Skicka inbjudningslänk </digi-button>
          <msfa-back-link [route]="['/administration/personal']">Tillbaka till personallistan</msfa-back-link>
        </footer>
      </form>
    </section>
  </digi-typography>
</msfa-layout>
