<ion-header>
    <ion-toolbar  class="header-toolbar-new">
        <ion-buttons slot="start">
            <nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
        </ion-buttons>
        <ion-title color="light" > {{'login,forgot-password' | translate}}</ion-title>
      </ion-toolbar>
</ion-header>



<ion-content padding>
  
             
        <ion-grid>

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

                <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 class="login-input" required type="password"
                        placeholder="{{ts.trPK('changePassword','newPassword')}}"
                        [(ngModel)]="P_NEW_PASSWORD">
                    </ion-input>
                </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 class="login-input" required type="password" 
                        placeholder="{{ts.trPK('changePassword','confirmPassword')}}"
                        [(ngModel)]="P_Confirm_NEW_PASSWORD">
                    </ion-input>
                </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(3)" item-start />
                    <ion-label><p>{{isHasDigit.text}}</p></ion-label>
                </ion-item>
                <ion-item lines='none'>
                    <img class="item-icon" [src]="checkerFuncation(4)" item-start />
                    <ion-label><p>{{isMinLength.text}}</p></ion-label>
                </ion-item>
                <ion-item lines='none'>
                    <img class="item-icon" [src]="checkerFuncation(5)" item-start />
                    <ion-label><p>{{isRepeatedLetter.text}}</p></ion-label>
                </ion-item>
                <ion-item lines='none'>
                    <img class="item-icon" [src]="checkerFuncation(6)" item-start />
                    <ion-label><p>{{isContainSpecialChar.text}}</p></ion-label>
                </ion-item>
                <ion-item lines='none'>
                    <img class="item-icon" [src]="checkerFuncation(7)" item-start />
                    <ion-label><p>{{confirmMatchNew.text}}</p></ion-label>
                </ion-item>
        </ion-grid>
        <page-trailer [small]="true"></page-trailer>
  
    
        
</ion-content>
<ion-footer>
    <div class="centerDiv">
        <button [disabled]="disabledSubmitBtn()"
        [ngClass]="disabledSubmitBtn() ? 'disabledButton' : 'enable' "
            class="button-login" ion-button (click)="forgotpassword()">{{ts.trPK('login','changepassword')}}</button>
    </div>
</ion-footer>