<style>
ion-input{
   display:inline-block;
   width:40px;
   height:40px;
   margin:6px;
   border-radius: 10%;
   --background:#e1e1e1;
   --padding-start:0px;
   font-size: 1.25em;
}
</style>
<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>{{'contracts.start_header' | translate}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <form #form="ngForm" id="start_form" (ngSubmit)="startservice(form)" method="post">
      <h1 class="ion-text-center">{{'contracts.start_description_1.1' | translate}}</h1>
      <ion-row class="ion-text-center">
        <ion-col>
         <ion-input ngModel name="otp1" #otp1 required maxLength="1" type="number" (keyup)="otpController($event,otp2,'')">
         </ion-input>
         <ion-input ngModel name="otp2" #otp2 required maxLength="1" type="number" (keyup)="otpController($event,otp3,otp1)">
         </ion-input>
         <ion-input ngModel name="otp3" #otp3 required maxLength="1" type="number" (keyup)="otpController($event,otp4,otp2)">
         </ion-input>
         <ion-input ngModel name="otp4" #otp4  required maxLength="1" type="number" (keyup)="otpController($event,otp5,otp3)">
         </ion-input>
         <ion-input ngModel name="otp5" #otp5  required maxLength="1" type="number" (keyup)="otpController($event,otp6,otp4)">
         </ion-input>
         <ion-input ngModel name="otp6" #otp6  required maxLength="1" type="number" (keyup)="otpController($event,'',otp5)">
         </ion-input>
        </ion-col>
      </ion-row>
      <p class="ion-text-justify">{{'contracts.start_description_1.2' | translate}}</p>
    <br>
    <ion-button type="submit" expand="full" color="primary">{{'contracts.start_send' | translate}}</ion-button>
  </form>
  <br><br><br>
  <ion-button (click)="nohome()" expand="full" color="light">{{'contracts.start_nohome' | translate}}</ion-button>
</ion-content>
