<div ng-controller="modbusWidgetCtrl" class="modbusWidget" ng-init="wgtId = 'wgt' + $id">
  <div
    ng-repeat="(category, elements) in categories"
    ng-init="catId = 'c' + $index;"
    class="panel panel-default"
  >
    <div ng-show="category" class="panel-heading">
      {{ category }}
    </div>
    <div class="panel-body" style="overflow-x: hidden">
      <div ng-repeat="element in elements" ng-init="elmId = 'e' + $index">
        <div class="modbus-category">
          <i
            c8y-icon="spinner"
            class="icon-spin"
            ng-style="{ visibility: isElementChangePending(element) ? 'initial' : 'hidden' }"
          ></i>
          <label
            for="{{ wgtId + '_' + catId + '_' + elmId }}"
            ng-class="{ notEditable: !canUpdateElement(device, element) }"
            title="{{ element.name }}"
          >
            {{ element.name }}
          </label>

          <div class="control-container" ng-if="shouldShowSwitch(element)">
            <button
              class="btn btn-default"
              type="button"
              title="{{ element.valueObj.label }}"
              style="z-index: 2"
              ng-disabled="!canUpdateElement(device, element) || 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="updateElement(device, element, element.valueObj)"
            >
              <span ng-bind="element.valueObj.label"></span>
            </button>
          </div>
          <form
            class="control-container"
            name="elementValueForm"
            ng-if="shouldShowEnumSelect(element) || shouldShowNumberInput(element)"
            ng-submit="updateElement(device, element, element.valueObj)"
            novalidate
          >
            <select
              ng-if="shouldShowEnumSelect(element)"
              id="{{ wgtId + '_' + catId + '_' + elmId }}"
              class="form-control"
              ng-model="element.valueObj"
              ng-change="updateElement(device, element, element.valueObj)"
              ng-options="enumValue as enumValue.label for enumValue in element.meta.enumValues"
              ng-required="shouldShowEnumSelect(element)"
              ng-disabled="isElementChangePending(element) || !canUpdateElement(device, element)"
              ng-focus="focus(element)"
              ng-blur="blur(element)"
            ></select>
            <div
              class="input-group"
              ng-if="shouldShowNumberInput(element)"
              ng-class="{
                'has-error':
                  elementValueForm.numberInput.$dirty && elementValueForm.numberInput.$invalid
              }"
              uib-tooltip="{{ validationHints(elementValueForm.numberInput, element) }}"
              tooltip-popup-delay="500"
              tooltip-append-to-body="true"
            >
              <input
                id="{{ wgtId + '_' + catId + '_' + elmId }}"
                name="numberInput"
                class="form-control text-right"
                ng-class="{ 'input-border': canUpdateElement(device, element) }"
                type="number"
                validate-value-in-register-range="element.meta.valuesRange.custom"
                placeholder="{{ 'e.g.' | translate }} {{ element.meta.valuesRange.custom.min }}"
                ng-required="canUpdateElement(device, element) && shouldShowNumberInput(element)"
                ng-disabled="!canUpdateElement(device, element) || 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="focus(element)"
                ng-blur="blur(element)"
              />
              <span
                class="input-group-addon"
                ng-show="element.unit && shouldShowNumberInput(element)"
                title="{{ element.unit }}"
                ng-bind="element.unit"
              ></span>
              <span class="input-group-btn" ng-if="canUpdateElement(device, element)">
                <button
                  class="btn btn-primary"
                  type="submit"
                  title="{{ 'Set' | translate }}"
                  ng-disabled="isElementChangePending(element) || !canUpdateElement(device, element) || elementValueForm.$invalid"
                >
                  {{ 'Set' | translate }}
                </button>
              </span>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
