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

    <div class="form-item">
        <mat-form-field appearance="outline" class="solo-mid">
            <mat-label>Třída:</mat-label>
            <input matInput required maxUtf8Length="60" [(ngModel)]="model.class" name="class" #class="ngModel" placeholder="">
        </mat-form-field> 
        <span *ngIf="class.invalid && class.touched" class="form-error">
            <span *ngIf="class.errors != null">  
                <span *ngIf="class.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" *ngIf="courseThemes != null">
        <mat-form-field appearance="outline" class="solo-mid">
          <mat-label>Téma kurzu:</mat-label>
          <mat-select required [(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-checkbox [(ngModel)]="ownScope">Mám domluvený vlastní termín</mat-checkbox>
    </div> 

    <div class="form-item" *ngIf="freeScopes != null && ownScope == false">
        <mat-form-field appearance="outline" class="solo-mid">
          <mat-label>Termín:</mat-label>
          <mat-select required (selectionChange)="scopeChanged($event)">
              <mat-option *ngFor="let scope of freeScopes" [value]="scope.from + '|' + scope.to">
                {{scope.from | date:"d.M.Y"}} - {{scope.to | date:"d.M.Y"}} (počet míst: {{scope.capacity}})
              </mat-option>
          </mat-select>
        </mat-form-field>
    </div>
    <app-loading-placeholder *ngIf="freeScopes == null && ownScope == false" look="select"></app-loading-placeholder>

    <div class="form-item" *ngIf="ownScope == true">
        <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" *ngIf="ownScope == true">
        <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>

    <div class="form-item" *ngIf="model.ID == 0">
        <mat-checkbox [(ngModel)]="personalDataAgreement">Souhlasím se zpracováním osobních údajů dle vyhlášky č. MŠMT 74/2005 Sbn</mat-checkbox>
    </div> 

    <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]="enlistCourseForm.invalid || (model.ID == 0 && personalDataAgreement == false)"
                matTooltip="Formulář není správně vyplněn" [matTooltipDisabled]="enlistCourseForm.valid">
            {{model.ID == 0 ? 'Rezervovat kurz' : 'Uložit změny'}}
        </button>
        <app-saving-status [actualStatus]="courseDataSavingStatus"></app-saving-status>
    </div>
</form>
