<form (ngSubmit)="saveData()" #editInstructorForm="ngForm">

    <div class="form-item" *ngIf="allSchools != null">
        <mat-form-field appearance="outline" class="solo-mid">
            <mat-label>Škola:</mat-label>
            <mat-select [(ngModel)]="model.schoolId" name="school" #school="ngModel" #singleSelect>
                <mat-option>
                    <ngx-mat-select-search [(ngModel)]="schoolSearchText" name="searchText" (ngModelChange)="filterSchools()" placeholderLabel="Hledat školu podle názvu..." 
                                            noEntriesFoundLabel="Nebyla nalezena žádná škola"></ngx-mat-select-search>
                </mat-option>
                <mat-option *ngFor="let school of filteredSchools | async" [value]="school.ID">
                    {{school.name}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
    <app-loading-placeholder *ngIf="allSchools == null" look="select"></app-loading-placeholder>

    <div class="form-item">
        <mat-form-field appearance="outline" class="solo-mid">
            <mat-label>Třída:</mat-label>
            <input matInput maxUtf8Length="60" [(ngModel)]="model.class" name="class" #class="ngModel" placeholder="">
        </mat-form-field> 
    </div>

    <div class="form-item" *ngIf="courseThemes != null">
        <mat-form-field appearance="outline" class="solo-mid">
          <mat-label>Téma kurzu:</mat-label>
          <mat-select [(ngModel)]="model.themeId" name="theme" #theme="ngModel">
              <mat-option *ngFor="let theme of courseThemes" [value]="theme.ID">
                {{theme.name}}
              </mat-option>
          </mat-select>
        </mat-form-field>
    </div>
    <app-loading-placeholder *ngIf="courseThemes == null" look="select"></app-loading-placeholder>

    <div class="form-item">
        <mat-form-field appearance="outline" class="solo-mid">
            <mat-label>Datum začátku:</mat-label>
            <input matInput required [matDatepicker]="startPicker" placeholder="1.1.2000"
                    [(ngModel)]="model.dateStart" name="dateStart" #dateStart="ngModel">
            <mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
            <mat-datepicker #startPicker startView="month"></mat-datepicker>
        </mat-form-field> 
        <span *ngIf="dateStart.invalid && dateStart.touched" class="form-error">
            <span *ngIf="dateStart.errors != null">  
                <span *ngIf="dateStart.errors.required" matTooltip="Datum začátku nebylo vyplněno">
                    <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                </span>
            </span>
        </span>
    </div>

    <div class="form-item">
        <mat-form-field appearance="outline" class="solo-mid">
            <mat-label>Datum konce:</mat-label>
            <input matInput required [matDatepicker]="endPicker" placeholder="1.1.2000"
                    [(ngModel)]="model.dateEnd" name="dateEnd" #dateEnd="ngModel">
            <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
            <mat-datepicker #endPicker startView="month"></mat-datepicker>
        </mat-form-field> 
        <span *ngIf="dateEnd.invalid && dateEnd.touched" class="form-error">
            <span *ngIf="dateEnd.errors != null">  
                <span *ngIf="dateEnd.errors.required" matTooltip="Datum konce nebylo vyplněno">
                    <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                </span>
            </span>
        </span>
    </div>

    <div class="form-item">
        <mat-form-field appearance="outline" class="solo-mid">
            <mat-label>Další informace:</mat-label>
            <textarea matInput maxUtf8Length="1000" [(ngModel)]="model.information" name="information" #information="ngModel" placeholder=""></textarea>
        </mat-form-field> 
        <span *ngIf="information.invalid" class="form-error">
            <span *ngIf="information.errors != null">
                <span *ngIf="information.errors.utfLength" class="form-error" matTooltip="{{information.errors.actualLength | utfLengthError: information.errors.maxAllowed}}"> 
                    <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                </span>
            </span>
        </span>
    </div>

    <!-- <p>delka textu v UTF8: {{model.information | utfLength}}</p> -->

    <div class="form-buttons-row">
        <a mat-raised-button color="accent" class="button-large" routerLink="/{{targetAfterSubmit}}" matTooltip="Odejít z formuláře bez uložení">
            Zrušit změny
        </a>
        <button mat-raised-button type="submit" color="primary" class="button-large" [disabled]="editInstructorForm.invalid"
                matTooltip="Formulář není správně vyplněn" [matTooltipDisabled]="editInstructorForm.valid">
            {{model.ID == 0 ? 'Vytvořit kurz' : 'Uložit změny'}}
        </button>
        <app-saving-status [actualStatus]="courseDataSavingStatus"></app-saving-status>
    </div>
</form>