<div>
  <form class="login" (ngSubmit)="onLogin()" #loginForm="ngForm" (keydown.enter)="onLogin()">
    <img src="assets/images/logo.png" alt="Opengnsys" class="login-logo" [class.rotating]="isLoading">
    <h2>Opengnsys</h2>
    <mat-form-field>
      <mat-label>{{ 'loginlabelUsername' | translate }}</mat-label>
      <input matInput [(ngModel)]="loginObj.username" name="username" required #usernameInput="ngModel"
        [ngClass]="{'invalid': !usernameInput.valid && usernameInput.touched}" />
    </mat-form-field>
    <mat-form-field>
      <mat-label>{{ 'loginlabelPassword' | translate }}</mat-label>
      <input matInput (keydown.enter)="$event.preventDefault()" [type]="hide() ? 'password' : 'text'" required
        [(ngModel)]="loginObj.password" name="password" />
      <button mat-icon-button matSuffix type="button" (click)="clickEvent($event)" [attr.aria-label]="'Ocultar contraseña'">
        <mat-icon>{{hide() ? 'visibility_off' : 'visibility'}}</mat-icon>
      </button>
    </mat-form-field>
    <div class="button-row">
      <button class="action-button" type="submit" [disabled]="!loginObj.username || !loginObj.password">
        {{ 'buttonLogin' | translate }}
      </button>
    </div>
  </form>
</div>

<button mat-flat-button (click)="changeLanguage('es')">Español</button>
<button mat-flat-button (click)="changeLanguage('en')">Inglés</button>
