<h1 *ngIf="subject" class="mat-display-1">{{subject.name}}</h1>
<button mat-raised-button color="primary" (click)="addStudent()">Add student</button>

<mat-accordion *ngIf="subject">
  <mat-expansion-panel *ngFor="let studentAssoc of subject.studentsAssoc">
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{studentAssoc.student.firstname}} {{studentAssoc.student.lastname}}
      </mat-panel-title>
      <mat-panel-description>
        <mat-checkbox #payment [checked]="studentAssoc.paymentConfirmed" (change)="confirmPayment(studentAssoc.student.id!, payment.checked)">Payment confirmed</mat-checkbox>
      </mat-panel-description>
    </mat-expansion-panel-header>
    <mat-form-field appearance="fill">
      <mat-label>Grade</mat-label>
      <input matInput type="number" placeholder="Range 2-5" #grade>
    </mat-form-field>
    <mat-form-field appearance="fill">
      <mat-label>Description</mat-label>
      <input matInput placeholder="Description" #description>
    </mat-form-field>
    <button mat-raised-button color="primary" (click)="addGrade(studentAssoc.student.id!, grade, description)">
      Add Grade
    </button>
    <br>
    Email: {{studentAssoc.student.email}} <br>
    Telephone: {{studentAssoc.student.telephone}} <br>
    Grades:
    <span *ngFor=" let grade of studentAssoc.student.grades" [matTooltip]="grade.description"
          [matMenuTriggerFor]="menu">
      {{grade.mark}},
      <mat-menu #menu="matMenu">
        <button (click)="deleteGrade(studentAssoc.student.id!, grade.id!)" mat-menu-item>Delete</button>
      </mat-menu>
    </span>
    <br>
    <button mat-raised-button color="primary" (click)="deleteStudent(studentAssoc.student.id!)">Delete student</button>
  </mat-expansion-panel>
</mat-accordion>