<form (ngSubmit)="register()" #registerForm="ngForm">
    <div class="form-item">
        <mat-form-field appearance="outline" class="solo-mid">
            <mat-label>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>Heslo:</mat-label>
            <input matInput required passwordCheck [(ngModel)]="model.password" name="password" #password="ngModel" [type]="hidePassword ? 'password' : 'text'" placeholder="">
            <a mat-icon-button matSuffix color="primary" (click)="hidePassword = !hidePassword" [attr.aria-label]="'Zobrazit heslo'" [attr.aria-pressed]="hidePassword">
                <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
            </a>
        </mat-form-field> 
        <span *ngIf="password.invalid && password.touched" class="form-error">
            <span *ngIf="password.errors != null">  
                <span *ngIf="password.errors.required" matTooltip="Heslo nebylo vyplněno">
                    <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                </span>
                <span *ngIf="password.errors.passwordCheck" matTooltip="{{password.errors.errorMessage}}">
                    <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>Jméno:</mat-label>
            <input matInput required [(ngModel)]="model.firstname" name="fistname" #firstname="ngModel" placeholder="">
        </mat-form-field> 
        <span *ngIf="firstname.invalid && firstname.touched" class="form-error">
            <span *ngIf="firstname.errors != null">  
                <span *ngIf="firstname.errors.required" matTooltip="Jméno 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>Příjmení:</mat-label>
            <input matInput required [(ngModel)]="model.lastname" name="lastname" #lastname="ngModel" placeholder="">
        </mat-form-field> 
        <span *ngIf="lastname.invalid && lastname.touched" class="form-error">
            <span *ngIf="lastname.errors != null">  
                <span *ngIf="lastname.errors.required" matTooltip="Příjmení 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 narození:</mat-label>
            <input matInput required [matDatepicker]="picker" placeholder="1.1.2000" [max]="maxDate"
                    [(ngModel)]="model.birthdate" name="birthdate" #birthdate="ngModel">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker startView="multi-year"></mat-datepicker>
        </mat-form-field> 
        <span *ngIf="birthdate.invalid && birthdate.touched" class="form-error">
            <span *ngIf="birthdate.errors != null">  
                <span *ngIf="birthdate.errors.required" matTooltip="Datum narození 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>Pohlaví:</mat-label>
          <mat-select [(ngModel)]="model.gender" name="gender" #gender="ngModel">
              <mat-option *ngFor="let genderKey of genders; let i = index" [value]="genderKey">
                {{gendersPretty[i]}}
              </mat-option>
          </mat-select>
        </mat-form-field>
    </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 a ČP:</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ím</mat-checkbox> se <a class="agreement-link" (click)="openPrivacyDialog()">zpracováním osobních údajů</a>
    </div> 

    <button mat-raised-button type="submit" color="primary" class="button-large" [disabled]="registerForm.invalid || model.agreement == false"
        matTooltip="{{registerForm.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]="registerForm.valid && model.agreement == true">
        Vytvořit účet
    </button>
</form>
