<msfa-layout>
  <section class="employee-card">
    <digi-typography *ngIf="employee$ | async as employee; else loadingRef">
      <ng-container *ngIf="lastUpdatedEmployeeId$ | async as lastUpdatedEmployeeId">
        <digi-notification-alert
          *ngIf="employee.id === lastUpdatedEmployeeId"
          af-variation="success"
          af-heading="Allt gick bra"
          af-heading-level="h2"
          [afCloseable]="true"
          (afOnClose)="closeUpdatedNotificationAlert()"
        >
          <p>Personalkontot för {{employee.fullName}} har uppdaterats.</p>
        </digi-notification-alert>
      </ng-container>
      <header class="employee-card__header">
        <a class="employee-card__edit-button" [routerLink]="['/administration/redigera-personalkonto', employee.id]"
          >Redigera</a
        >
        <h1>Personalkonto</h1>
      </header>
      <p>Här ser du personalkontot. Ändra behörighet genom att klicka på redigera.</p>
      <div class="employee-card__contents">
        <div class="employee-card__block">
          <h2>Personuppgifter</h2>
          <dl>
            <dt>Förnamn</dt>
            <dd *ngIf="employee.firstName; else emptyDD">{{ employee.firstName }}</dd>
            <dt>Efternamn</dt>
            <dd *ngIf="employee.lastName; else emptyDD">{{ employee.lastName }}</dd>
            <dt>Personnummer</dt>
            <dd *ngIf="employee.ssn; else emptyDD">
              <msfa-hide-text
                symbols="********-****"
                [changingText]="employee.ssn"
                ariaLabelType="personnummer"
              ></msfa-hide-text>
            </dd>
            <dt>E-postadress</dt>
            <dd *ngIf="employee.email; else emptyDD">
              <a href="mailto:{{employee.email}}">{{employee.email}}</a>
            </dd>
          </dl>
        </div>
        <div class="employee-card__block">
          <h2>Behörigheter</h2>
          <p>Här kan du se personalkontots behörigheter.</p>
        </div>
        <div class="employee-card__block">
          <h3>Tjänst</h3>
          <ul class="employee-card__list" *ngIf="employee.tjanster.length">
            <li *ngFor="let tjanst of employee.tjanster">
              <digi-icon-check-circle
                class="employee-card__authorization-icon employee-card__authorization-icon--authorized"
              ></digi-icon-check-circle>
              {{ tjanst.name }}
            </li>
          </ul>
          <p *ngIf="!employee.tjanster.length">Kontot har inga registrerade tjänster ännu.</p>
        </div>
        <div class="employee-card__block">
          <h3>Utförande verksamheter och utförande adresser</h3>
          <p *ngIf="employee.allaUtforandeVerksamheter; else specificUtforandeVerksamheter">
            Kontot har behörighet till alla utförande verksamheter och utförande adresser inom organisationen.
          </p>
          <ng-template #specificUtforandeVerksamheter>
            <ul
              *ngIf="employee.utforandeVerksamheter?.length; else missingUtforandeVerksamheter"
              class="employee-card__utforandeverksamheter"
            >
              <li *ngFor="let utforandeVerksamhet of employee.utforandeVerksamheter">
                <digi-info-card
                  [afHeading]="utforandeVerksamhet.name"
                  af-heading-level="h4"
                  af-type="info"
                  class="employee-card__utforandeverksamhet-card"
                >
                  <p *ngIf="utforandeVerksamhet.allaAdresser">Alla adresser inom utförande verksamheten valda.</p>

                  <digi-ng-layout-expansion-panel
                    *ngIf="!utforandeVerksamhet.allaAdresser && utforandeVerksamhet.adresser.length > 0"
                    [afExpanded]="isAccordionExpanded(utforandeVerksamhet.id)"
                    (click)="toggleAccordionExpanded(utforandeVerksamhet.id)"
                  >
                    <span data-slot-trigger>
                      {{ isAccordionExpanded(utforandeVerksamhet.id) ? 'Dölj' : 'Visa' }}
                      {{utforandeVerksamhet.adresser.length}} {{utforandeVerksamhet.adresser.length === 1 ? 'adress' :
                      'adresser'}}
                    </span>
                    <ul class="employee-card__adresser">
                      <li *ngFor="let address of utforandeVerksamhet.adresser; let last = last">
                        {{address.name}}{{last ? '' : ','}}
                      </li>
                    </ul>
                  </digi-ng-layout-expansion-panel>
                </digi-info-card>
              </li>
            </ul>
            <ng-template #missingUtforandeVerksamheter>
              <p>Kontot har inga registrerade utförande verksamheter eller utförande adresser ännu.</p>
            </ng-template>
          </ng-template>
        </div>
        <div class="employee-card__block">
          <h3>Roller</h3>
          <p>
            Här ser du systemanvändarens tilldelade roller. Rollen "Administrera behörigheter" gäller för hela
            organisationen medan de andra rollerna är begränsade till de utförande verksamheter och adresser som du
            tilldelat systemanvändaren. <msfa-roles-dialog></msfa-roles-dialog>
          </p>
          <ul class="employee-card__list">
            <li *ngFor="let role of allRoles">
              <digi-icon-check-circle
                *ngIf="employee.roles.includes(role.type); else unauthorized"
                class="employee-card__authorization-icon employee-card__authorization-icon--authorized"
              ></digi-icon-check-circle>
              <ng-template #unauthorized>
                <digi-icon-x-button
                  class="employee-card__authorization-icon employee-card__authorization-icon--unauthorized"
                ></digi-icon-x-button>
              </ng-template>
              {{role.name}}
            </li>
          </ul>
        </div>
      </div>
    </digi-typography>
    <footer class="employee-card__footer">
      <msfa-back-link [route]="['/administration/personal']">Tillbaka till personallistan</msfa-back-link>
    </footer>
  </section>
  <ng-template #loadingRef>
    <digi-ng-skeleton-base [afCount]="3" afText="Laddar personalkonto"></digi-ng-skeleton-base>
  </ng-template>
  <ng-template #emptyDD class="employee-card__list">
    <dd>
      <span aria-hidden="true">-</span>
      <span class="msfa__a11y-sr-only">Info saknas</span>
    </dd>
  </ng-template>
  <ng-template #emptyText>
    <span aria-hidden="true">-</span>
    <span class="msfa__a11y-sr-only">Info saknas</span>
  </ng-template>
</msfa-layout>
