<h1 mat-dialog-title>{{roleName}}:</h1>
<div mat-dialog-content>
    <!-- <div>
        přihlášení instruktoři:
        <div *ngFor="let courseInstructor of newCourseInstructors">{{courseInstructor.instructorName}}</div>
    </div>
    <br> -->
    <div *ngIf="instructorRequests.length != 0" class="requests-wrapper">
        <div class="requests-heading">Zájemci:</div>
        <div *ngFor="let instructor of instructorRequests">
            {{instructor.instructorName}}
            <a mat-flat-button #tooltip="matTooltip" matTooltip="Vybrat osobu pro kurz" (click)="chooseInstructor(instructor.instructorId)"><mat-icon color="primary">person_add</mat-icon></a>
        </div>
    </div>
    <div *ngIf="instructorRequests.length == 0" class="no-requests">
        Nikdo zatím o tuto pozici neprojevil zájem.
    </div>
    <!-- <br><br><br> -->
    <div class="form-item" *ngIf="allInstructors != null">
        <div *ngFor="let courseInstructor of newCourseInstructors; let i = index;">
            <mat-form-field appearance="outline" class="solo-mid">
                <!-- <mat-label>Vedoucí:</mat-label> -->
                <mat-select [(ngModel)]="courseInstructor.instructorId" name="instructor{{i}}" #instructor{{i}}="ngModel" #singleSelect>
                    <mat-option>
                        <ngx-mat-select-search [(ngModel)]="instructorSearchText" name="searchText" (ngModelChange)="filterInstructors()" placeholderLabel="Hledat instruktora podle jména..." 
                                                noEntriesFoundLabel="Nebyl nalezen žádný instruktor"></ngx-mat-select-search>
                    </mat-option>
                    <mat-option *ngFor="let instructor of filteredInstructors | async" [value]="instructor.ID">
                        {{instructor.firstname}} {{instructor.lastname}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <button mat-icon-button color="primary" (click)="removePosition(i)" #tooltip="matTooltip" matTooltip="Odebrat osobu z kurzu">
                <mat-icon>person_remove</mat-icon>
            </button>
        </div>
    </div>
    <app-loading-placeholder *ngIf="allInstructors == null && newCourseInstructors.length != 0" look="select"></app-loading-placeholder>
    <button mat-icon-button color="primary" (click)="addPosition()" #tooltip="matTooltip" matTooltip="Přidat ke kurzu další osobu v roli '{{roleName}}'">
        <mat-icon>add</mat-icon>
    </button>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="close()">Zrušit</button>
  <button mat-button (click)="submit()" cdkFocusInitial>Uložit</button>
  <!-- <button mat-button [mat-dialog-close]="newCourseInstructors" cdkFocusInitial>Uložit</button> -->
</div>
