<div class="widget-modbus" ng-init="wgtId = 'w' + $id">
  <div
    class="card-block"
    ng-repeat="category in vm.categories"
    ng-if="category.elements.length > 0"
    ng-init="catId = 'c' + $index"
  >
    <div class="legend form-block" ng-if="category.name">
      {{ category.label }}
    </div>
    <div ng-repeat="element in category.elements" ng-init="eltId = 'e' + $index">
      <div class="modbus-category form-group">
        <label
          for="{{ wgtId + '_' + catId + '_' + eltId }}"
          ng-class="{ notEditable: !vm.canUpdateElement(vm.device, element) }"
          title="{{ element.name }}"
        >
          {{ element.label }}
        </label>

        <i
          class="icon-spin"
          c8y-icon="circle-o-notch"
          ng-style="{ visibility: vm.isElementChangePending(element) ? 'initial' : 'hidden' }"
        ></i>

        <div class="form-group" ng-if="vm.shouldShowSwitch(element)">
          <button
            class="btn btn-default"
            type="button"
            title="{{ element.valueObj.label }}"
            ng-disabled="!vm.canUpdateElement(vm.device, element) || vm.isElementChangePending(element)"
            uib-btn-checkbox
            btn-checkbox-true="element.meta.enumValues[1]"
            btn-checkbox-false="element.meta.enumValues[0]"
            ng-model="element.valueObj"
            ng-change="vm.updateElement(vm.device, element, element.valueObj)"
            style="z-index: 2"
          >
            <span ng-bind="element.valueObj.label"></span>
          </button>
        </div>

        <form
          ng-if="vm.shouldShowEnumSelect(element) || vm.shouldShowNumberInput(element)"
          name="elementValueForm"
          ng-submit="vm.updateElement(vm.device, element, element.valueObj)"
          novalidate
        >
          <div ng-if="vm.shouldShowEnumSelect(element)" class="c8y-select-wrapper">
            <select
              class="form-control"
              id="{{ wgtId + '_' + catId + '_' + eltId }}"
              name="selectInput"
              ng-model="element.valueObj"
              ng-change="vm.updateElement(vm.device, element, element.valueObj)"
              ng-options="enumValue as enumValue.label for enumValue in element.meta.enumValues"
              ng-required="vm.shouldShowEnumSelect(element)"
              ng-disabled="vm.isElementChangePending(element) || !vm.canUpdateElement(vm.device, element)"
              ng-focus="vm.focus(element)"
              ng-blur="vm.blur(element)"
            ></select>
            <span></span>
          </div>
          <div
            ng-if="vm.shouldShowNumberInput(element)"
            class="input-group fit-w"
            ng-class="{
              'has-error':
                elementValueForm.numberInput.$dirty && elementValueForm.numberInput.$invalid,
              'has-warning': element.meta.valuesRange.possiblePrecisionLoss
            }"
            uib-tooltip="{{ vm.validationHints(elementValueForm.numberInput, element) }}"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <input
              type="number"
              class="form-control text-right"
              id="{{ wgtId + '_' + catId + '_' + eltId }}"
              name="numberInput"
              ng-class="{ 'input-border': vm.canUpdateElement(vm.device, element) }"
              validate-value-in-register-range="element.meta.valuesRange.custom"
              placeholder="{{ 'e.g.' | translate }} {{ element.meta.valuesRange.custom.min }}"
              ng-required="vm.canUpdateElement(vm.device, element) && vm.shouldShowNumberInput(element)"
              ng-disabled="!vm.canUpdateElement(vm.device, element) || vm.isElementChangePending(element)"
              ng-model="element.valueObj.value"
              min="{{ element.meta.valuesRange.custom.min }}"
              max="{{ element.meta.valuesRange.custom.max }}"
              step="{{ element.meta.valuesRange.custom.step }}"
              ng-focus="vm.focus(element)"
              ng-blur="vm.blur(element)"
            />
            <span
              ng-if="vm.shouldShowNumberInput(element) && element.unit"
              class="input-group-addon"
              title="{{ element.unit }}"
              ng-bind="element.unit"
            ></span>
            <span ng-if="vm.canUpdateElement(vm.device, element)" class="input-group-btn">
              <button
                class="btn btn-primary"
                type="submit"
                title="{{ 'Set' | translate }}"
                ng-class="{ 'btn-pending': vm.isElementChangePending(element) }"
                ng-disabled="vm.isElementChangePending(element) || !vm.canUpdateElement(vm.device, element) || elementValueForm.$invalid"
              >
                {{ 'Set' | translate }}
              </button>
            </span>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
