<app-all-menus></app-all-menus>
<div class="container" style="width: 90%;max-width: 100%;">
  <div class="row" style="padding-top: 6%;height:98vh;padding-left: 0;padding-right: 0;">
    <div class="col-12" style="background: whitesmoke;padding: 0;height: 90vh;">
      <div class="row" style="width:100%;text-align: center;align-items: center;background: #426E86; padding-top: 10px; margin: 0; color: white;">
        <div class="col-12">
          <flash-messages style="float: center;position: absolute;"></flash-messages>
          <p>{{'ADD VEHICLE TYPE'| translate}}</p>
        </div>
      </div>
      <form #signupForm="ngForm">
      <div class="row" style="margin: 0px;margin-top: 20px;">
        <div class="col-sm-12 col-md-6 col-lg-6">  
          <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-6">
              <div class="form-group">
                <label for="exampleInputEmail1">{{'Brand' | translate}}</label>
                <input type="email" class="form-control" id="exampleInputEmail1" name="brand" [(ngModel)]="brand" aria-describedby="emailHelp" placeholder="{{'Enter Brand Name' | translate}}">
                <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
              </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-6" >
              <div class="form-group">
                <label for="exampleInputEmail1">{{'Description' | translate}}</label>
                <input type="email" class="form-control" id="exampleInputEmail1" name="description" style="width: 95%;" aria-describedby="emailHelp" [(ngModel)]="description" placeholder="{{'Pealse Enter Description' | translate}}">
                <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
              </div>
            </div>
         
          </div>
          <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-6">
              <div class="form-group">
                <label for="exampleInputEmail1">{{"Model" | translate}}</label>
                <input type="email" name="model" class="form-control" id="exampleInputEmail1" [(ngModel)]="model" aria-describedby="emailHelp" placeholder="{{'Enter Model' | translate}}">
                <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
              </div>     
            </div>
            <div class="col-sm-12 col-md-6 col-lg-6">
              <div class="form-group">
                <!-- <label for="exampleInputEmail1">Icon type</label> -->
                <label for="exampleInputEmail1">{{'Mileage' | translate}}</label>
                <input type="number" name="mileage" class="form-control" id="exampleInputEmail1" [(ngModel)]="mileage" style="width: 95%;" aria-describedby="emailHelp" placeholder="{{'Enter Mileage' | translate}}">
              </div>    
            </div>
          </div>
          <div style="text-align: center;">
            <label style="font-weight: 700; color: red;">{{'Fuel Calibration' | translate}}</label> 
            <md-icon style="cursor: pointer;float: right;padding-left: 5px;font-weight: 600;color:grey"  (click)="addRow(0,0)">add</md-icon>
          </div>
      
          <div class="form-group" style="width:100%;height: 225px; max-height: 225px;overflow: auto;overflow-x: hidden;">
            <div class="row" *ngFor="let data of voltage_calibration; let i =index">
              <div class="col-sm-12 col-md-6 col-lg-6">
                <input type="number" class="form-control" id="exampleInputEmail1" [(ngModel)]="data.voltage" (keypress)="click1($event)"
                name="data.voltage{{i}}" aria-describedby="emailHelp" placeholder="Enter in volts">
                <small id="emailHelp" class="form-text text-muted">{{"VOLTAGE VALUE" | translate}}</small>
              </div>
              <div class="col-sm-12 col-md-6 col-lg-6">
                <div>
                  <input type="number" class="form-control" id="exampleInputEmail1" [(ngModel)]="data.fuel" (keypress)="click1($event)"
                  name="data.fuel{{i}}" style="width: 90%;" aria-describedby="emailHelp" placeholder="{{'Enter fuel in liters' | translate}">
                  <small id="emailHelp" class="form-text text-muted">{{'FUEL VALUE' | translate}}</small>
                </div>
                <i class="fas fa-trash" (click)="deleteRow(i)"  style="cursor: pointer;color: red;position: absolute;right: 18px; bottom: 30px;"></i>
              </div>
         
            </div>
          </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6"> 
          <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-6">
              <div class="form-group">
                <label for="exampleInputEmail1">{{'Tank Size' | translate}}</label>
                <input type="number" class="form-control" name="tank_size" [(ngModel)]="tank_size" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{'Tank Size' | translate}}">
                <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
              </div>          
            </div>
            <div class="col-sm-12 col-md-6 col-lg-6" >
              <div class="form-group">
                <md-select style="width: 94%;padding-top: 12%;" name="neww"
                placeholder="{{'Select icon type' | translate}}" [(ngModel)]="iconObj">
                <md-option *ngFor="let icon of IconType" [value]="icon">{{icon.viewValue}}</md-option>
              </md-select>
             
                <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
              </div>
            </div>
         
          </div>       
          <div class="row" style="height: 75px;">
            <div class="col-12">

            </div>
          </div>
          <div style="text-align: center;">
            <label style="font-weight: 700; color: red;">{{'Temperature Calibration' | translate}}</label>
            <md-icon style="cursor: pointer;float: right;padding-left: 5px;font-weight: 600;color:grey"  (click)="addTempRow(0,0)">add</md-icon>
          </div>  
             
              <div class="form-group" style="width:100%;height: 225px; max-height: 225px;overflow: auto;overflow-x: hidden;">
                <div class="row" *ngFor="let data1 of temprature_calibration; let i =index">
                  <div class="col-sm-12 col-md-6 col-lg-6">
                    <input type="number" class="form-control" id="exampleInputEmail1" [(ngModel)]="data1.voltage" (keypress)="click1($event)"
                    name="data1.voltage{{i}}" aria-describedby="emailHelp" placeholder="{{'Enter in volts' | translate}}">
                    <small id="emailHelp" class="form-text text-muted">{{'VOLTAGE VALUE' | translate}}</small>
                  </div>
                  <div class="col-sm-12 col-md-6 col-lg-6">
                    <div>
                      <input type="number" class="form-control" id="exampleInputEmail1" [(ngModel)]="data1.temp" (keypress)="click1($event)"
                      name="data1.temp{{i}}" style="width: 90%;" aria-describedby="emailHelp" placeholder="Enter tempreture in celsius">
                       <small id="emailHelp" class="form-text text-muted">{{'TEMPERATURE VALUE' | translate}}</small>
                    </div>
                    <i class="fas fa-trash" (click)="deltempRow(i)"  style="cursor: pointer;color: red;position: absolute;right: 18px; bottom: 30px;"></i>
                  </div>
                </div>
              </div>
        </div>
      </div>
      <div class="row" style="margin: 0px;margin-top: 20px;">
        <div class="col-sm-12 col-md-6 col-lg-6">
     
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6">
          <!-- <label>{{'Fuel Calibrator' | translate}}</label> -->
          <!-- <md-icon style="cursor: pointer;float: right;padding-left: 5px;font-weight: 600;color:grey"  (click)="addRow(0,0)">add</md-icon> -->
          <!-- <div class="form-group" style="width:100%;height: 225px; max-height: 225px;overflow: auto;overflow-x: hidden;"> -->
            <!-- <div class="row">
              <div class="col-sm-12 col-md-10 col-lg-10">
                <p style="color: #555454;font-weight: 400;"><label>{{'Volatage Calibrator' | translate}}</label></p>
              </div>  
              <div class="col-sm-12 col-md-2 col-lg-2">
                <md-icon style="cursor: pointer;"  (click)="addRow(0,0)">add</md-icon>
              </div>
            </div> -->
            <!-- <div class="row" *ngFor="let data of voltage_calibration; let i =index">
              <div class="col-sm-12 col-md-6 col-lg-6">
                <input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter in volts">
                <small id="emailHelp" class="form-text text-muted">VOLTAGE VALUE</small>
              </div>
              <div class="col-sm-12 col-md-6 col-lg-6">
                <div>
                  <input type="number" class="form-control" id="exampleInputEmail1" style="width: 90%;" aria-describedby="emailHelp" placeholder="Enter fuel in liters">
                  <small id="emailHelp" class="form-text text-muted">FUEL VALUE</small>
                </div>
                <i class="fas fa-trash" (click)="deleteRow(i)"  style="cursor: pointer;color: red;position: absolute;right: 18px; bottom: 30px;"></i>
              </div>
            </div> -->
          <!-- </div> -->
        </div>
      </div>
      <div class="row" style="margin: 0px;">
        <div class="col-12" style="text-align: center;">
          <input type="submit" [disabled]="!signupForm.form.valid" (click)="addVehicleType(signupForm.form)"
          class="btn btn-primary btn-block/" value="Add Vehicle Type" style="cursor:pointer;width: 159px;height: 44px;" fxFlexAlign="center">&nbsp;&nbsp;
        <input type="submit" (click)="NewVehicleType(signupForm.form)" class="btn btn-primary btn-block/" value="Cancel" style="cursor:pointer;width: 159px;height: 44px;background-color: red;">
        </div>
      </div>
    </form>

    </div>
 

  </div>

</div>