
<ion-content padding>
    <ion-grid class="customGrid">
      <ion-row>
        <ion-col class="colPad">
          <ion-img class="centerDiv" src="../assets/imgs/CS.png"></ion-img>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <P class="pageTitle text-caps">{{ts.trPK('login','login')}}</P>
        </ion-col>
      </ion-row>
    </ion-grid>
    
    <ion-item>
      <img class="item-icon" src="assets/imgs/username.png" item-start />
      <ion-label>{{ts.trPK('login','username')}}</ion-label>
      <ion-input  required type="text" [(ngModel)]="username">
      </ion-input>
    </ion-item>
   
    <ion-item>
      <img class="item-icon" src="assets/imgs/password.png" item-start />
      <ion-label>{{ts.trPK('login','password')}}</ion-label>
      <ion-input  required type="password"  [(ngModel)]="password">
      </ion-input>
    </ion-item>
  
    <div class="centerDiv signupDiv" *ngIf="isAppleStore==false">
      <a (click)="signUp()">{{ts.trPK('login','signup')}}</a>
    </div>
    <div class="gridDiv">
      <button class="gridBtn"  ion-button (click)="changeLanguage()" [ngClass]="{'active':this.currentLang ==1}">English</button>
      <button class="gridBtn arTxt"  ion-button (click)="changeLanguage()" [ngClass]="{'active':this.currentLang ==2}">عربي</button>
    </div>
 
  </ion-content>
  <ion-footer>
    <div class="centerDiv">
        <ion-button  color="customnavy" (click)="onLogin()">{{ts.trPK('login','login')}}</ion-button>
      </div>
      <br/>
    <div class="centerDiv">
      <a (click)="forgetPasswordPage()">{{ts.trPK('login','forgot-password')}}</a>
    </div>
  </ion-footer>