
<div class="body">
  <mat-toolbar id="colorApp1" class="primary">
    <mat-toolbar-row class="nav">
      <span style="color: white">Sistema Integral de Recursos Humanos</span>
    </mat-toolbar-row>
  </mat-toolbar>
  <mat-card class="card-iam mat-elevation-z8 animated fadeIn fast centre">
    <div style="padding: 30px 0 30px 0;">
      <img [src]="imagenLogo()" alt="" width="300" />
    </div>
    <mat-card-title>Sistema Integral <br>de Recursos Humanos</mat-card-title>
    <h4>Inicie sesión para continuar</h4>

    <form [formGroup]="formGroup">
      <mat-form-field appearance="standard">
        <mat-label>Correo Electrónico</mat-label>
        <input
          matInput
          placeholder="Ingrese el correo electrónico"
          formControlName="email"
          required
        />
        <mat-icon matSuffix>email</mat-icon>
        <mat-error *ngIf="email!.invalid">{{
          email!.hasError("email")
            ? "El correo electrónico no es válido"
            : ""
        }}</mat-error>

        <mat-error *ngIf="email!.invalid">{{
          email!.hasError("required")
            ? "Es necesario ingresar el correo electrónico"
            : ""
        }}</mat-error>
      </mat-form-field>

      <mat-form-field appearance="standard">
        <mat-label>Contraseña</mat-label>
        <input
          matInput
          autocomplete="on"
          [type]="hide ? 'password' : 'text'"
          placeholder="Ingrese la contraseña"
          formControlName="password"
          required
        />

        <a
          class="mat-form-field"
          mat-icon-button
          matSuffix
          (click)="hide = !hide"
          [attr.aria-label]="'Hide password'"
          [attr.aria-pressed]="hide"
        >
          <mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
        </a>
        <mat-error *ngIf="password!.invalid">
          {{
            password!.hasError("required")
              ? "Es necesaro ingresar la contraseña"
              : ""
          }}
        </mat-error>
      </mat-form-field>
      <div class="card-footer centre">
        <button
          mat-fab
          id="colorApp3"
          class="primary"
          matTooltip="Iniciar Sesion"
          (click)="login()"
          [disabled]="formGroup!.invalid || btnLoginDisable"
        >
          <mat-icon>login</mat-icon>
        </button>

        
      </div>
    </form>
  </mat-card>

  <<footer id="footer" id="colorApp2" class="primary">
    <div class="footer-container">
      <div>
        Copyright &copy;{{ anio }}
        <a href="https://www.ittec.mx/"style="color: white; text-decoration: underline;" target="_blank"
          >ITTEC. Tecnología Inteligente.</a
        >
        Todos los derechos reservados. |
        <a
          href="https://www.ittec.mx/privacidad"
          style="font-weight: lighter; color: white"
          >Aviso de Privacidad</a
        >
      </div>
      <div style="flex: 1 1 auto"></div>
      <div style="margin-right: 30px; display: flex">
        <img [src]="imagenLogoITTEC()" alt="Logo ITTEC" style="height: 100%; width: auto" />
        <div style="font-size: 10pt">
          <p class="info-ittec">
            <b>Correo para Soporte Técnico:</b> mesadeservicio@ittec.mx
            <br />
            <b>(+52) 55 6267 2444</b> |
            <a href="https://www.ittec.mx/" style="color: white"
              >www.ittec.mx</a
            >
            | soluciones@ittec.mx
          </p>
        </div>
      </div>
    </div>
  </footer>>
</div>
