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

    <div class="two-column-layout">
        <div class="column">
            <div class="form-item">
                <mat-form-field appearance="outline" class="solo-mid">
                    <mat-label>Čas příjezdu:</mat-label>
                    <input type="time" matInput required [(ngModel)]="model.arrivalTime" name="arrivalTime" #arrivalTime="ngModel" placeholder="">
                </mat-form-field> 
                <span *ngIf="arrivalTime.invalid && arrivalTime.touched" class="form-error">
                    <span *ngIf="arrivalTime.errors != null">
                        <span *ngIf="arrivalTime.errors.required" class="form-error" matTooltip="Čas příjezdu není vyplněn"> 
                            <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                        </span>
                    </span>
                </span>
            </div>
        </div>
    
        <div class="column">
            <div class="form-item">
                <mat-form-field appearance="outline" class="solo-mid">
                    <mat-label>Čas odjezdu:</mat-label>
                    <input type="time" matInput required [(ngModel)]="model.departureTime" name="departureTime" #departureTime="ngModel" placeholder="">
                </mat-form-field> 
                <span *ngIf="departureTime.invalid && departureTime.touched" class="form-error">
                    <span *ngIf="departureTime.errors != null">
                        <span *ngIf="departureTime.errors.required" class="form-error" matTooltip="Čas odjezdu není vyplněn"> 
                            <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                        </span>
                    </span>
                </span>
            </div>
        </div>
    </div>

    <div class="two-column-layout">
        <div class="column">
            <div class="form-item">
                <mat-form-field appearance="outline" class="solo-mid">
                    <mat-label>Počet chlapců (účastníků):</mat-label>
                    <input matInput required numberValue [(ngModel)]="model.maleCount" name="maleCount" #maleCount="ngModel" placeholder="">
                </mat-form-field> 
                <span *ngIf="maleCount.invalid && maleCount.touched" class="form-error">
                    <span *ngIf="maleCount.errors != null">
                        <span *ngIf="maleCount.errors.numberValue" class="form-error" matTooltip="Počet chlapců není platné číslo"> 
                            <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                        </span>
                        <span *ngIf="maleCount.errors.required" class="form-error" matTooltip="Počet chlapců není vyplněn"> 
                            <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                        </span>
                    </span>
                </span>
            </div>
        </div>
    
        <div class="column">
            <div class="form-item">
                <mat-form-field appearance="outline" class="solo-mid">
                    <mat-label>Počet dívek (účastnic):</mat-label>
                    <input matInput required numberValue [(ngModel)]="model.femaleCount" name="femaleCount" #femaleCount="ngModel" placeholder="">
                </mat-form-field> 
                <span *ngIf="femaleCount.invalid && femaleCount.touched" class="form-error">
                    <span *ngIf="femaleCount.errors != null">
                        <span *ngIf="femaleCount.errors.numberValue" class="form-error" matTooltip="Počet dívek není platné číslo"> 
                            <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                        </span>
                        <span *ngIf="femaleCount.errors.required" class="form-error" matTooltip="Počet dívek není vyplněn"> 
                            <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                        </span>
                    </span>
                </span>
            </div>
        </div>
    </div>

    <div class="two-column-layout">
        <div class="column">
            <div class="form-item">
                <mat-form-field appearance="outline" class="solo-mid">
                    <mat-label>Počet mužů v pedagogickém doprovodu:</mat-label>
                    <input matInput required numberValue [(ngModel)]="model.maleTeachers" name="maleTeachers" #maleTeachers="ngModel" placeholder="">
                </mat-form-field> 
                <span *ngIf="maleTeachers.invalid && maleTeachers.touched" class="form-error">
                    <span *ngIf="maleTeachers.errors != null">
                        <span *ngIf="maleTeachers.errors.numberValue" class="form-error" matTooltip="Počet mužů není platné číslo"> 
                            <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                        </span>
                        <span *ngIf="maleTeachers.errors.required" class="form-error" matTooltip="Počet mužů není vyplněn"> 
                            <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                        </span>
                    </span>
                </span>
            </div>
        </div>
    
        <div class="column">
            <div class="form-item">
                <mat-form-field appearance="outline" class="solo-mid">
                    <mat-label>Počet žen v pedagogickém doprovodu:</mat-label>
                    <input matInput required numberValue [(ngModel)]="model.femaleTeachers" name="femaleTeachers" #femaleTeachers="ngModel" placeholder="">
                </mat-form-field> 
                <span *ngIf="femaleTeachers.invalid && femaleTeachers.touched" class="form-error">
                    <span *ngIf="femaleTeachers.errors != null">
                        <span *ngIf="femaleTeachers.errors.numberValue" class="form-error" matTooltip="Počet žen není platné číslo"> 
                            <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                        </span>
                        <span *ngIf="femaleTeachers.errors.required" class="form-error" matTooltip="Počet žen není vyplněn"> 
                            <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                        </span>
                    </span>
                </span>
            </div>
        </div>
    </div>

    <div class="form-item">
        <mat-checkbox [(ngModel)]="model.snacks">Máme zájem využít možnost svačin</mat-checkbox>
    </div> 

    <div class="form-group">
        <h4>Kontaktní osoba</h4>

        <div class="form-item">
            <mat-form-field appearance="outline" class="solo-mid">
                <mat-label>Jméno a příjmení:</mat-label>
                <input matInput required [(ngModel)]="model.personName" name="personName" #personName="ngModel" placeholder="">
            </mat-form-field> 
            <span *ngIf="personName.invalid && personName.touched" class="form-error">
                <span *ngIf="personName.errors != null">  
                    <span *ngIf="personName.errors.required" matTooltip="Jméno kontaktní osoby 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>Email:</mat-label>
                <input matInput email [(ngModel)]="model.personEmail" name="personEmail" #personEmail="ngModel" placeholder="">
            </mat-form-field> 
            <span *ngIf="personEmail.invalid && personEmail.touched" class="form-error">
                <span *ngIf="personEmail.errors != null">  
                    <span *ngIf="personEmail.errors.email" matTooltip="Email nemá správný tvar">
                        <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>Telefon:</mat-label>
                <input matInput required [(ngModel)]="model.personPhone" name="personPhone" #personPhone="ngModel" placeholder="">
            </mat-form-field> 
            <span *ngIf="personPhone.invalid && personPhone.touched" class="form-error">
                <span *ngIf="personPhone.errors != null">  
                    <span *ngIf="personPhone.errors.required" matTooltip="Telefon kontaktní osoby nebyl vyplněn">
                        <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                    </span>
                </span>
            </span>
        </div>
    </div>

    <div class="form-item">
        <mat-form-field appearance="outline" class="solo-mid">
            <mat-label>Očekávání od kurzu:</mat-label>
            <textarea matInput maxUtf8Length="2000" [(ngModel)]="model.expectations" name="expectations" #expectations="ngModel" placeholder=""></textarea>
        </mat-form-field> 
        <span *ngIf="expectations.invalid" class="form-error">
            <span *ngIf="expectations.errors != null">
                <span *ngIf="expectations.errors.utfLength" class="form-error" matTooltip="{{expectations.errors.actualLength | utfLengthError: expectations.errors.maxAllowed}}"> 
                    <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>Aktuální situace ve třídě:</mat-label>
            <textarea matInput maxUtf8Length="2000" [(ngModel)]="model.actualSituation" name="actualSituation" #actualSituation="ngModel" placeholder=""></textarea>
        </mat-form-field> 
        <span *ngIf="actualSituation.invalid" class="form-error">
            <span *ngIf="actualSituation.errors != null">
                <span *ngIf="actualSituation.errors.utfLength" class="form-error" matTooltip="{{actualSituation.errors.actualLength | utfLengthError: actualSituation.errors.maxAllowed}}"> 
                    <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>Diety a jiná specifika týkající se stravy:</mat-label>
            <textarea matInput maxUtf8Length="2000" [(ngModel)]="model.specificDiet" name="specificDiet" #specificDiet="ngModel" placeholder=""></textarea>
        </mat-form-field> 
        <span *ngIf="specificDiet.invalid" class="form-error">
            <span *ngIf="specificDiet.errors != null">
                <span *ngIf="specificDiet.errors.utfLength" class="form-error" matTooltip="{{specificDiet.errors.actualLength | utfLengthError: specificDiet.errors.maxAllowed}}"> 
                    <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>Jiné absolvované kurzy:</mat-label>
            <textarea matInput maxUtf8Length="2000" [(ngModel)]="model.otherCourses" name="otherCourses" #otherCourses="ngModel" placeholder=""></textarea>
        </mat-form-field> 
        <span *ngIf="otherCourses.invalid" class="form-error">
            <span *ngIf="otherCourses.errors != null">
                <span *ngIf="otherCourses.errors.utfLength" class="form-error" matTooltip="{{otherCourses.errors.actualLength | utfLengthError: otherCourses.errors.maxAllowed}}"> 
                    <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="2000" [(ngModel)]="model.otherInformation" name="otherInformation" #otherInformation="ngModel" placeholder=""></textarea>
        </mat-form-field> 
        <span *ngIf="otherInformation.invalid" class="form-error">
            <span *ngIf="otherInformation.errors != null">
                <span *ngIf="otherInformation.errors.utfLength" class="form-error" matTooltip="{{otherInformation.errors.actualLength | utfLengthError: otherInformation.errors.maxAllowed}}"> 
                    <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                </span>
            </span>
        </span>
    </div>

    <div class="form-item">
        <mat-checkbox [(ngModel)]="model.agreement">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í">
            Odejít bez uložení
        </a>
        <button mat-raised-button type="submit" color="primary" class="button-large" [disabled]="questionnaireForm.invalid || model.agreement == false"
                matTooltip="{{questionnaireForm.valid ? 'Pro odeslání musíte souhlasit s uložením osobních údajů' : 'Formulář není správně vyplněn. Možná chybí některé povinné údaje označené hvězdičkou.'}}" 
                [matTooltipDisabled]="questionnaireForm.valid && model.agreement == true">
            {{model.filledAt == null ? 'Odeslat dotazník' : 'Uložit změny'}}
        </button>
        <app-saving-status [actualStatus]="questionneireDataSavingStatus"></app-saving-status>
    </div>
</form>
