<div class="container-fluid" style="background: #f9f9f9;padding:0px">
  <div style="text-align: center; font-size: 22px; font-weight: 500; background: #426E86; padding-top: 5px; color: white; padding-bottom: 5px;">
      <p style="margin-bottom: 0px;">{{'ADD DEVICE' | translate}}</p>
  </div>
  <div class="row" style="margin:0px;padding-top: 10px;">
      <div class="col-12">
        <p *ngIf="errorIcon" style="text-align: left;font-size: 15px;font-weight: 600;color: red;">{{ImmErrMsg}}</p>
      </div>
  </div>
  <div class="row" style="margin:0px">
      <div class="col-6">
              <md-form-field class="example-full-width width" style="width: 100%;">
                      <input mdInput type="number" [(ngModel)]="device_id" placeholder="Enter device id" name="did" required>
                      <md-error class="pattern">{{'Device id is mendatory' | translate}}</md-error>
                  </md-form-field>
      </div>
      <div class="col-6">
              <md-form-field class="example-full-width width" style="width: 100%;">
                      <input mdInput type="text" [(ngModel)]="device_name" placeholder="{{'Enter device name' | translate}}" name="dname" required>
                      <md-error class="pattern">{{'Please device name' | translate}}</md-error>
                  </md-form-field>
      </div>
  </div>
  <div class="row" style="margin:0px">
      <div class="col-6">
              <md-form-field class="example-full-width width" style="width: 100%;padding-top: 6px;">
                      <input  mdInput type="number" minlength="10" maxlength="13" [(ngModel)]="device_sim" placeholder="{{'Enter sim number' | translate}}" name="sim" required>
                      <md-error class="pattern">{{'Please Enter sim number' | translate}}</md-error>
                  </md-form-field>
      </div>
      <div class="col-6">
        <md-select  [(ngModel)]="device_license" style="width: 100%;">
          <md-option *ngFor="let license of licenseArr" [value]="license">{{license}}</md-option>
        </md-select>
        <small id="g" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please select license type</small>
      </div>
  </div>
  <div class="row" style="margin:0px">
      <div class="col-6">
        <md-select  [(ngModel)]="modelId" style="width: 100%;">
          <md-option *ngFor="let model of modelArr" [value]="model._id">{{model.modelName}}</md-option>
        </md-select>  
        <small id="g" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please select device model</small>
      </div>
      <div class="col-6">
        <md-select  [(ngModel)]="vtypeId" style="width: 100%;" >
          <md-option *ngFor="let vArr of vehicleArr" [value]="vArr._id">{{vArr.vehicle_name}}</md-option>
        </md-select>
        <small id="g" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please select vehicle type</small>
      </div>
  </div>
  <div class="row" style="text-align: center;padding-top: 20px;margin:0px">
      <div class="col-12">
          <button style="background-color:rgb(48, 100, 197);color:#fdfdfd;width: 135px;" md-raised-button (click)="add()">{{'ADD' | translate}}</button>
          <button style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="close()">{{'CANCEL' | translate}}</button>
      </div>
  </div>
</div>