<h2>{{title}}</h2>

<p>Stránka slouží pouze jako nástroj k usnadnění výpočtu hodnot a výsledek se neukládá do databáze.</p>

<form #editRatesForm="ngForm" class="month-form">
    <mat-form-field appearance="outline" class="amount">
    <mat-label>Měsíc</mat-label>
    <mat-select (selectionChange)="onMonthChange()" [(ngModel)]="selectedYearMonth">
        <mat-option *ngFor="let yearMonth of possibleMonths; let i = index" [value]="yearMonth.year + '-' + yearMonth.month">
          {{getMonthName(yearMonth.month)}} {{yearMonth.year}}
        </mat-option>
    </mat-select>
    </mat-form-field>
</form> 

<form #editRatesForm="ngForm">
    <div class="three-column-layout">
        <div class="column">
            <mat-form-field appearance="outline" class="amount">
            <mat-label>Výplata za kurz v roli {{courseRoles[1]}}</mat-label>
            <input matInput required placeholder="" numberValue [(ngModel)]="rate1" name="rate1input" #rate1input="ngModel">
            <span matSuffix>Kč</span>
            </mat-form-field>
            <span *ngIf="rate1input.invalid && rate1input.touched" class="form-error">
                <span *ngIf="rate1input.errors != null">  
                    <span *ngIf="rate1input.errors.required" matTooltip="Hodnota nebyla vyplněna">
                        <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                    </span>
                    <span *ngIf="rate1input.errors.numberValue" matTooltip="Hodnota není platné číslo">
                    <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                </span>
                </span>
            </span>
        </div>

        <div class="column">
            <mat-form-field appearance="outline" class="amount">
            <mat-label>Výplata za kurz v roli {{courseRoles[2]}}</mat-label>
            <input matInput required placeholder="" numberValue [(ngModel)]="rate2" name="rate2input" #rate2input="ngModel">
            <span matSuffix>Kč</span>
            </mat-form-field>
            <span *ngIf="rate2input.invalid && rate2input.touched" class="form-error">
                <span *ngIf="rate2input.errors != null">  
                    <span *ngIf="rate2input.errors.required" matTooltip="Hodnota nebyla vyplněna">
                        <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                    </span>
                    <span *ngIf="rate2input.errors.numberValue" matTooltip="Hodnota není platné číslo">
                    <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                </span>
                </span>
            </span>
        </div>

        <div class="column">
            <mat-form-field appearance="outline" class="amount">
            <mat-label>Výplata za kurz v roli {{courseRoles[3]}}</mat-label>
            <input matInput required placeholder="" numberValue [(ngModel)]="rate3" name="rate3input" #rate3input="ngModel">
            <span matSuffix>Kč</span>
            </mat-form-field>
            <span *ngIf="rate3input.invalid && rate3input.touched" class="form-error">
                <span *ngIf="rate3input.errors != null">  
                    <span *ngIf="rate3input.errors.required" matTooltip="Hodnota nebyla vyplněna">
                        <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                    </span>
                    <span *ngIf="rate3input.errors.numberValue" matTooltip="Hodnota není platné číslo">
                    <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                </span>
                </span>
            </span>
        </div>
    </div>
</form> 

<app-instructor-payouts-table *ngIf="thisMonthCourses != null && allInstructors != null" 
                            [thisMonthCourses]="thisMonthCourses" [allInstructors]="allInstructors"
                            [rate1]="rate1" [rate2]="rate2" [rate3]="rate3" [yearMonth]="year + '-' + month"
                            ></app-instructor-payouts-table>
<app-loading-placeholder *ngIf="thisMonthCourses == null || allInstructors == null" look="table"></app-loading-placeholder>