<div class="c8y-select-wrapper" ng-if="vm.isNew()">
  <select
    class="form-control"
    name="fieldbusType"
    ng-model="vm.formValue.fieldbusType"
    ng-options="deviceTypeFeatures.fieldbusType as deviceTypeFeatures.label for deviceTypeFeatures in vm.deviceTypesFeatures"
    ng-change="vm.onDeviceTypeChange()"
    required
  >
  </select>
  <span></span>
</div>
<div class="form-group form-group-lg m-b-0">
  <label class="editable">
    <input
      ng-model="vm.deviceType.name"
      placeholder="{{'e.g.' | translate}} {{'My protocol' | translate}}"
      required
      class="form-control"
      style="max-width:calc({{ vm.deviceType.name.length || 16 }} * 1ch + 14px)"
    >
  </label>
</div>
<div class="form-group m-b-0">
  <label class="sr-only" translate>Description</label>
  <label class="editable">
    <textarea class="form-control" 
      rows="1" 
      placeholder="{{'e.g. My protocol description' | translate}}" 
      style="max-width:calc( {{ vm.deviceType.description.length || 22 }} * 1ch + 14px)"
      ng-model="vm.deviceType.description"
    ></textarea>
  </label>
</div>
<div
  class="d-flex a-i-center"
  ng-if="vm.getFeatures().deviceType"
>
  <label class="m-b-0 m-r-8" translate>{{vm.getFeatures().label}} device type</label>
  <div class="form-group m-b-0">
    <label class="editable">
      <input
        class="form-control"
        name="deviceType"
        ng-model="vm.deviceType.deviceType"
        style="max-width:calc({{ vm.deviceType.deviceType.length || 10 }} * 1ch + 14px)"
        c8y-hex-input
        placeholder="{{'e.g.' | translate}} 39FC23"
      >
      <span ng-if="vm.deviceType.deviceType">{{vm.deviceType.deviceType}}</span>
      <span ng-if="!vm.deviceType.deviceType"><em class="text-muted">{{'e.g.' | translate}} 39FC23</em></span>
    </label>
    <c8y-error-feedback field="vm.deviceTypeForm.deviceType"></c8y-error-feedback>
  </div>
</div>