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

    <div class="form-item">
        <mat-form-field appearance="outline" class="solo-mid">
            <mat-label>Přihlašovací email:</mat-label>
            <input matInput required email [(ngModel)]="model.email" name="email" #email="ngModel" placeholder="">
        </mat-form-field> 
        <span *ngIf="email.invalid && email.touched" class="form-error">
            <span *ngIf="email.errors != null">  
                <span *ngIf="email.errors.required" matTooltip="Email nebyl vyplněn">
                    <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                </span>
                <span *ngIf="email.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>Název:</mat-label>
            <input matInput maxUtf8Length="120" [(ngModel)]="model.name" name="class" #name="ngModel" placeholder="">
        </mat-form-field> 
        <span *ngIf="name.invalid" class="form-error">
            <span *ngIf="name.errors != null">
                <span *ngIf="name.errors.utfLength" class="form-error" matTooltip="{{name.errors.actualLength | utfLengthError: name.errors.maxAllowed}}"> 
                    <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                </span>
            </span>
        </span>
    </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 && addressCity.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 [(ngModel)]="model.personPhone" name="personPhone" #personPhone="ngModel" placeholder="">
            </mat-form-field> 
        </div>
    </div>

    <div class="form-group">
        <h4>Adresa</h4>

        <div class="form-item">
            <mat-form-field appearance="outline" class="solo-mid">
                <mat-label>Město:</mat-label>
                <input matInput required [(ngModel)]="model.addressCity" name="addressCity" #addressCity="ngModel" placeholder="">
            </mat-form-field> 
            <span *ngIf="addressCity.invalid && addressCity.touched" class="form-error">
                <span *ngIf="addressCity.errors != null">  
                    <span *ngIf="addressCity.errors.required" matTooltip="Město 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>Ulice:</mat-label>
                <input matInput required [(ngModel)]="model.addressStreet" name="addressStreet" #addressStreet="ngModel" placeholder="">
            </mat-form-field> 
            <span *ngIf="addressStreet.invalid && addressStreet.touched" class="form-error">
                <span *ngIf="addressStreet.errors != null">  
                    <span *ngIf="addressStreet.errors.required" matTooltip="Ulice nebyla 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>PSČ:</mat-label>
                <input matInput required [(ngModel)]="model.addressZip" name="addressZip" #addressZip="ngModel" placeholder="">
            </mat-form-field> 
            <span *ngIf="addressZip.invalid && addressZip.touched" class="form-error">
                <span *ngIf="addressZip.errors != null">  
                    <span *ngIf="addressZip.errors.required" matTooltip="PSČ nebylo vyplněno">
                        <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                    </span>
                </span>
            </span>
        </div>
    </div>

    <div class="form-item">
        <mat-checkbox [(ngModel)]="model.agreement">Souhlas</mat-checkbox> se <a class="agreement-link" (click)="openPrivacyDialog()">zpracováním osobních údajů</a>
    </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]="editSchoolForm.invalid || model.agreement == false"
            matTooltip="{{editSchoolForm.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]="editSchoolForm.valid && model.agreement == true">
            {{model.ID == null ? 'Vytvořit školu' : 'Uložit změny'}}
        </button>
        <app-saving-status [actualStatus]="schoolDataSavingStatus"></app-saving-status>
    </div>
</form>
