<!--
  ~ 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>{{ 'assessments.TITLE' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-segment
    #segment
    [scrollable]="true"
    mode="md"
    (ionChange)="sharedAxisChoreographer.changeViewForState($any(segment.value))"
    value=""
  >
    <ion-segment-button *ngFor="let key of assessmentKeys" [value]="key">
      <div *ngIf="assessments | async as assessments">
        <ion-label
          class="ion-text-wrap"
          *ngIf="assessments[key].courseOfStudy | async as course; else defaultLabel"
        >
          {{ 'name' | thingTranslate: course }} ({{ 'academicDegree' | thingTranslate: course }})
        </ion-label>
      </div>
      <ng-template #defaultLabel>
        <ion-label>{{ key }}</ion-label>
      </ng-template>
    </ion-segment-button>
  </ion-segment>
  <div
    [ngSwitch]="sharedAxisChoreographer.currentValue"
    [@materialSharedAxisX]="sharedAxisChoreographer.animationState"
    (@materialSharedAxisX.done)="sharedAxisChoreographer.animationDone()"
    *ngIf="assessments | async as items"
    class="content"
  >
    <course-of-study-assessment
      [assessments]="items[sharedAxisChoreographer.currentValue].assessments"
      [courseOfStudy]="items[sharedAxisChoreographer.currentValue].courseOfStudy | async"
    ></course-of-study-assessment>
  </div>
</ion-content>
