

  <app-all-menus></app-all-menus>
  <div class="container-fluid" style="padding-top: 6%;">
    <md-card style="opacity: .9;margin-top: 15px;background: #fcfbfb;height:100%">
      <h4 style="float:left;color:#855353">{{'Edit Vehicle Type' | translate}}</h4> <br><hr>
      <flash-messages style="float: center;"></flash-messages>
    <form #signupForm="ngForm">
      <div class="form-group">
        <!-- Vehicle Brand Name  -->
        <label class="example-full-width width" style="padding-left: 2%;
           width: 12%;
           float: left;
           padding-top: 2%;">{{'Brand' | translate}}:</label>
        <md-form-field class="example-full-width width" style="float:left;width: 80%;padding-left: 5%;">
          <input mdInput class="no-spin" [(ngModel)]="brand" name="brand1" placeholder="{{'Enter Brand Name' | translate}}" required/>
          <md-error class="required">{{'Enter Brand Name' | translate}}</md-error>
        </md-form-field>
      </div>
      <!-- Vehicle description -->
      <div class="form-group">
        <label style="padding-left: 2%;
                   width: 12%;
                   float: left;
                   padding-top: 2%;">{{'Description' | translate}}:</label>
        <md-form-field class="example-full-width width" style="float:left;width: 80%;padding-left: 5%;">
          <input mdInput class="no-spin" [(ngModel)]="description" name="description1" placeholder="{{'Enter description' | translate}}" required/>
          <md-error class="required">{{'Enter Description' | translate}}</md-error>
        </md-form-field>
  
      </div>
      <!--Enter Model -->
      <div class="form-group">
        <label style="padding-left: 2%;
                 width: 12%;
                 float: left;
                 padding-top: 2%;">{{'Model' | translate}}:</label>
        <div>
          <md-form-field style="float:left;width: 44%;padding-left: 5%;">
            <input mdInput class="no-spin" [(ngModel)]="model" name="model1" placeholder="{{'Enter Model' | translate}}" required/>
            <md-error class="required">{{'Please Enter Description' | translate}}</md-error>
          </md-form-field>
          <md-select style="float: left;padding-left: 2%;text-align:left;padding-top: 13px;width: 36%;" name="neww" placeholder="{{'Select icon type' | translate}}"
            [(ngModel)]="iconObj.value" ngDefaultControl>
            <md-option *ngFor="let icon of IconType" [value]="icon.value">{{icon.viewValue}}</md-option>
          </md-select>
        </div>
      </div>
      <!-- VOLTAGE_CALIBERATION labels for voltage value and fuel value in a table -->
      <div class="form-group" style="width:100%">
        <table style="width:100%">
          <tr style="width:100%;">
            <th style=" float: left;width:45%;padding-left: 18%;padding-bottom:1%;">{{'Voltage Value' | translate}}</th>
            <th style="padding-left: 13%; float: left;width:45%;;padding-bottom:1%;">{{'Fuel value' | translate}}</th>
            <th style="float: left;">
              <md-icon style="cursor:pointer;" (click)="addRow(0,0)">add</md-icon>
            </th>
          </tr>
  
          <tr style="width:100%" *ngFor="let data of voltage_calibration; let i =index">
            <label style="width:16%;float:left;padding-top: 3%;">{{'Volatage Calibrator' | translate}}</label>
            <td style="float:left;width: 40%;padding-left: 2%;">
  
              <md-form-field class="example-full-width width" style="width:100%">
                <input mdInput type="number" class="no-spin" [(ngModel)]="data.voltage" (keypress)="click1($event)" name="data.voltage{{i}}"
                  #voltage placeholder="{{'Enter in volts' | translate}}" required/>
                <md-error class="required">{{'Please Enter voltage' | translate}}</md-error>
              </md-form-field>
  
            </td>
            <td style="float:left;width: 37%;padding-left: 2%;">
              <md-form-field class="example-full-width width" style="width:100%">
                <input mdInput type="number" class="no-spin" [(ngModel)]="data.fuel" (keypress)="click1($event)" name="data.fuel{{i}}" #fuel
                  placeholder="{{'Enter fuel in liters' | translate}}" required/>
                <md-error class="required">{{'Please fuel value' | translate}}</md-error>
              </md-form-field>
  
            </td>
            <td style="float:left;padding-top: 2%;">
              <md-icon (click)="deleteRow(i)">delete_sweep</md-icon>
            </td>
  
          </tr>
        </table>
      </div>
  
      <!--Voltage Calibration -->
  
      <!--Enter Full Tank Size -->
  
  
      <div class="form-group" style="width:100%">
        <label style="padding-left: 4%;
                     
                     float: left;
                     padding-top: 2%;">{{'Tank Size' | translate}}:</label>
        <md-form-field class="example-full-width width" style="float:left;width: 82%;padding-left: 6%;">
          <input mdInput type="text" class="no-spin" [(ngModel)]="tank_size" name="tank_size1" (keypress)="click1($event)" placeholder="{{'Enter Tank Size' | translate}}"
            required/>
          <md-error class="required">{{'Please Enter Tank Size' | translate}}</md-error>
        </md-form-field>
  
      </div>
      <!--Enter Mileage -->
  
  
      <div class="form-group">
        <label style="padding-left: 2%;
                     width: 12%;
                     float: left;
                     padding-top: 2%;">{{'Mileage' | translate}}</label>
        <md-form-field class="example-full-width width" style="float:left;width: 80%;padding-left: 5%;">
          <input mdInput type="text" class="no-spin" [(ngModel)]="mileage" name="mileage1" (keypress)="click1($event)" placeholder="{{'Enter Mileage' | translate}}"
            required/>
          <md-error class="required">{{'Please Enter Mileage' | translate}}</md-error>
        </md-form-field>
      </div>
    </form>
    <br>
    <input type="submit" [disabled]="!signupForm.form.valid" (click)="editVehicleType(signupForm.form)" class="btn btn-primary btn-block/"
      value="Edit 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;"  > -->
    <br>
    <flash-messages style="float: center;"></flash-messages>
    <!-- form button and flash msgs end here  -->
    <div>
      <div style="padding-top:4%;">
        <!-- <button class="btn btn-primary btn-block/"(click)="addVehicleType()" style="cursor:pointer;width: 159px;height: 44px;">EDIT VEHICLE</button>  -->
      </div>
      <br>
      <flash-messages style="float: center;"></flash-messages>
      </div>
    </md-card>
  
  </div>
