<msfa-layout>
  <digi-typography>
    <section class="employee-form" *ngIf="employee$ | async as employee">
      <header class="employee-form__header">
        <h1>Redigera personalkonto</h1>
        <msfa-employee-delete [returnToEmployeeList]="true"></msfa-employee-delete>
        <!-- <digi-button
          class="employee-card__delete-account-button"
          af-variation="primary"
          [afAriaLabel]="'Ta bort konto för ' + employee.fullName"
          (afOnClick)="setEmployeeToDelete(employee)"
        >
          Ta bort konto
        </digi-button> -->
      </header>

      <div class="employee-form__block">
        <h2>Personuppgifter</h2>
        <dl>
          <dt>Förnamn</dt>
          <dd>{{employee.firstName}}</dd>
        </dl>
        <dl>
          <dt>Efternamn</dt>
          <dd>{{employee.lastName}}</dd>
        </dl>
        <dl>
          <dt>Personnummer</dt>
          <dd>
            <msfa-hide-text
              symbols="********-****"
              [changingText]="employee.ssn"
              ariaLabelType="personnummer"
            ></msfa-hide-text>
          </dd>
        </dl>
      </div>
      <div class="employee-form__block">
        <msfa-edit-employee-form
          *ngIf="employee && (tjanster$ | async)"
          [employee]="employee"
          [availableRoles]="availableRoles"
          [availableTjanster]="tjanster$ | async"
          [availableUtforandeVerksamheter]="availableUtforandeVerksamheter$ | async"
          [errorWhileUpdating]="errorWhileUpdating$ | async"
          (tjansterSelected)="setupAvailableUtforandeVerksamheter($event)"
          (formSubmitted)="updateEmployee($event)"
          (closeError)="closeError()"
        ></msfa-edit-employee-form>
      </div>
    </section>
  </digi-typography>
</msfa-layout>
