<div class="main-container">
  <form [formGroup]="loginForm" (ngSubmit)="onLoginSubmit()">
    <mat-card class="login-card">
      <mat-card-header>
        <mat-card-title>Přihlášení</mat-card-title>
      </mat-card-header>
      <mat-card-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="Heslo" 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-card-content>
      <mat-card-actions align="end">
          <button clickOnEnter type="submit" mat-raised-button color="accent" [disabled]="!loginForm.valid">Přihlásit</button>
      </mat-card-actions>
    </mat-card>
  </form>
</div>