<app-generic-header showBack="true" [headerText]="'changePassword,changePassword' | translate">
</app-generic-header>



<ion-content padding>

    <ion-grid>
        <ion-row>
            <ion-col [size]="4">
                <img [src]="logo" class="logoHeader" />
            </ion-col>
        </ion-row>

        <p class="headerTxt" color="light"> {{'changePassword,changePassword' | translate}}</p>

        <ion-item class="item-input-login">
            <img class="item-icon" src="assets/imgs/password.png" item-start />
            <!-- <ion-label>{{'changePassword,currentPassword' | translate}}</ion-label> -->
            <ion-input class="login-input" required [type]="currentPasswordIcon"
                placeholder="{{ts.trPK('changePassword','currentPassword')}}" [(ngModel)]="P_OLD_PASSWORD" minLength="8"
                min="8" (ionChange)="onChangeOP()"></ion-input>
                <ion-icon *ngIf='currentPasswordIcon === "text"' name="ios-eye" (click)="showPassword(3)"></ion-icon>
                <ion-icon *ngIf='currentPasswordIcon === "password"' name="ios-eye-off" (click)="hidePassword(3)"></ion-icon>
        </ion-item>

        <p class="headerTxt" color="light"> {{'changePassword,newPassword' | translate}}</p>

        <ion-item class="item-input-login">
            <img class="item-icon" src="assets/imgs/password.png" item-start />
            <!-- <ion-label>{{'changePassword,newPassword' | translate}}</ion-label> -->
            <ion-input (ionChange)="onChangeNP()" class="login-input" required [type]="newPasswordIcon"
                placeholder="{{ts.trPK('changePassword','newPassword')}}" [(ngModel)]="P_NEW_PASSWORD" minLength="8"
                min="8">
            </ion-input>
            <ion-icon *ngIf='newPasswordIcon === "text"' name="ios-eye" (click)="showPassword(1)"></ion-icon>
            <ion-icon *ngIf='newPasswordIcon === "password"' name="ios-eye-off" (click)="hidePassword(1)"></ion-icon>
        </ion-item>

        <ion-item class="item-input-login">
            <img class="item-icon" src="assets/imgs/password.png" item-start />
            <!-- <ion-label>{{'changePassword,confirmPassword' | translate}}</ion-label> -->
            <ion-input (ionChange)="onChangeCNP()" class="login-input" required [type]="confirmPasswordIcon"
                placeholder="{{ts.trPK('changePassword','confirmPassword')}}" [(ngModel)]="P_Confirm_NEW_PASSWORD"
                minLength="8" min="8">
            </ion-input>
            <ion-icon *ngIf='confirmPasswordIcon === "text"' name="ios-eye" (click)="showPassword(2)"></ion-icon>
            <ion-icon *ngIf='confirmPasswordIcon === "password"' name="ios-eye-off" (click)="hidePassword(2)"></ion-icon>
        </ion-item>
      
        <ion-item lines='none'>
            <img class="item-icon "  src="../assets/imgs/req info.svg"  item-start />
            <ion-label><p class="info">{{recentPasswordNote.text}}</p></ion-label>
        </ion-item>
        <!-- <ion-item lines='none'>
            <img class="item-icon" [src]="checkerFuncation(1)" item-start />
            <ion-label><p>{{isLowerCase.text}}</p></ion-label>
        </ion-item>
        <ion-item lines='none'>
            <img class="item-icon" [src]="checkerFuncation(2)" item-start />
            <ion-label><p>{{isUpperCase.text}}</p></ion-label>
        </ion-item> -->
        <ion-item lines='none'>
            <img class="item-icon" [src]="checkerFuncation(1)" item-start />
            <ion-label><p style="white-space: pre-wrap;">{{isLetterCase.text}}</p></ion-label>
        </ion-item>
        <ion-item lines='none'>
            <img class="item-icon" [src]="checkerFuncation(3)" item-start />
            <ion-label><p style="white-space: pre-wrap;">{{isHasDigit.text}}</p></ion-label>
        </ion-item>
        <ion-item lines='none'>
            <img class="item-icon" [src]="checkerFuncation(4)" item-start />
            <ion-label><p style="white-space: pre-wrap;">{{isMinLength.text}}</p></ion-label>
        </ion-item>
        <ion-item lines='none'>
            <img class="item-icon" [src]="checkerFuncation(5)" item-start />
            <ion-label><p style="white-space: pre-wrap;">{{isRepeatedLetter.text}}</p></ion-label>
        </ion-item>
        <!-- <ion-item lines='none'>
            <img class="item-icon" [src]="checkerFuncation(6)" item-start />
            <ion-label><p style="white-space: pre-wrap;">{{isContainSpecialChar.text}}</p></ion-label>
        </ion-item> -->
        <ion-item lines='none'>
            <img class="item-icon" [src]="checkerFuncation(7)" item-start />
            <ion-label><p style="white-space: pre-wrap;">{{confirmMatchNew.text}}</p></ion-label>
        </ion-item>
        <ion-item lines='none'>
            <img class="item-icon" [src]="checkerFuncation(8)" item-start />
            <ion-label><p style="white-space: pre-wrap;">{{userNameMatchNew.text}}</p></ion-label>
        </ion-item>

    </ion-grid>

    <page-trailer [small]="true"></page-trailer>

    <!-- [disabled]="NEW_PASSWORD && Confirm_NEW_PASSWORD" [disabled]="true"-->

</ion-content>
<ion-footer>
    <div class="centerDiv">

        <button [disabled]="disabledSubmitBtn()"
        [ngClass]=" disabledSubmitBtn() ? 'disabledButton' : '' "
            class="button-login" ion-button (click)="submit()">{{ts.trPK('login','changepassword')}}</button>
    </div>
</ion-footer>