<form [formGroup]="loginForm" (ngSubmit)="onLoginSubmit()">
  <div class="login-dialog">
    <mat-card-header>
      <mat-card-title>Přihlašte se</mat-card-title>
      <mat-card-subtitle>Vaše přihlášení vypršelo, prosím přihlašte se zpět.</mat-card-subtitle>
    </mat-card-header>
    <mat-dialog-content>
      <mat-form-field>
        <input matInput type="email" placeholder="Email" formControlName="email" autocomplete="off">
        <mat-error *ngIf="loginForm.controls['email'].hasError('email') && !loginForm.controls['email'].hasError('required')">
          Emailová adresa je <strong>nevalidní</strong>
        </mat-error>
        <mat-error *ngIf="loginForm.controls['email'].hasError('required')">
          Emailová adresa je <strong>povinná</strong>
        </mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput [type]="passwordInputs[passwordInput.id] ? 'text' : 'password'" placeholder="Password" formControlName="password" #passwordInput autocomplete="off">
        <button 
          tabIndex="-1"
          type="button"
          *ngIf="loginForm.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="loginForm.controls['password'].hasError('required')">
          Heslo je <strong>povinné</strong>
        </mat-error>
      </mat-form-field>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button type="submit" mat-button mat-raised-button color="accent" [disabled]="!loginForm.valid">Přihlásit</button>
    </mat-dialog-actions>
  </div>
</form>