<div *ngIf="courseData != null">
    <div class="role-wrapper">
        <h5 class="role-name">{{courseRoles[1]}}</h5>
        <span class="role-instructors">
            <span *ngIf="instructorsVisible(courseData.instructors, 1, 'aktivni')">
                {{ courseData.instructors | instructorNames:1 }}
            </span>
            <span *ngIf="instructorsVisible(courseData.instructors, 1, 'zadost')" class="instructors-requested">
                {{ courseData.instructors | instructorRequests:1 }} 
            </span>
        </span>
        <button mat-icon-button *ngIf="roleAtLeast('zamestnanec')" color="light" (click)="openEditCourseInstructorsDialog(1)" #tooltip="matTooltip" matTooltip="Změnit osobu v roli '{{courseRoles[1]}}'">
            <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
        </button>
    </div>

    <div class="role-wrapper">
        <h5 class="role-name">{{courseRoles[2]}}</h5>
        <span class="role-instructors">
            <span class="role-instructors">
                <span *ngIf="instructorsVisible(courseData.instructors, 2, 'aktivni')">
                    {{ courseData.instructors | instructorNames:2 }}
                </span>
                <span *ngIf="instructorsVisible(courseData.instructors, 2, 'zadost')" class="instructors-requested">
                    {{ courseData.instructors | instructorRequests:2 }} 
                </span>
            </span>
        </span>
        <button mat-icon-button *ngIf="roleAtLeast('zamestnanec')" color="light" (click)="openEditCourseInstructorsDialog(2)" #tooltip="matTooltip" matTooltip="Změnit osobu v roli '{{courseRoles[2]}}'">
            <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
        </button>
    </div>

    <div class="role-wrapper">
        <h5 class="role-name">{{courseRoles[3]}}</h5>
        <span class="role-instructors">
            <span class="role-instructors">
                <span *ngIf="instructorsVisible(courseData.instructors, 3, 'aktivni')">
                    {{ courseData.instructors | instructorNames:3 }}
                </span>
                <span *ngIf="instructorsVisible(courseData.instructors, 3, 'zadost')" class="instructors-requested">
                    {{ courseData.instructors | instructorRequests:3 }} 
                </span>
            </span>
        </span>
        <button mat-icon-button color="light" *ngIf="roleAtLeast('zamestnanec')" (click)="openEditCourseInstructorsDialog(3)" #tooltip="matTooltip" matTooltip="Změnit osobu v roli '{{courseRoles[3]}}'">
            <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
        </button>
    </div>

    <app-saving-status [actualStatus]="courseInstructorsSavingStatus"></app-saving-status>
</div>
