<div class="main-container">
  <form [formGroup]="registrationForm" (ngSubmit)="onRegisterSubmit()">
    <mat-card class="registration-card">
      <mat-card-header>
        <mat-card-title>Registrace</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <div class="form-field-group">
          <mat-form-field>
            <input matInput placeholder="Křestní jméno *" formControlName="firstName" autocomplete="off">
            <mat-error *ngIf="registrationForm.controls['firstName'].hasError('required')">
              Křestní jméno je <strong>povinné</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field>
            <input matInput placeholder="Příjmení *" formControlName="lastName" autocomplete="off">
            <mat-error *ngIf="registrationForm.controls['lastName'].hasError('required')">
              Příjmení je <strong>povinné</strong>
            </mat-error>
          </mat-form-field>
        </div>
        <mat-form-field>
          <input matInput type="email" placeholder="Email *" formControlName="email" autocomplete="off">
          <mat-error *ngIf="registrationForm.controls['email'].hasError('email') && !registrationForm.controls['email'].hasError('required')">
            Emailová adresa je <strong>nevalidní</strong>
          </mat-error>
          <mat-error *ngIf="registrationForm.controls['email'].hasError('userExists')">
            Uživatel s toutu emailovou adresou <strong>již existuje</strong>
          </mat-error>
          <mat-error *ngIf="registrationForm.controls['email'].hasError('required')">
            Emailová adresa je <strong>povinná</strong>
          </mat-error>
        </mat-form-field>
        <div class="form-field-group">
          <mat-form-field>
            <input matInput placeholder="Firma/instituce" formControlName="company" autocomplete="off">
            <mat-error *ngIf="registrationForm.controls['company'].hasError('required')">
              Firma/instituce je <strong>povinná</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field>
            <input matInput placeholder="Pozice ve firmě/instituci" formControlName="position" autocomplete="off">
            <mat-error *ngIf="registrationForm.controls['position'].hasError('required')">
              Pozice ve firmě/instituci je <strong>povinná</strong>
            </mat-error>
          </mat-form-field>
        </div>
        <div class="form-field-group">
          <mat-form-field>
            <input matInput [type]="passwordInputs[passwordInput.id] ? 'text' : 'password'" placeholder="Heslo *" formControlName="password" #passwordInput autocomplete="off">
            <button 
              tabIndex="-1"
              type="button" 
              *ngIf="registrationForm.controls['password'].value" 
              matSuffix 
              mat-icon-button 
              (mousedown)="togglePasswordVisbility(passwordInput, true); doNotRemoveFocus($event, passwordInput);" 
              (mouseup)="togglePasswordVisbility(passwordInput, false);" 
              (click)="doNotPropagateClick($event, passwordInput);">
              <mat-icon>{{ passwordInputs[passwordInput.id] ? 'visibility' : 'visibility_off' }}</mat-icon>
            </button>
            <mat-error *ngIf="registrationForm.controls['password'].hasError('required')">
              Heslo je <strong>povinné</strong>
            </mat-error>
            <mat-error *ngIf="registrationForm.controls['password'].hasError('strongPassword') && !registrationForm.controls['password'].hasError('required')">
              Heslo musí obsahovat <strong>velké písmeno</strong>,<strong>malé písmeno</strong> a <strong>číslo</strong>
            </mat-error>
            <mat-error *ngIf="registrationForm.controls['password'].hasError('minlength') && !registrationForm.controls['password'].hasError('strongPassword')">
              Heslo musí mít alespň <strong>8</strong> znaků
            </mat-error>
          </mat-form-field>
          <mat-form-field>
            <input matInput [type]="passwordInputs[passwordConfirmInput.id] ? 'text' : 'password'" placeholder="Potvrzení hesla *" formControlName="confirmPassword" #passwordConfirmInput autocomplete="off">
            <button 
              tabIndex="-2"
              type="button"
              *ngIf="registrationForm.controls['confirmPassword'].value" 
              matSuffix 
              mat-icon-button
              (mousedown)="togglePasswordVisbility(passwordConfirmInput, true); doNotRemoveFocus($event, passwordConfirmInput);" 
              (mouseup)="togglePasswordVisbility(passwordConfirmInput, false);" 
              (click)="doNotPropagateClick($event, passwordConfirmInput);">
              <mat-icon>{{ passwordInputs[passwordConfirmInput.id] ? 'visibility' : 'visibility_off' }}</mat-icon>
            </button>
            <mat-error *ngIf="registrationForm.controls['confirmPassword'].hasError('required')">
              Potvrzovací heslo je <strong>povinné</strong>
            </mat-error>
            <mat-error *ngIf="registrationForm.controls['confirmPassword'].hasError('passwordNotMatch')">
              Hesla <strong>nesouhlasí</strong>
            </mat-error>
            <mat-error *ngIf="registrationForm.controls['confirmPassword'].hasError('passwordNotValid')">
              Heslo je <strong>nevalidní</strong>
            </mat-error>
          </mat-form-field>
        </div>
      </mat-card-content>
      <mat-card-actions align="end">
        <button clickOnEnter type="submit" mat-raised-button color="accent" [disabled]="!registrationForm.valid">Registrovat</button>
      </mat-card-actions>
    </mat-card>
  </form>
</div>