<body
  background="../../../assets/img/background-login.png"
  class="background-img"
>
  <div class="menu-align">
    <mat-card
      class="card-inicio mat-elevation-z8 animated fadeIn fast centre"
      (window:resize)="onResize($event)"
    >
      <div class="w-100">
        <div class="card-formulario card-formulario-small">
          <form [formGroup]="formGroup" style="padding: 90px">
            <h1 class="inicio" style="margin-top: 35px; color: #808080"> Inicio de Sesión </h1>
            <mat-form-field>
              <mat-label>Correo Electrónico</mat-label>
              <input matInput placeholder="Ingrese el correo electrónico" formControlName="email" required (keyup.enter)="login()" tabindex="1"/>
              <mat-icon matSuffix>email</mat-icon>
            </mat-form-field>
            <mat-form-field style="margin-top: 25px">
              <mat-label>Contraseña</mat-label>
              <input matInput [type]="hide ? 'password' : 'text'" placeholder="Ingrese la contraseña" formControlName="password" required (keyup.enter)="login()" tabindex="2"/>
              <a mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide" tabindex="4">
                <mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
              </a>
            </mat-form-field>
            <div class="mt-16">
              <button mat-raised-button class="pink_primary_background white_font" matTooltip="Iniciar Sesion" (click)="login()" tabindex="3">
                Iniciar sesión
              </button>
            </div>
          </form>
        </div>

        <div class="card-formulario">
          <img
            src="../../../assets/img/img-login.png"
            class="img-login m-55"
            width="500"
          />
        </div>
      </div>
    </mat-card>
  </div>
</body>
