<table mat-table [dataSource]="courses" class="mat-elevation-z8 full-width-table dense-table">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->
  
    <!-- Date Column -->
    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef> Termín </th>
      <td mat-cell *matCellDef="let element"> {{element.dateStart | date:"d.M."}} - {{element.dateEnd | date:"d.M.Y"}} </td>
    </ng-container>

    <!-- School Column -->
    <ng-container matColumnDef="schoolName">
        <th mat-header-cell *matHeaderCellDef> Škola </th>
        <!-- <td mat-cell *matCellDef="let element"> {{ var school = getSchoolById(element.schoolId) ? school != null ? school.name : '' : '' }} </td> -->
        <td mat-cell *matCellDef="let element"> {{ getSchoolNameById(element.schoolId) }} </td>  
      </ng-container>
  
    <!-- Class Column -->
    <ng-container matColumnDef="class">
      <th mat-header-cell *matHeaderCellDef> Třída </th>
      <td mat-cell *matCellDef="let element"> {{element.class}} </td>
    </ng-container>

    <!-- Theme Column -->
    <ng-container matColumnDef="themeName">
        <th mat-header-cell *matHeaderCellDef> Téma </th>
        <td mat-cell *matCellDef="let element"> {{ getThemeNameById(element.themeId) }} </td>
      </ng-container>

    <!-- Instructors Column -->
    <ng-container matColumnDef="instructors-1">
        <th mat-header-cell *matHeaderCellDef> {{ courseRoles[1] }} </th>
        <td mat-cell *matCellDef="let element"> 
          <span *ngIf="instructorsVisible(element.instructors, 1, 'aktivni')">
            {{ element.instructors | instructorNames:1 }}
          </span>
          <span *ngIf="instructorsVisible(element.instructors, 1, 'zadost')" class="instructors-requested">
            {{ element.instructors | instructorRequests:1 }} 
          </span>
          <span *ngIf="!instructorsVisible(element.instructors, 1, null)">
            -
          </span>
          <span *ngIf="userData != null && userData.instructor != null && !instructorsVisible(element.instructors, 1, null) && !roleAtLeast('zamestnanec')" class="show-interest-button">
            <a mat-flat-button *ngIf="userData.instructor.maxCourseRole == 1 && !isInvolved(element) && !isPast(element.dateStart)" #tooltip="matTooltip" matTooltip="Přihlásit se o tento kurz jako {{courseRoles[1]}}" (click)="showInterest(element.ID, 1)"><mat-icon color="success">event_available</mat-icon></a>
          </span>
          <span *ngIf="userData != null && userData.instructor != null && isInsterestedIn(element, 1)" class="remove-interest-button">
            <a mat-flat-button *ngIf="!isPast(element.dateStart)" #tooltip="matTooltip" matTooltip="Zrušit svou žádost o účast na kurzu" (click)="removeInterest(element.ID, 1)"><mat-icon color="accent">event_busy</mat-icon></a>
          </span>
          <span *ngIf="userData != null && userData.instructor != null && roleAtLeast('zamestnanec')" class="edit-course-instructor-button">
            <button mat-icon-button color="light" (click)="openEditCourseInstructorsDialog(element, 1)" #tooltip="matTooltip" matTooltip="Změnit osobu v roli '{{courseRoles[1]}}'">
              <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
            </button>
          </span>
        </td>
    </ng-container>

    <!-- Instructors Column -->
    <ng-container matColumnDef="instructors-2">
        <th mat-header-cell *matHeaderCellDef> {{ courseRoles[2] }} </th>
        <td mat-cell *matCellDef="let element"> 
          <span *ngIf="instructorsVisible(element.instructors, 2, 'aktivni')">
            {{ element.instructors | instructorNames:2 }}
          </span>
          <span *ngIf="instructorsVisible(element.instructors, 2, 'zadost')" class="instructors-requested">
            {{ element.instructors | instructorRequests:2 }} 
          </span>
          <span *ngIf="!instructorsVisible(element.instructors, 2, null)">
            -
          </span>
          <span *ngIf="userData != null && userData.instructor != null && !instructorsVisible(element.instructors, 2, null) && !roleAtLeast('zamestnanec')" class="show-interest-button">
            <a mat-flat-button *ngIf="userData.instructor.maxCourseRole <= 2 && !isInvolved(element) && !isPast(element.dateStart)" #tooltip="matTooltip" matTooltip="Přihlásit se o tento kurz jako {{courseRoles[2]}}" (click)="showInterest(element.ID, 2)"><mat-icon color="success">event_available</mat-icon></a>
          </span>
          <span *ngIf="userData != null && userData.instructor != null && isInsterestedIn(element, 2)" class="remove-interest-button">
            <a mat-flat-button *ngIf="!isPast(element.dateStart)" #tooltip="matTooltip" matTooltip="Zrušit svou žádost o účast na kurzu" (click)="removeInterest(element.ID, 2)"><mat-icon color="accent">event_busy</mat-icon></a>
          </span>
          <span *ngIf="userData != null && userData.instructor != null && roleAtLeast('zamestnanec')" class="edit-course-instructor-button">
            <button mat-icon-button color="light" (click)="openEditCourseInstructorsDialog(element, 2)" #tooltip="matTooltip" matTooltip="Změnit osobu v roli '{{courseRoles[2]}}'">
              <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
            </button>
          </span>
        </td>
    </ng-container>

    <!-- Instructors Column -->
    <ng-container matColumnDef="instructors-3">
        <th mat-header-cell *matHeaderCellDef> {{ courseRoles[3] }} </th>
        <td mat-cell *matCellDef="let element">
          <span *ngIf="instructorsVisible(element.instructors, 3, 'aktivni')">
            {{ element.instructors | instructorNames:3 }}
          </span>
          <span *ngIf="instructorsVisible(element.instructors, 3, 'zadost')" class="instructors-requested">
            {{ element.instructors | instructorRequests:3 }} 
          </span>
          <span *ngIf="!instructorsVisible(element.instructors, 3, null)">
            -
          </span>
          <span *ngIf="userData != null && userData.instructor != null && !instructorsVisible(element.instructors, 3, null) && !roleAtLeast('zamestnanec')" class="show-interest-button">
            <a mat-flat-button *ngIf="userData.instructor.maxCourseRole <= 3 && !isInvolved(element) && !isPast(element.dateStart)" #tooltip="matTooltip" matTooltip="Přihlásit se o tento kurz jako {{courseRoles[3]}}" (click)="showInterest(element.ID, 3)"><mat-icon color="success">event_available</mat-icon></a>
          </span>
          <span *ngIf="userData != null && userData.instructor != null && isInsterestedIn(element, 3)" class="remove-interest-button">
            <a mat-flat-button *ngIf="!isPast(element.dateStart)" #tooltip="matTooltip" matTooltip="Zrušit svou žádost o účast na kurzu" (click)="removeInterest(element.ID, 3)"><mat-icon color="accent">event_busy</mat-icon></a>
          </span>
          <span *ngIf="userData != null && userData.instructor != null && roleAtLeast('zamestnanec')" class="edit-course-instructor-button">
            <button mat-icon-button color="light" (click)="openEditCourseInstructorsDialog(element, 3)" #tooltip="matTooltip" matTooltip="Změnit osobu v roli '{{courseRoles[3]}}'">
              <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
            </button>
          </span>
        </td>
    </ng-container>

    <!-- Link Column -->
    <ng-container matColumnDef="link">
      <th mat-header-cell *matHeaderCellDef> Detail </th>
      <td mat-cell *matCellDef="let element"><a mat-flat-button color="accent" #tooltip="matTooltip" matTooltip="Stránka s podrobnostmi o kurzu" routerLink="/{{detailLink}}/{{element.ID}}"><mat-icon color="primary">article</mat-icon></a></td>
    </ng-container>

    <!-- Footer -->
    <ng-container matColumnDef="footer">
        <td mat-footer-cell *matFooterCellDef colspan="8" class="table-item-counter">
            <span>Celkem kurzů: {{courses.length}}</span>
        </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns; let element;" class="{{isPast(element.dateStart) ? 'past' : 'future'}}"></tr>
    <tr mat-footer-row *matFooterRowDef="['footer']" class="footer-row"></tr>

</table>

<div class="saving-indicator-absolute" *ngIf="saveInterestSavingStatus != 0">
  stav ukládání: 
  <app-saving-status [actualStatus]="saveInterestSavingStatus"></app-saving-status>
</div>

