<!-- component -->


<form action="" class="form fadeInLeft" (ngSubmit)="changePassword()" [formGroup]="form">
    <span class="title">Cambiar Contraseña</span>




    <label class="label mt-10" for="contrasena1"> Nueva Contraseña:</label>
    <div class="flex-row">
        <mat-form-field class="input" appearance="fill">
            <input type="{{showPassword ? 'text' : 'password'}}" formControlName="contrasena1" name="contrasena1"
                id="contrasena1" matInput>
            <mat-icon [class.is-invalid-icon]="campoVacio('contrasena1')" class="icon" (click)="toggleVisibility()"
                matSuffix>{{showPassword?'visibility_off':'visibility'}}</mat-icon>
            <mat-hint *ngIf="campoVacio('contrasena1')" class="is-invalid">El campo es obligatorio </mat-hint>
            <mat-hint *ngIf="campoNoValido('contrasena1')" class="is-invalid"> Contraseña no válida</mat-hint>
        </mat-form-field>
        <div class="items-center">
            <mat-icon class="cursor-pointer mb-10" matSuffix (click)="tooltip1.toggle()"
                style="color: #f19696;">help</mat-icon>
            <div #tooltip1="matTooltip"
                matTooltip="La contraseña debe contener mayúsculas, minúsculas, números, un carácter especial y al menos 8 caracteres sin espacios."
                matTooltipPosition="right"></div>
        </div>
    </div>

    <label class="label mt-10" for="contrasena2"> Confirmar Contraseña:</label>
    <mat-form-field class="input" appearance="fill">
        <input type="{{showPassword1 ? 'text' : 'password'}}" formControlName="contrasena2" name="contrasena2"
            id="contrasena2" matInput>
        <mat-icon [class.is-invalid-icon]="campoVacio('contrasena2')" class="icon" (click)="toggleVisibility1()"
            matSuffix>{{showPassword1?'visibility_off':'visibility'}}</mat-icon>
        <mat-hint *ngIf="campoVacio('contrasena2')" class="is-invalid">El campo es obligatorio </mat-hint>
        <mat-hint *ngIf="contrasIguales()" class="is-invalid"> | Las contraseñas no coinciden</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;">Cambiar Contraseña

            </button>
        </div>

    </div>
</form>