@if (socialApps().length || user().identities.length) {
  @if (user(); as user) {
    <mat-card>
      <mat-card-header>
        <mat-card-title>Social Auth Accounts</mat-card-title>
        @if (socialApps().length) {
          @if (socialApps(); as socialApps) {
            <mat-form-field appearance="outline">
              <mat-label>Add Account</mat-label>
              <mat-select
                (selectionChange)="addAccount()"
                [formControl]="account"
              >
                @for (socialApp of socialApps; track socialApp) {
                  <mat-option [value]="socialApp">
                    <gt-auth-svg
                      source="dropdown"
                      [provider]="socialApp.provider"
                      [text]="socialApp.name"
                    ></gt-auth-svg>
                  </mat-option>
                }
              </mat-select>
            </mat-form-field>
          }
        }
      </mat-card-header>
      <mat-divider></mat-divider>
      <mat-card-content>
        @if (user.identities!.length === 0) {
          <p class="empty-auth">
            You haven't connected any social auth accounts.
          </p>
        } @else {
          <div class="socialaccount-list-wrapper">
            @for (
              socialAccount of user.identities;
              track socialAccount;
              let lastItem = $last
            ) {
              <div class="socialaccount-wrapper">
                <button
                  mat-stroked-button
                  (click)="
                    disconnect(
                      socialAccount.id!,
                      socialAccount.provider,
                      socialAccount.uid
                    )
                  "
                  [disabled]="disconnectLoadingId() === socialAccount.id"
                >
                  <gt-auth-svg
                    [loading]="disconnectLoadingId() === socialAccount.id"
                    source="disconnect"
                    text="Disconnect {{ socialAccount.name }}"
                    [provider]="socialAccount.provider"
                  ></gt-auth-svg>
                </button>
                <div class="email">
                  {{ socialAccount.email }}
                </div>
              </div>
              @if (!lastItem) {
                <mat-divider></mat-divider>
              }
            }
          </div>
        }
      </mat-card-content>
    </mat-card>
  }
}