<span ng-switch="vm.type">
  <span ng-switch-when="STRING">
    <input
      name="{{ vm.name }}"
      placeholder="{{ vm.placeholder }}"
      type="text"
      class="form-control"
      ng-model="vm.value"
      ng-required="vm.required"
    />
  </span>
  <div ng-switch-when="DATE">
    <c8y-date-time-picker
      ng-model="vm.value"
      placeholder="{{ vm.placeholder }}"
      class="m-r-16 d-inline-block"
      ng-required="vm.required"
    ></c8y-date-time-picker>
  </div>
  <span ng-switch-when="NUMBER">
    <input
      name="{{ vm.name }}"
      placeholder="{{ vm.placeholder }}"
      type="number"
      c8y-model-options="vm.modelOptions"
      class="form-control"
      ng-min="vm.validation.min"
      ng-max="vm.validation.max"
      ng-model="vm.value"
      ng-required="vm.required"
    />
  </span>
  <span ng-switch-when="INTEGER">
    <input
      name="{{ vm.name }}"
      placeholder="{{ vm.placeholder }}"
      type="number"
      c8y-model-options="vm.modelOptions"
      ng-min="vm.validation.min"
      ng-max="vm.validation.max"
      step="1"
      ng-pattern="/^[+-]?\d+$/"
      class="form-control"
      ng-model="vm.value"
      ng-required="vm.required"
    />
  </span>
  <span ng-switch-when="UNSIGNED">
    <input
      name="{{ vm.name }}"
      placeholder="{{ vm.placeholder }}"
      type="number"
      c8y-model-options="vm.modelOptions"
      ng-min="vm.getMax([0, vm.validation.min])"
      ng-max="vm.validation.max"
      step="1"
      ng-pattern="/^\d+$/"
      class="form-control"
      ng-model="vm.value"
      ng-required="vm.required"
    />
  </span>
  <span ng-switch-when="FLAG">
    <!-- Nothing needed -->
  </span>
  <span ng-switch-when="SEVERITY">
    <div class="c8y-select-wrapper">
      <select
        name="{{ vm.name }}"
        placeholder="{{ vm.placeholder }}"
        class="form-control"
        ng-model="vm.value"
        ng-options="alarmSeverity as (alarmSeverity | translate) for alarmSeverity in vm.alarmSeverities"
        ng-required="vm.required"
      ></select>
      <span></span>
    </div>
  </span>
  <span ng-switch-when="ALARMSTATUS">
    <div class="c8y-select-wrapper">
      <select
        name="{{ vm.name }}"
        placeholder="{{ vm.placeholder }}"
        class="form-control"
        ng-model="vm.value"
        ng-options="alarmStatus as (alarmStatus | translate) for alarmStatus in vm.alarmStatuses"
        ng-required="vm.required"
      ></select>
      <span></span>
    </div>
  </span>
  <span ng-switch-when="OPERATIONSTATUS">
    <div class="c8y-select-wrapper">
      <select
        name="{{ vm.name }}"
        placeholder="{{ vm.placeholder }}"
        class="form-control"
        ng-model="vm.value"
        ng-options="operationStatus as (operationStatus | translate) for operationStatus in vm.operationStatuses"
        ng-required="vm.required"
      ></select>
      <span></span>
    </div>
  </span>
</span>
