<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>{{ 'profile.title' | translate | titlecase }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <section>
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-card *ngIf="userInfo">
            <ion-card-content>
              <ion-grid>
                <ion-row>
                  <ion-col size="3">
                    <ion-thumbnail>
                      <ion-icon name="person"></ion-icon>
                    </ion-thumbnail>
                  </ion-col>
                  <ion-col size="9">
                    <ion-row class="main-info">
                      <span
                        >{{ userInfo.givenName }}
                        {{ userInfo.familyName }}</span
                      >
                    </ion-row>
                    <ion-row class="additional-info">
                      <span>{{ userInfo.email }}</span>
                      <span
                        >{{
                          'profile.userInfo.studentId' | translate | titlecase
                        }}: {{ userInfo.studentId }}</span
                      >
                    </ion-row>
                  </ion-col>
                </ion-row>
              </ion-grid>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col class="login">
          <a *ngIf="!data.default.loggedIn; else loggedIn" (click)="signIn()">{{
            'profile.buttons.default.log_in' | translate | titlecase
          }}</a>
          <ng-template #loggedIn
            ><a (click)="signOut()">{{
              'profile.buttons.default.log_out' | translate | titlecase
            }}</a></ng-template
          >
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col class="login">
          <a
            *ngIf="!data.paia.loggedIn; else paiaLoggedIn"
            (click)="signInPAIA()"
            >{{ 'profile.buttons.paia.log_in' | translate | titlecase }}</a
          >
          <ng-template #paiaLoggedIn
            ><a (click)="signOutPAIA()">{{
              'profile.buttons.paia.log_out' | translate | titlecase
            }}</a></ng-template
          >
        </ion-col>
      </ion-row>
    </ion-grid>
  </section>
</ion-content>
