<!-- component -->


<form action="" class="form fadeIn" (ngSubmit)="login()" [formGroup]="form">
    <span class="title">Iniciar sesión</span>

    <label class="label mt-10" for="idUsuario"> Nombre de usuario:</label>
    <mat-form-field class="input">
        <input matInput formControlName="idUsuario" id="idUsuario" name="idUsuario">
        <mat-icon [class.is-invalid-icon]="campoVacio('idUsuario')" class="icon" matSuffix>person</mat-icon>
        <mat-hint *ngIf="campoVacio('idUsuario')" class="is-invalid">El campo es obligatorio</mat-hint>
    </mat-form-field>

    <label class="label mt-10" for="contrasenaHash"> Contraseña:</label>
    <mat-form-field class="input" appearance="fill">
        <input type="{{showPassword ? 'text' : 'password'}}" formControlName="contrasenaHash" name="contrasenaHash" id="contrasenaHash"
            matInput>
        <mat-icon [class.is-invalid-icon]="campoVacio('contrasenaHash')" class="icon" (click)="toggleVisibility()"
            matSuffix>{{showPassword?'visibility_off':'visibility'}}</mat-icon>
        <mat-hint *ngIf="campoVacio('contrasenaHash')" class="is-invalid">El campo es obligatorio</mat-hint>
    </mat-form-field>
    <div class="justify-center items-center">
        <mat-spinner *ngIf="isLoading" [diameter]="30"></mat-spinner>
    </div>

    <div class="flex-row justify-center items-center">
        <mat-icon *ngIf="status === 400;" svgIcon="info" class="mr-10"></mat-icon>
        <span *ngIf="status === 400; else ok" style="color: red; text-align: center;">{{error}}</span>
        <mat-icon *ngIf="status === 400;" svgIcon="info" class="ml-10"></mat-icon>
    </div>
    <ng-template #ok>
        <span *ngIf="status === 200" style="color: green;">{{error}}</span>
    </ng-template>
    <div class="flex-col">
        <div class="justify-center">
            <button type="submit" class="buttons mt-10 mb-10" style="height: 35px;">Acceder

            </button>
        </div>
        <div class="mt-10" style="text-align: center;">
            <a class="cursor-pointer forgot-pass" (click)="openDialog()">¿Olvidaste tu contraseña?</a>
        </div>
    </div>
</form>