<!--
  ~ Copyright (C) 2023 StApps
  ~ This program is free software: you can redistribute it and/or modify it
  ~ under the terms of the GNU General Public License as published by the Free
  ~ Software Foundation, version 3.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT
  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
  ~ more details.
  ~
  ~ You should have received a copy of the GNU General Public License along with
  ~ this program. If not, see <https://www.gnu.org/licenses/>.
  -->

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

<ion-content color="light" parallax [parallaxSize]="130">
  <section class="user-card-wrapper">
    <ion-card class="user-card">
      <ion-card-header>
        <ion-img src="assets/imgs/header.svg"></ion-img>
        <span *ngIf="user$ | async as userInfo">
          {{ userInfo.role ? (userInfo?.role | titlecase) : ('profile.role_guest' | translate | titlecase) }}
        </span>
      </ion-card-header>
      <ion-card-content>
        <ion-img class="profile-card-img" src="assets/imgs/profile-card-head.svg"></ion-img>
        <ion-grid>
          <ion-row>
            <ion-col size="3"></ion-col>
            <ion-col
              *ngIf="data.default.loggedIn$ | async as loggedIn; else logInPrompt"
              size="9"
              class="main-info"
            >
              <ng-container *ngIf="user$ | async as userInfo">
                <ion-text class="full-name"> {{ userInfo?.name }} </ion-text>
                <div class="matriculation-number">
                  <ion-label> {{ 'profile.userInfo.studentId' | translate | uppercase }} </ion-label>
                  <ion-text> {{ userInfo?.studentId }} </ion-text>
                </div>
                <div class="user-name">
                  <ion-label> {{ 'profile.userInfo.username' | translate | uppercase }} </ion-label>
                  <ion-text>{{ userInfo?.id }}</ion-text>
                </div>
                <div class="email">
                  <ion-label> {{ 'profile.userInfo.email' | translate | uppercase }} </ion-label>
                  <ion-text> {{ userInfo?.email }} </ion-text>
                </div>
              </ng-container>
            </ion-col>
            <ng-template #logInPrompt>
              <ion-col size="9">
                <ion-text class="log-in-prompt"> {{ 'profile.userInfo.logInPrompt' | translate }} </ion-text>
              </ion-col>
            </ng-template>
          </ion-row>
        </ion-grid>
      </ion-card-content>
    </ion-card>
  </section>
  <stapps-profile-page-section
    *ngFor="let section of sections"
    [item]="section"
  ></stapps-profile-page-section>
  <section class="courses">
    <ion-label class="section-headline"> {{ 'profile.titleCourses' | translate | uppercase }} </ion-label>
    <ion-card class="courses-card">
      <ion-card-header (click)="toggleCourseCardState()">
        <span>{{ 'profile.courses.today' | translate | uppercase }}</span>
        <ion-icon [name]="courseCardState" color="dark" size="20"></ion-icon>
      </ion-card-header>
      <ion-card-content class="course-card" [class.show-card]="courseCardState === courseCardEnum.expanded">
        <ng-container *ngIf="myCoursesToday.length === 0">
          <div class="no-course">{{ 'profile.courses.no_courses' | translate }}</div>
        </ng-container>
        <ng-container *ngFor="let myCourse of myCoursesToday">
          <div class="clickable" [routerLink]="['/data-detail', myCourse.course.event.uid]">
            <div>{{ myCourse?.startTime }} - {{ myCourse?.endTime }}</div>
            <div>{{ myCourse?.course.event?.originalCategory }}</div>
            <div [class.last]="!myCourse?.course.inPlace?.name">{{ myCourse.course?.event?.name }}</div>
            <div *ngIf="myCourse.course?.inPlace?.name" [class.last]="myCourse.course?.inPlace?.name">
              {{ myCourse.course?.inPlace.name }}
            </div>
          </div>
        </ng-container>
      </ion-card-content>
    </ion-card>
  </section>
</ion-content>
