<body class="container-login">
  <mat-card class="override-card-login override-elevation-z8">
    <div class="item-card" [formGroup]="formGroup">
      <h1> Bienvenido </h1>

      <mat-form-field appearance="outline">
        <mat-label>Correo Electrónico</mat-label>
        <input matInput placeholder="Ingrese su correo electrónico" formControlName="email"
          (keyup.enter)="login()">
        <mat-icon matSuffix>email</mat-icon>
        <mat-error *ngIf="email?.invalid">{{ getErrorMessage('EMAIL') }}</mat-error>
      </mat-form-field>

      <mat-form-field appearance="outline">
        <mat-label>Contraseña</mat-label>
        <input matInput placeholder="Ingrese su contraseña" formControlName="password"
          [type]="hide ? 'password' : 'text'" (keyup.enter)="login()">
        <a mat-icon-button matSuffix (click)="hide = !hide"><mat-icon>{{ hide ? "visibility_off" : "visibility"
            }}</mat-icon></a>
        <mat-error *ngIf="password?.invalid">{{ getErrorMessage('PASSW') }}</mat-error>
      </mat-form-field>
      <button mat-raised-button class="pink_primary_background white_font override-no-shadow" (click)="login()"
        [disabled]="isLoading || formGroup.invalid">Iniciar sesión</button>
    </div>
    <div class="item-card">
      <!--<img src="assets/img/img-login.png" />-->
      <img src="http://git.ittec.mx/sam/public/assets/img-login.png" />
    </div>
  </mat-card>
</body>
