<ng-container *ngIf="deleteEmployeeData$ | async as deleteEmployeeData">
  <digi-ng-dialog
    *ngIf="deleteEmployeeData.toDelete"
    [afActive]="deleteEmployeeData.toDelete"
    (afOnPrimaryClick)="deleteEmployeeModelPrimaryClick(deleteEmployeeData)"
    (afOnSecondaryClick)="closeDeleteEmployeeModal()"
    (afOnInactive)="closeDeleteEmployeeModal()"
    afHeading="Ta bort personalkonto"
    afHeadingLevel="h2"
    [afPrimaryButtonText]="getPrimaryButtonText(deleteEmployeeData.lastDeleted)"
    [afSecondaryButtonText]="getSecondaryButtonText(deleteEmployeeData.lastDeleted)"
  >
    <ng-container *ngIf="deleteEmployeeData.lastDeleted; else deletionWarning">
      <digi-notification-alert af-variation="success" af-heading="Allt gick bra" af-heading-level="h3">
        <p>Personalkonto för {{deleteEmployeeData.lastDeleted.fullName}} är borttaget.</p>
      </digi-notification-alert>
    </ng-container>
    <ng-template #deletionWarning>
      <p>Är du säker på att du vill ta bort personalkontot för {{deleteEmployeeData.toDelete.fullName}}?</p>
    </ng-template>

    <ng-container *ngIf="errorDuringDeletion$ | async as error">
      <digi-notification-alert af-variation="danger" af-heading="Någonting gick fel" af-heading-level="h3">
        <p>
          Vi kunde inte radera personalkontot för {{deleteEmployeeData.toDelete.fullName}}. Ladda om sidan och försök
          igen.
        </p>
        <p class="msfa__small-text" *ngIf="error.message">{{error.message}}</p>
      </digi-notification-alert>
    </ng-container>
  </digi-ng-dialog>
</ng-container>
