<msfa-layout>
  <digi-typography>
    <section class="my-account">
      <header class="my-account__header">
        <div class="my-account__heading-wrapper">
          <h1>Mitt konto</h1>
          <a class="my-account__logout" routerLink="/logga-ut">
            <msfa-icon [icon]="IconType.LOGOUT"></msfa-icon>
            Logga ut
          </a>
        </div>
      </header>
      <main class="my-account__contents" *ngIf="user$ | async as user; else loadingRef">
        <div class="my-account__block">
          <h2>Personuppgifter</h2>
          <dl>
            <dt>Förnamn</dt>
            <dd>
              <ng-container *ngIf="user.firstName; else emptyText">{{ user.firstName }}</ng-container>
            </dd>
            <dt>Efternamn</dt>
            <dd>
              <ng-container *ngIf="user.lastName; else emptyText">{{ user.lastName }}</ng-container>
            </dd>
            <dt>Personnummer</dt>
            <dd>
              <msfa-hide-text
                *ngIf="user.ssn; else emptyText"
                symbols="********-****"
                [changingText]="user.ssn"
                ariaLabelType="personnummer"
              ></msfa-hide-text>
            </dd>
            <dt>E-postadress</dt>
            <dd>
              <a *ngIf="user.email; else emptyText" href="mailto:{{user.email}}">{{user.email}}</a>
            </dd>
          </dl>
        </div>

        <div class="my-account__block" *ngIf="selectedOrganization$ | async as selectedOrganization">
          <h2>Organisation</h2>
          <p>
            Din nuvarande organisation är: {{selectedOrganization.name}}, {{selectedOrganization.organizationNumber}}.
          </p>
          <ng-container *ngIf="(otherOrganizations$ | async).length">
            <p>Du tillhör flera organisationer. Du kan byta organisation i formuläret.</p>

            <msfa-organization-picker-form
              [compact]="true"
              [organizations]="organizations$ | async"
              [selectedOrganization]="selectedOrganization"
              label="Byt organisation"
              submitText="Byt organisation"
              (selectedOrganizationChanged)="loginWithOrganization($event)"
            ></msfa-organization-picker-form>
          </ng-container>
        </div>

        <div class="my-account__block">
          <h2>Behörigheter</h2>
          <p>Här kan du se dina behörigheter i systemet.</p>
        </div>

        <div class="my-account__block">
          <h3>Roller</h3>
          <p>
            Här ser du dina 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="my-account__list">
            <li class="my-account__list-item" *ngFor="let role of allRoles">
              <digi-icon-check-circle
                *ngIf="user.roles.includes(role.type); else unauthorized"
                class="msfa__digi-icon my-account__authorization-icon my-account__authorization-icon--authorized"
              ></digi-icon-check-circle>
              <ng-template #unauthorized>
                <digi-icon-x-button
                  class="msfa__digi-icon my-account__authorization-icon my-account__authorization-icon--unauthorized"
                ></digi-icon-x-button>
              </ng-template>
              {{role.name}}
            </li>
          </ul>
        </div>
      </main>
    </section>
  </digi-typography>
</msfa-layout>

<ng-template #loadingRef>
  <digi-ng-skeleton-base [afCount]="3" afText="Laddar kontoinformation"></digi-ng-skeleton-base>
</ng-template>

<ng-template #emptyText>
  <span aria-hidden="true">-</span>
  <span class="msfa__a11y-sr-only">Info saknas</span>
</ng-template>
