<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>
          
                <br/>
                <br/>
                <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="password"  
                  placeholder="{{ts.trPK('changePassword','currentPassword')}}"
                  [(ngModel)]="P_OLD_PASSWORD"
                  minLength="8"  min="8"
                  (ionChange)="onChangeOP()"
                  ></ion-input>
              </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="password" placeholder="{{ts.trPK('changePassword','newPassword')}}"
                        [(ngModel)]="P_NEW_PASSWORD" minLength="8"  min="8" >
                    </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 (ionChange)="onChangeCNP()" class="login-input" required type="password" placeholder="{{ts.trPK('changePassword','confirmPassword')}}"
                        [(ngModel)]="P_Confirm_NEW_PASSWORD"  minLength="8"  min="8">
                    </ion-input>
                </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]="!(NEW_PASSWORD && Confirm_NEW_PASSWORD && OLD_PASSWORD)" [ngClass]=" !(NEW_PASSWORD && Confirm_NEW_PASSWORD && OLD_PASSWORD) ? 'disabledButton' : '' " class="button-login"  ion-button  (click)="submit()">{{ts.trPK('login','changepassword')}}</button>
    </div>
</ion-footer>