<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>
        @if (formGroup.controls['email'].hasError('required')) {
          <mat-error 
            title="El campo Correo electrónico es obligatorio.">
            El campo <b>Correo Electrónico</b> es obligatorio.
          </mat-error>
        }
        @if (formGroup.controls['email'].hasError('email')) {
          <mat-error 
            title="El campo Correo electrónico no es correcto.">
            El campo <b>Correo electrónico</b> no es correcto.
          </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>
        @if (formGroup.controls['email'].hasError('required')) {
          <mat-error 
            title="El campo Contraseña es obligatorio.">
            El campo <b>Contraseña</b> es obligatorio.
          </mat-error>
        }
      </mat-form-field>
      <button 
        class="pink_primary_background white_font" 
        mat-flat-button 
        (click)="login()" 
        [disabled]="isLoading || formGroup.invalid"
        [ngClass]="{ pink_background_l1: !isLoading && formGroup.valid, white_font: !isLoading && formGroup.valid }"
      >Iniciar sesión</button>
    </div>
    <div class="item-card">
      <img src="http://git.ittec.mx/sam/public/assets/img-login.png" />
    </div>
  </mat-card>
</body>