<ion-header>
    <ion-toolbar>
    <ion-title>{{'sms,title' | translate}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-grid>
    <!-- identification number / file id -->
    <ion-row class="sms_code">
        <ion-col [size]="12">
          <ion-label class="input-label" >{{ 'h2o,verification_message' | translate}}</ion-label>
          <ion-input type="number" class="input_bottom" [placeholder]="'h2o,sms_code' | translate" [(ngModel)]="smc_code" pattern="number"></ion-input>
        </ion-col>
    </ion-row>
    <!-- international mobile number-->
    <ion-row class="timer-body" >
        <ion-col [size]="9">
            <ion-label class="input-label" >{{ 'h2o,validation_message' | translate}}</ion-label>
        </ion-col>
        <ion-col [size]="3">
              <ion-label class="input-label-strong" > {{displayTime}} </ion-label>
        </ion-col>
    </ion-row>
    <ion-row *ngIf="resend" >
              <ion-col [size]="8" >
                  <p> {{'h2o,code_failure' | translate}} </p>
              </ion-col>
              <ion-col [size]="4" class="resend-coloumn" >
                  <ion-button (click)="ResendOTP()"> {{'h2o,resend' | translate}} </ion-button>
              </ion-col>
          </ion-row>
    <ion-row class="ion-justify-content-center bottom-grid" >
        <ion-col [size]="12" >
            <ion-button  (click)="validate()" expand="full"> {{'general,submit' | translate}} </ion-button>
        </ion-col>
    </ion-row>
</ion-grid>
</ion-content>