<div class="modal-header separator" ng-if="vm.resolve.title">
  <h3 id="modal-title" class="text-truncate" title="{{ vm.resolve.title | translate }}">
    {{ vm.resolve.title | translate }}
  </h3>
</div>
<div class="modal-inner-scroll">
  <div class="modal-body" id="modal-body">
    <form ng-if="vm.element" style="margin-top: -16px" name="vm.elementForm" novalidate>
      <fieldset ng-if="vm.features.messageTypeId">
        <div class="legend form-block">
          <span translate>Message type</span>
          <i
            class="text-primary"
            c8y-icon="question-circle-o"
            aria-label="{{
              'Select from which message type the value should be extracted.' | translate
            }}"
            uib-tooltip="{{
              'Select from which message type the value should be extracted.' | translate
            }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          ></i>
        </div>

        <div class="tight-grid">
          <div
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('messageTypeId') }"
            aria-label="{{ vm.validationHints(vm.elementForm.messageTypeId) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.messageTypeId) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="messageTypeId">
              {{ 'Message ID' | translate }}
              <i
                class="text-primary"
                c8y-icon="question-circle-o"
                uib-tooltip="{{ vm.messageIdTooltip | translate }}"
                tooltip-placement="bottom"
                tooltip-popup-delay="500"
                tooltip-append-to-body="true"
              ></i>
            </label>
            <input
              type="number"
              class="form-control"
              id="messageTypeId"
              name="messageTypeId"
              ng-model="vm.element.messageTypeId"
              ng-min="0"
              ng-max="messageTypeIdMax()"
              placeholder="{{ 'e.g.' | translate }} 1"
              required
            />
          </div>
        </div>
      </fieldset>

      <fieldset>
        <div class="legend form-block">
          <span translate>General</span>
        </div>

        <div class="tight-grid">
          <div
            class="form-group col-lg-6"
            ng-class="{ 'has-error': vm.invalid('name') }"
            aria-label="{{ vm.validationHints(vm.elementForm.name) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.name) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="name" translate>Name</label>
            <input
              type="text"
              class="form-control"
              id="name"
              name="name"
              ng-model="vm.element.name"
              data-cy="configure-register--name"
              c8y-autocomplete="off"
              placeholder="{{ 'e.g. My element' | translate }}"
              required
            />
          </div>
          <div
            class="form-group col-lg-6 category-form-group"
            ng-class="{ 'has-error': vm.invalid('category') }"
            aria-label="{{ vm.validationHints(vm.elementForm.category) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.category) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="category" translate>Display category</label>
            <input
              class="form-control"
              id="category"
              name="category"
              ng-model="vm.element.category"
              data-cy="configure-register--category"
              c8y-autocomplete="off"
              uib-typeahead="category.name for category in vm.categories | filter:{name: $viewValue}"
              typeahead-template-url=":::PLUGIN_PATH:::/modals/category-typeahead.html"
              placeholder="{{ 'e.g. Elements' | translate }}"
            />
          </div>
        </div>
        <div class="tight-grid">
          <div
            ng-if="vm.features.description"
            class="form-group col-lg-12"
            ng-class="{ 'has-error': vm.invalid('description') }"
            aria-label="{{ vm.validationHints(vm.elementForm.description) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.description) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="description" translate>Description</label>
            <textarea
              class="form-control"
              id="description"
              name="description"
              ng-model="vm.element.description"
              placeholder="{{ 'e.g. Main element' | translate }}"
            ></textarea>
          </div>
        </div>
      </fieldset>

      <fieldset>
        <div class="legend form-block">
          <span translate>Value selection</span>
          <i
            class="text-primary"
            c8y-icon="question-circle-o"
            aria-label="{{ 'Indicate from where the value should be extracted.' | translate }}"
            uib-tooltip="{{ 'Indicate from where the value should be extracted.' | translate }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          ></i>
        </div>

        <div
          ng-show="vm.element.meta.valuesRange.possiblePrecisionLoss"
          class="alert alert-warning"
          translate
        >
          Precision loss may occur, check Cloud Fieldbus specification for details.
        </div>

        <div class="tight-grid">
          <div
            class="form-group col-lg-6"
            ng-class="{ 'has-error': vm.invalid('oid') }"
            aria-label="{{ vm.validationHints(vm.elementForm.oid) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.oid) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
            ng-if="vm.features.oid"
          >
            <label for="oid">
              {{ 'OID' | translate }}
              <i
                class="text-primary"
                c8y-icon="question-circle-o"
                aria-label="{{
                  'An object identifier value, typically an address identifying a device and its status.'
                    | translate
                }}"
                uib-tooltip="{{
                  'An object identifier value, typically an address identifying a device and its status.'
                    | translate
                }}"
                tooltip-placement="bottom"
                tooltip-popup-delay="500"
                tooltip-append-to-body="true"
              ></i>
            </label>
            <input
              type="text"
              class="form-control"
              id="oid"
              name="oid"
              ng-disabled="vm.element.meta.original.oid"
              ng-model="vm.element.oid"
              c8y-autocomplete="off"
              placeholder="{{ 'e.g.' | translate }} 1.3.6.1.2.1.16.17.4.1.6"
              required
            />
          </div>
          <div
            ng-if="vm.features.number"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('number') }"
            aria-label="{{ vm.validationHints(vm.elementForm.number) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.number) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="number">
              <span>{{ (features.number.label | translate) || ('Number' | translate) }}</span>
            </label>
            <input
              ng-if="!vm.features.number.useHex"
              type="number"
              class="form-control"
              id="number"
              name="number"
              ng-model="vm.element.number"
              data-cy="configure-register--number"
              ng-min="vm.getNumberMin()"
              ng-max="vm.getNumberMax()"
              step="1"
              placeholder="{{ 'e.g.' | translate }} 1234"
              required
            />
            <input
              ng-if="vm.features.number.useHex"
              type="text"
              class="form-control"
              id="number"
              name="number"
              ng-model="vm.element.number"
              placeholder="{{ 'Hexadecimal number' | translate }}"
              required
            />
          </div>
          <div
            ng-if="vm.features.browsePath"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('browsePath') }"
            aria-label="{{ vm.validationHints(vm.elementForm.browsePath) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.browsePath) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="browsePath" translate>Browse path</label>
            <input
              class="form-control"
              id="browsePath"
              name="browsePath"
              ng-model="vm.element.browsePath"
              placeholder="{{ 'e.g.' | translate }} 4:Boilers/4:Boiler #1"
              required
            />
          </div>
          <div
            ng-if="vm.features.startBit"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('startBit') }"
            aria-label="{{ vm.validationHints(vm.elementForm.startBit) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.startBit) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="startBit" translate>Start bit</label>
            <input
              type="number"
              class="form-control"
              id="startBit"
              name="startBit"
              ng-model="vm.element.startBit"
              data-cy="configure-register--startBit"
              ng-min="0"
              ng-max="vm.startBitMax()"
              step="1"
              placeholder="{{ 'e.g.' | translate }} 0"
              required
            />
          </div>
          <div
            ng-if="vm.features.noBits"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('noBits') }"
            aria-label="{{ vm.validationHints(vm.elementForm.noBits) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.noBits) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="noBits" translate>Number of bits</label>
            <input
              type="number"
              class="form-control"
              id="noBits"
              name="noBits"
              ng-model="vm.element.noBits"
              data-cy="configure-register--noBits"
              ng-min="1"
              ng-max="vm.noBitsMax(vm.element.startBit)"
              step="1"
              placeholder="{{ 'e.g.' | translate }} 1"
              required
            />
          </div>
          <div
            ng-if="vm.features.nodeType"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('nodeTypeValue') }"
            aria-label="{{ vm.validationHints(vm.elementForm.nodeType) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.nodeType) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="nodeTypeValue" translate>Node type</label>
            <div class="c8y-select-wrapper disabled">
              <select
                class="form-control"
                id="nodeTypeValue"
                name="nodeTypeValue"
                ng-model="vm.element.nodeType"
                ng-init="vm.element.nodeType='Variable'"
                disabled
              >
                <option value="Variable">Variable</option>
              </select>
              <span></span>
            </div>
          </div>
          <div
            ng-if="vm.features.attributeType"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('attributeType') }"
            aria-label="{{ vm.validationHints(vm.elementForm.attributeType) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.attributeType) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="attributeType" translate>Attribute type</label>
            <input
              class="form-control"
              id="attributeType"
              name="attributeType"
              ng-model="vm.element.attributeType"
              ng-init="vm.element.attributeType='Value'"
              disabled
            />
          </div>
          <div
            ng-if="vm.features.index"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('index') }"
            aria-label="{{ vm.validationHints(vm.elementForm.index) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.index) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="index" translate>Index</label>
            <input
              class="form-control"
              id="index"
              name="index"
              ng-model="vm.element.index"
              ng-min="vm.features.index.min"
              ng-max="vm.features.index.max"
              placeholder="{{ 'e.g.' | translate }} 100A"
              c8y-hex-input
              required
            />
          </div>
          <div
            ng-if="vm.features.subIndex"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('subIndex') }"
            aria-label="{{ vm.validationHints(vm.elementForm.subIndex) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.subIndex) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="subIndex" translate>Sub-index</label>
            <input
              class="form-control"
              id="subIndex"
              name="subIndex"
              ng-model="vm.element.subIndex"
              ng-min="vm.features.subIndex.min"
              ng-max="vm.features.subIndex.max"
              placeholder="{{ 'e.g.' | translate }} 1C"
              c8y-hex-input
            />
          </div>
          <div
            ng-if="vm.features.dataType"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('dataType') }"
            aria-label="{{ vm.validationHints(vm.elementForm.dataType) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.dataType) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="dataType" translate>Data type</label>
            <div class="c8y-select-wrapper">
              <select
                class="form-control"
                id="dataType"
                name="dataType"
                ng-model="vm.element.meta.dataType"
                ng-options="dataType as (dataType.label | translate) for dataType in vm.dataTypes.values()"
                required
              >
                <option ng-if="!vm.element.meta.dataType" value="" translate>
                  Select… (required)
                </option>
              </select>
              <span></span>
            </div>
          </div>
          <div
            ng-if="vm.features.accessType"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('accessType') }"
            aria-label="{{ vm.validationHints(vm.elementForm.accessType) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.accessType) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="accessType" translate>Access type</label>
            <div class="c8y-select-wrapper">
              <select
                class="form-control"
                id="accessType"
                name="accessType"
                ng-model="vm.element.meta.accessType"
                ng-options="accessType as (accessType.label | translate) for accessType in vm.accessTypes.values()"
                ng-change="vm.onAccessTypeChange()"
                required
              >
                <option ng-if="!vm.element.meta.accessType" value="" translate>
                  Select… (required)
                </option>
              </select>
              <span></span>
            </div>
          </div>
        </div>
      </fieldset>

      <fieldset ng-if="vm.shouldShowNormalisationSection()">
        <div class="legend form-block">
          <span translate>Value normalisation</span>
          <i
            class="text-primary"
            c8y-icon="question-circle-o"
            aria-label="{{
              'Define how the raw value should be transformed before storing in the platform.'
                | translate
            }}"
            uib-tooltip="{{
              'Define how the raw value should be transformed before storing in the platform.'
                | translate
            }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          ></i>
        </div>

        <div class="tight-grid">
          <div
            ng-if="vm.features.multiplier"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('multiplier') }"
            aria-label="{{ vm.validationHints(vm.elementForm.multiplier) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.multiplier) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="multiplier" translate>Multiplier</label>
            <input
              type="number"
              class="form-control"
              id="multiplier"
              name="multiplier"
              ng-model="vm.element.multiplier"
              data-cy="configure-register--multiplier"
              ng-min="vm.features.multiplier.min"
              step="{{ vm.features.multiplier.step }}"
              placeholder="{{ 'e.g.' | translate }} {{ vm.features.multiplier.min }}"
              required
            />
          </div>
          <div
            ng-if="vm.features.divisor"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('divisor') }"
            aria-label="{{ vm.validationHints(vm.elementForm.divisor) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.divisor) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="divisor" translate>Divisor</label>
            <input
              type="number"
              class="form-control"
              id="divisor"
              name="divisor"
              ng-model="vm.element.divisor"
              data-cy="configure-register--divisor"
              ng-min="1"
              step="1"
              placeholder="{{ 'e.g.' | translate }} 1"
              required
            />
          </div>
          <div
            ng-if="vm.features.offset"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('offset') }"
            aria-label="{{ vm.validationHints(vm.elementForm.offset) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.offset) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="offset" translate>Offset</label>
            <input
              type="number"
              class="form-control"
              id="offset"
              name="offset"
              ng-model="vm.element.offset"
              ng-min="vm.features.offset.min"
              ng-max="vm.features.offset.max"
              placeholder="{{ 'e.g.' | translate }} {{ vm.features.offset.min }}"
              required
            />
          </div>
          <div
            ng-if="vm.features.decimalPlaces"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('decimalPlaces') }"
            aria-label="{{ vm.validationHints(vm.elementForm.decimalPlaces) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.decimalPlaces) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="decimalPlaces">
              <span translate>Right shift`noun`</span>
              <i
                class="text-primary"
                c8y-icon="question-circle-o"
                aria-label="{{
                  'Right shift decimal point by the given number of places.' | translate
                }}"
                uib-tooltip="{{
                  'Right shift decimal point by the given number of places.' | translate
                }}"
                tooltip-placement="bottom"
                tooltip-popup-delay="500"
                tooltip-append-to-body="true"
              ></i>
            </label>
            <input
              type="number"
              class="form-control"
              id="decimalPlaces"
              name="decimalPlaces"
              ng-model="vm.element.decimalPlaces"
              data-cy="configure-register--decimal-places"
              ng-min="0"
              ng-max="5"
              step="1"
              placeholder="{{ 'e.g.' | translate }} 0"
              required
            />
          </div>
          <div
            ng-if="vm.features.unit"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('unit') }"
            aria-label="{{ vm.validationHints(vm.elementForm.unit) }}"
            uib-tooltip="{{ vm.validationHints(vm.elementForm.unit) }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="unit" translate>Unit</label>
            <input
              type="text"
              class="form-control"
              id="unit"
              name="unit"
              ng-model="vm.element.unit"
              data-cy="configure-register--unit"
              placeholder="{{ 'e.g.' | translate }} u"
              ng-required="vm.features.unit.requiredForSendMeasurement && vm.element.meta.sendMeasurement"
            />
          </div>
          <div
            ng-if="vm.element.meta.updateStatus"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('min') }"
            aria-label="{{
              vm.validationHints(vm.elementForm.min, {
                validateValueInRegisterRange: vm.element.meta.valuesRange.base
              })
            }}"
            uib-tooltip="{{
              vm.validationHints(vm.elementForm.min, {
                validateValueInRegisterRange: vm.element.meta.valuesRange.base
              })
            }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="min" translate>Minimum</label>
            <input
              type="number"
              class="form-control"
              id="min"
              name="min"
              ng-model="vm.element.min"
              ng-min="vm.element.meta.valuesRange.base.min"
              ng-max="vm.element.meta.valuesRange.custom.max"
              step="{{ vm.element.meta.valuesRange.base.step }}"
              validate-value-in-register-range="vm.element.meta.valuesRange.base"
              placeholder="{{ vm.getValuePlaceholder(vm.element.meta.valuesRange.base.min) }}"
            />
          </div>
          <div
            ng-if="vm.element.meta.updateStatus"
            class="form-group col-lg-4"
            ng-class="{ 'has-error': vm.invalid('max') }"
            aria-label="{{
              vm.validationHints(vm.elementForm.max, {
                validateValueInRegisterRange: vm.element.meta.valuesRange.base
              })
            }}"
            uib-tooltip="{{
              vm.validationHints(vm.elementForm.max, {
                validateValueInRegisterRange: vm.element.meta.valuesRange.base
              })
            }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <label for="max" translate>Maximum</label>
            <input
              type="number"
              class="form-control"
              id="max"
              name="max"
              ng-model="vm.element.max"
              ng-min="vm.element.meta.valuesRange.custom.min"
              ng-max="vm.element.meta.valuesRange.base.max"
              step="any"
              validate-value-in-register-range="vm.element.meta.valuesRange.base"
              placeholder="{{ vm.getValuePlaceholder(vm.element.meta.valuesRange.base.max) }}"
            />
          </div>
        </div>
      </fieldset>

      <fieldset ng-if="vm.shouldShowOptions()">
        <div class="legend form-block" translate>Options</div>
        <div class="form-group">
          <div ng-if="vm.features.options.signed">
            <label title="{{ 'Signed' | translate }}" class="c8y-checkbox input-sm">
              <input type="checkbox" ng-model="vm.element.signed" data-cy="configure-register--signed"/>
              <span></span>
              <span>{{ 'Signed' | translate }}</span>
              <i
                class="text-primary"
                c8y-icon="question-circle-o"
                aria-label="{{ 'Select if the value is a signed number.' | translate }}"
                uib-tooltip="{{ 'Select if the value is a signed number.' | translate }}"
                tooltip-placement="bottom"
                tooltip-popup-delay="500"
                tooltip-append-to-body="true"
              ></i>
            </label>
          </div>
          <div ng-if="vm.features.options.enumType">
            <label title="{{ 'Enumeration type' | translate }}" class="c8y-checkbox input-sm">
              <input type="checkbox" ng-model="vm.element.meta.enumType" />
              <span></span>
              <span>{{ 'Enumeration type' | translate }}</span>
              <i
                class="text-primary"
                c8y-icon="question-circle-o"
                aria-label="{{
                  'Select to define the mapping of possible values into strings.' | translate
                }}"
                uib-tooltip="{{
                  'Select to define the mapping of possible values into strings.' | translate
                }}"
                tooltip-placement="bottom"
                tooltip-popup-delay="500"
                tooltip-append-to-body="true"
              ></i>
            </label>
            <div class="collapse" uib-collapse="!vm.element.meta.enumType">
              <div ng-if="vm.element.meta.enumType">
                <label translate>Enumeration values</label>
                <div ng-repeat="enumValue in vm.element.meta.enumValues">
                  <div class="tight-grid">
                    <ng-form name="vm.nestedEnumValueValueForm" class="col-md-5">
                      <div
                        class="form-group"
                        ng-class="{
                          'has-error':
                            vm.nestedEnumValueValueForm.$dirty &&
                            vm.nestedEnumValueValueForm.$invalid
                        }"
                        aria-label="{{
                          vm.validationHints(vm.nestedEnumValueValueForm, {
                            validateValueInRegisterRange: vm.element.meta.valuesRange.custom
                          })
                        }}"
                        uib-tooltip="{{
                          vm.validationHints(vm.nestedEnumValueValueForm, {
                            validateValueInRegisterRange: vm.element.meta.valuesRange.custom
                          })
                        }}"
                        tooltip-placement="bottom"
                        tooltip-popup-delay="500"
                        tooltip-append-to-body="true"
                      >
                        <input
                          type="number"
                          class="form-control"
                          ng-model="enumValue.value"
                          ng-min="vm.element.meta.valuesRange.custom.min"
                          ng-max="vm.element.meta.valuesRange.custom.max"
                          step="{{ vm.element.meta.valuesRange.custom.step }}"
                          validate-value-in-register-range="vm.element.meta.valuesRange.custom"
                          unique
                          unique-in-array="vm.element.meta.enumValues"
                          unique-prop-name="value"
                          placeholder="{{ 'Value' | translate }}"
                          aria-label="{{ 'Value' | translate }}"
                          uib-tooltip="{{ 'Value' | translate }}"
                          tooltip-placement="bottom"
                          tooltip-popup-delay="500"
                          tooltip-append-to-body="true"
                          required
                        />
                      </div>
                    </ng-form>
                    <ng-form name="vm.nestedEnumValueLabelForm" class="col-md-5">
                      <div
                        class="form-group"
                        ng-class="{
                          'has-error':
                            vm.nestedEnumValueLabelForm.$dirty &&
                            vm.nestedEnumValueLabelForm.$invalid
                        }"
                        aria-label="{{ vm.validationHints(vm.nestedEnumValueLabelForm) }}"
                        uib-tooltip="{{ vm.validationHints(vm.nestedEnumValueLabelForm) }}"
                        tooltip-placement="bottom"
                        tooltip-popup-delay="500"
                        tooltip-append-to-body="true"
                      >
                        <input
                          class="form-control"
                          placeholder="{{ 'Label' | translate }}"
                          aria-label="{{ 'Label' | translate }}"
                          uib-tooltip="{{ 'Label' | translate }}"
                          tooltip-placement="bottom"
                          tooltip-popup-delay="500"
                          tooltip-append-to-body="true"
                          ng-model="enumValue.label"
                          required
                        />
                      </div>
                    </ng-form>
                    <div class="col-md-2">
                      <a
                        class="btn btn-link"
                        title="{{ 'Remove value' | translate }}"
                        ng-click="vm.removeEnumValue(vm.element, enumValue)"
                      >
                        <i c8y-icon="minus-circle" class="text-danger"></i>
                      </a>
                    </div>
                  </div>
                </div>
                <a
                  class="btn-add-block top-m-sm"
                  title="{{ 'Add value' | translate }}"
                  ng-click="vm.addEnumValue(vm.element)"
                >
                  <i c8y-icon="plus-circle"></i>
                  <span>{{ 'Add value' | translate }}</span>
                </a>
              </div>
            </div>
          </div>
          <div ng-if="vm.features.options.bcd">
            <label class="c8y-checkbox input-sm">
              <input type="checkbox" ng-model="vm.element.bcd" />
              <span></span>
              <span>{{ 'Packed decimal' | translate }}</span>
              <i
                class="text-primary"
                c8y-icon="question-circle-o"
                aria-label="{{ 'Select if the value is BCD encoded.' | translate }}"
                uib-tooltip="{{ 'Select if the value is BCD encoded.' | translate }}"
                tooltip-placement="bottom"
                tooltip-popup-delay="500"
                tooltip-append-to-body="true"
              ></i>
            </label>
          </div>
          <div ng-if="vm.features.options.littleEndian">
            <label class="c8y-checkbox input-sm">
              <input
                ng-disabled="vm.element.noBits <= 8"
                type="checkbox"
                ng-model="vm.element.littleEndian"
              />
              <span></span>
              <span>{{ 'Little-endian' | translate }}</span>
              <i
                class="text-primary"
                c8y-icon="question-circle-o"
                aria-label="{{
                  'Select if the value is represented in little-endian format based on 8-bit values (option can be selected if &quot;Number of bits&quot; is greater than 8).'
                    | translate
                }}"
                uib-tooltip="{{
                  'Select if the value is represented in little-endian format based on 8-bit values (option can be selected if &quot;Number of bits&quot; is greater than 8).'
                    | translate
                }}"
                tooltip-placement="bottom"
                tooltip-popup-delay="500"
                tooltip-append-to-body="true"
              ></i>
            </label>
          </div>
        </div>
      </fieldset>

      <fieldset ng-if="vm.shouldShowFunctionalities()">
        <div class="legend form-block">
          <span translate>Functionalities</span>
          <i
            class="text-primary"
            c8y-icon="question-circle-o"
            aria-label="{{ 'Select the actions to be performed with this value.' | translate }}"
            uib-tooltip="{{ 'Select the actions to be performed with this value.' | translate }}"
            tooltip-placement="bottom"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          ></i>
        </div>

        <div class="form-group" ng-if="vm.features.functionalities.readWriteMutex">
          <label
            title="{{ 'Show status (read-only)' | translate }}"
            class="radio-inline c8y-radio input-sm"
          >
            <input
              type="radio"
              name="statusMappingRadios"
              value="read"
              ng-model="vm.readWriteMutexValue"
              ng-change="vm.onStatusMappingRadiosChange()"
              required
            />
            <span></span>
            <span>{{ 'Show status (read-only)' | translate }}</span>
          </label>

          <label
            title="{{ 'Update status (write)' | translate }}"
            class="radio-inline c8y-radio input-sm"
          >
            <input
              type="radio"
              name="statusMappingRadios"
              value="write"
              ng-model="vm.readWriteMutexValue"
              ng-change="vm.onStatusMappingRadiosChange()"
              required
            />
            <span></span>
            <span>{{ 'Update status (write)' | translate }}</span>
          </label>
        </div>
        <div
          ng-if="vm.features.functionalities.showStatus && vm.shouldShowFunctionality('showStatus')"
        >
          <label
            title="{{ 'Show status (read-only access)' | translate }}"
            class="c8y-checkbox input-sm"
          >
            <input
              type="checkbox"
              ng-model="vm.element.meta.showStatus"
              ng-disabled="vm.element.meta.updateStatus"
            />
            <span></span>
            <span>{{ 'Show status (read-only access)' | translate }}</span>
            <i
              class="text-primary"
              c8y-icon="question-circle-o"
              aria-label="{{
                'Enable showing current value in UI (for example, on the Fieldbus widget).'
                  | translate
              }}"
              uib-tooltip="{{
                'Enable showing current value in UI (for example, on the Fieldbus widget).'
                  | translate
              }}"
              tooltip-placement="bottom"
              tooltip-popup-delay="500"
              tooltip-append-to-body="true"
            ></i>
          </label>
        </div>
        <div
          ng-if="
            vm.features.functionalities.updateStatus &&
            !vm.element.input &&
            vm.shouldShowFunctionality('updateStatus')
          "
        >
          <label
            title="{{ 'Update status (read/write access)' | translate }}"
            class="c8y-checkbox input-sm"
          >
            <input
              type="checkbox"
              ng-model="vm.element.meta.updateStatus"
              ng-change="vm.onUpdateStatusCheckboxChange()"
            />
            <span></span>
            <span>{{ 'Update status (read/write access)' | translate }}</span>
            <i
              class="text-primary"
              c8y-icon="question-circle-o"
              aria-label="{{
                'Enable changing current value from UI (for example, using the Fieldbus widget).'
                  | translate
              }}"
              uib-tooltip="{{
                'Enable changing current value from UI (for example, using the Fieldbus widget).'
                  | translate
              }}"
              tooltip-placement="bottom"
              tooltip-popup-delay="500"
              tooltip-append-to-body="true"
            ></i>
          </label>
        </div>
        <div class="list-group row">
          <div
            class="list-group-item"
            ng-if="
              vm.shouldEnableShowStatusStandardFunctionalities() &&
              vm.shouldShowFunctionality('sendMeasurement')
            "
          >
            <div class="d-flex">
              <div class="list-item-switch">
                <label class="c8y-switch c8y-switch--inline">
                  <input type="checkbox" ng-model="vm.element.meta.sendMeasurement" />
                  <span></span>
                  <span
                    class="sr-only"
                    ng-if="!vm.features.functionalities.sendMeasurement.checkboxLabel"
                    translate
                  >
                    Send measurement
                  </span>
                  <span
                    class="sr-only"
                    ng-if="vm.features.functionalities.sendMeasurement.checkboxLabel"
                  >
                    {{ vm.features.functionalities.sendMeasurement.checkboxLabel | translate }}
                  </span>
                </label>
              </div>
              <div class="list-item-icon">
                <i c8y-icon="line-chart"></i>
              </div>
              <div class="list-item-title">
                <span ng-if="!vm.features.functionalities.sendMeasurement.checkboxLabel" translate>
                  Send measurement
                </span>
                <span ng-if="vm.features.functionalities.sendMeasurement.checkboxLabel">
                  {{ vm.features.functionalities.sendMeasurement.checkboxLabel | translate }}
                </span>
                <i
                  class="text-primary"
                  c8y-icon="question-circle-o"
                  aria-label="{{
                    'Create a measurement whenever the value is changed.' | translate
                  }}"
                  uib-tooltip="{{
                    'Create a measurement whenever the value is changed.' | translate
                  }}"
                  tooltip-placement="bottom"
                  tooltip-popup-delay="500"
                  tooltip-append-to-body="true"
                ></i>
              </div>
            </div>
            <div class="collapse" uib-collapse="!vm.element.meta.sendMeasurement">
              <div
                ng-if="
                  vm.element.meta.sendMeasurement &&
                  vm.shouldEnableShowStatusStandardFunctionalities() &&
                  vm.shouldShowFunctionality('sendMeasurement')
                "
              >
                <div class="tight-grid">
                  <div
                    class="form-group col-lg-6"
                    ng-class="{ 'has-error': vm.invalid('measurementType') }"
                    aria-label="{{ vm.validationHints(vm.elementForm.measurementType) }}"
                    uib-tooltip="{{ vm.validationHints(vm.elementForm.measurementType) }}"
                    tooltip-placement="bottom"
                    tooltip-popup-delay="500"
                    tooltip-append-to-body="true"
                  >
                    <label for="measurementType" translate>Measurement type</label>
                    <input
                      class="form-control"
                      id="measurementType"
                      name="measurementType"
                      validate-measurement-fragment
                      ng-model="vm.element.measurementMapping.type"
                      placeholder="{{ 'e.g.' | translate }} c8y_Temperature"
                      ng-required="vm.element.meta.sendMeasurement"
                    />
                  </div>
                  <div
                    class="form-group col-lg-6"
                    ng-class="{ 'has-error': vm.invalid('measurementSeries') }"
                    aria-label="{{ vm.validationHints(vm.elementForm.measurementSeries) }}"
                    uib-tooltip="{{ vm.validationHints(vm.elementForm.measurementSeries) }}"
                    tooltip-placement="bottom"
                    tooltip-popup-delay="500"
                    tooltip-append-to-body="true"
                  >
                    <label for="measurementSeries" translate>Measurement series</label>
                    <input
                      class="form-control"
                      id="measurementSeries"
                      name="measurementSeries"
                      validate-measurement-fragment
                      ng-model="vm.element.measurementMapping.series"
                      placeholder="{{ 'e.g.' | translate }} T"
                      ng-required="vm.element.meta.sendMeasurement"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="list-group-item"
            ng-if="
              vm.shouldEnableShowStatusStandardFunctionalities() &&
              vm.shouldShowFunctionality('raiseAlarm')
            "
          >
            <div class="d-flex">
              <div class="list-item-switch">
                <label class="c8y-switch c8y-switch--inline">
                  <input type="checkbox" ng-model="vm.element.meta.raiseAlarm" />
                  <span></span>
                  <span class="sr-only" translate>Raise alarm</span>
                </label>
              </div>
              <div class="list-item-icon">
                <i c8y-icon="bell"></i>
              </div>
              <div class="list-item-title">
                <span translate>Raise alarm</span>
                <i
                  class="text-primary"
                  c8y-icon="question-circle-o"
                  aria-label="{{ 'Create an alarm if the value is not equal to 0' | translate }}"
                  uib-tooltip="{{ 'Create an alarm if the value is not equal to 0' | translate }}"
                  tooltip-placement="bottom"
                  tooltip-popup-delay="500"
                  tooltip-append-to-body="true"
                ></i>
              </div>
            </div>
            <div class="collapse" uib-collapse="!vm.element.meta.raiseAlarm">
              <div
                ng-if="
                  vm.element.meta.raiseAlarm &&
                  vm.shouldEnableShowStatusStandardFunctionalities() &&
                  vm.shouldShowFunctionality('raiseAlarm')
                "
              >
                <div class="tight-grid">
                  <div
                    ng-if="vm.features.functionalities.raiseAlarm.mask"
                    class="form-group col-lg-6"
                    ng-class="{ 'has-error': vm.invalid('alarmMask') }"
                    aria-label="{{ vm.validationHints(vm.elementForm.alarmMask) }}"
                    uib-tooltip="{{ vm.validationHints(vm.elementForm.alarmMask) }}"
                    tooltip-placement="bottom"
                    tooltip-popup-delay="500"
                    tooltip-append-to-body="true"
                  >
                    <label for="alarmMask" translate>Alarm mask</label>
                    <input
                      class="form-control"
                      id="alarmMask"
                      name="alarmMask"
                      ng-model="vm.element.alarmMapping.mask"
                      ng-min="vm.element.meta.valuesRange.mask.min"
                      ng-max="vm.element.meta.valuesRange.mask.max"
                      placeholder="{{ 'e.g.' | translate }} 2"
                      ng-required="vm.element.meta.raiseAlarm"
                      c8y-hex-input
                    />
                  </div>
                  <div
                    class="form-group col-lg-6"
                    ng-class="{ 'has-error': vm.invalid('alarmType') }"
                    aria-label="{{ vm.validationHints(vm.elementForm.alarmType) }}"
                    uib-tooltip="{{ vm.validationHints(vm.elementForm.alarmType) }}"
                    tooltip-placement="bottom"
                    tooltip-popup-delay="500"
                    tooltip-append-to-body="true"
                  >
                    <label for="alarmType" translate>Alarm type</label>
                    <input
                      class="form-control"
                      id="alarmType"
                      name="alarmType"
                      ng-model="vm.element.alarmMapping.type"
                      placeholder="{{ 'e.g.' | translate }} c8y_HighTemperature"
                      ng-required="vm.element.meta.raiseAlarm"
                    />
                  </div>
                  <div
                    class="form-group col-lg-6"
                    ng-class="{ 'has-error': vm.invalid('alarmText') }"
                    aria-label="{{ vm.validationHints(vm.elementForm.alarmText) }}"
                    uib-tooltip="{{ vm.validationHints(vm.elementForm.alarmText) }}"
                    tooltip-placement="bottom"
                    tooltip-popup-delay="500"
                    tooltip-append-to-body="true"
                  >
                    <label for="alarmText" translate>Alarm text</label>
                    <input
                      class="form-control"
                      id="alarmText"
                      name="alarmText"
                      ng-model="vm.element.alarmMapping.text"
                      placeholder="{{ 'e.g. Temperature is high' | translate }}"
                      ng-required="vm.element.meta.raiseAlarm"
                    />
                  </div>
                  <div
                    class="form-group col-lg-6"
                    ng-class="{ 'has-error': vm.invalid('alarmSeverity') }"
                    aria-label="{{ vm.validationHints(vm.elementForm.alarmSeverity) }}"
                    uib-tooltip="{{ vm.validationHints(vm.elementForm.alarmSeverity) }}"
                    tooltip-placement="bottom"
                    tooltip-popup-delay="500"
                    tooltip-append-to-body="true"
                  >
                    <label for="alarmSeverity" translate>Alarm severity</label>
                    <div class="c8y-select-wrapper">
                      <select
                        class="form-control"
                        id="alarmSeverity"
                        name="alarmSeverity"
                        ng-model="vm.element.alarmMapping.severity"
                        ng-options="(severity | translate) for severity in vm.alarmSeverities"
                        ng-required="vm.element.meta.raiseAlarm"
                      >
                        <option
                          ng-if="vm.element.meta.raiseAlarm && !vm.element.alarmMapping.severity"
                          value=""
                          translate
                        >
                          Select… (required)
                        </option>
                      </select>
                      <span></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="list-group-item"
            ng-if="
              vm.shouldEnableShowStatusStandardFunctionalities() &&
              vm.shouldShowFunctionality('sendEvent')
            "
          >
            <div class="d-flex">
              <div class="list-item-switch">
                <label class="c8y-switch c8y-switch--inline">
                  <input type="checkbox" ng-model="vm.element.meta.sendEvent" />
                  <span></span>
                  <span class="sr-only" translate>Send event</span>
                </label>
              </div>
              <div class="list-item-icon">
                <i c8y-icon="online1"></i>
              </div>
              <div class="list-item-title">
                <span translate>Send event</span>
                <i
                  class="text-primary"
                  c8y-icon="question-circle-o"
                  aria-label="{{ 'Create an event whenever the value is changed' | translate }}"
                  uib-tooltip="{{ 'Create an event whenever the value is changed' | translate }}"
                  tooltip-placement="bottom"
                  tooltip-popup-delay="500"
                  tooltip-append-to-body="true"
                ></i>
              </div>
            </div>
            <div class="collapse" uib-collapse="!vm.element.meta.sendEvent">
              <div
                ng-if="
                  vm.element.meta.sendEvent &&
                  vm.shouldEnableShowStatusStandardFunctionalities() &&
                  vm.shouldShowFunctionality('sendEvent')
                "
              >
                <div class="tight-grid">
                  <div
                    class="form-group col-lg-6"
                    ng-class="{ 'has-error': vm.invalid('eventType') }"
                    aria-label="{{ vm.validationHints(vm.elementForm.eventType) }}"
                    uib-tooltip="{{ vm.validationHints(vm.elementForm.eventType) }}"
                    tooltip-placement="bottom"
                    tooltip-popup-delay="500"
                    tooltip-append-to-body="true"
                  >
                    <label for="eventType" translate>Event type</label>
                    <input
                      class="form-control"
                      id="eventType"
                      name="eventType"
                      ng-model="vm.element.eventMapping.type"
                      placeholder="{{ 'e.g.' | translate }} c8y_LocationUpdate"
                      ng-required="vm.element.meta.sendEvent"
                    />
                  </div>
                  <div
                    class="form-group col-lg-6"
                    ng-class="{ 'has-error': vm.invalid('eventText') }"
                    aria-label="{{ vm.validationHints(vm.elementForm.eventText) }}"
                    uib-tooltip="{{ vm.validationHints(vm.elementForm.eventText) }}"
                    tooltip-placement="bottom"
                    tooltip-popup-delay="500"
                    tooltip-append-to-body="true"
                  >
                    <label for="eventText" translate>Event text</label>
                    <input
                      class="form-control"
                      id="eventText"
                      name="eventText"
                      ng-model="vm.element.eventMapping.text"
                      placeholder="{{ 'e.g. Location update' | translate }}"
                      ng-required="vm.element.meta.sendEvent"
                    />
                  </div>
                </div>
                <div
                  class="tight-grid"
                  ng-if="
                    vm.features.functionalities.sendEvent.fragmentType ||
                    vm.features.functionalities.sendEvent.innerType
                  "
                >
                  <div
                    ng-if="vm.features.functionalities.sendEvent.fragmentType"
                    class="form-group col-lg-6"
                    ng-class="{ 'has-error': vm.invalid('eventFragmentType') }"
                    aria-label="{{ vm.validationHints(vm.elementForm.eventFragmentType) }}"
                    uib-tooltip="{{ vm.validationHints(vm.elementForm.eventFragmentType) }}"
                    tooltip-placement="bottom"
                    tooltip-popup-delay="500"
                    tooltip-append-to-body="true"
                  >
                    <label for="eventFragmentType" translate>Event fragment</label>
                    <input
                      class="form-control"
                      id="eventFragmentType"
                      name="eventFragmentType"
                      ng-model="vm.element.eventMapping.fragmentType"
                    />
                  </div>
                  <div
                    class="form-group col-lg-6"
                    ng-class="{ 'has-error': vm.invalid('eventInnerType') }"
                    aria-label="{{ vm.validationHints(vm.elementForm.eventInnerType) }}"
                    uib-tooltip="{{ vm.validationHints(vm.elementForm.eventInnerType) }}"
                    tooltip-placement="bottom"
                    tooltip-popup-delay="500"
                    tooltip-append-to-body="true"
                    ng-if="vm.features.functionalities.sendEvent.innerType"
                  >
                    <label for="eventInnerType">
                      <span translate>Event property</span>
                      <i
                        class="text-primary"
                        c8y-icon="question-circle-o"
                        aria-label="{{ 'Property nested inside the fragment.' | translate }}"
                        uib-tooltip="{{ 'Property nested inside the fragment.' | translate }}"
                        tooltip-placement="bottom"
                        tooltip-popup-delay="500"
                        tooltip-append-to-body="true"
                      ></i>
                    </label>
                    <input
                      class="form-control"
                      id="eventInnerType"
                      name="eventInnerType"
                      ng-model="vm.element.eventMapping.innerType"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="list-group-item" ng-if="vm.features.functionalities.sendManagedObjectUpdate">
            <div class="d-flex">
              <div class="list-item-switch">
                <label class="c8y-switch c8y-switch--inline">
                  <input type="checkbox" ng-model="vm.element.meta.sendManagedObjectUpdate" />
                  <span></span>
                  <span class="sr-only" translate>Update managed object</span>
                </label>
              </div>
              <div class="list-item-icon">
                <i c8y-icon="wrench"></i>
              </div>
              <div class="list-item-title">
                <span translate>Update managed object</span>
                <i
                  class="text-primary"
                  c8y-icon="question-circle-o"
                  aria-label="{{
                    'Update a fragment in managed object whenever the value is changed.' | translate
                  }}"
                  uib-tooltip="{{
                    'Update a fragment in managed object whenever the value is changed.' | translate
                  }}"
                  tooltip-placement="bottom"
                  tooltip-popup-delay="500"
                  tooltip-append-to-body="true"
                ></i>
              </div>
            </div>
            <div class="collapse" uib-collapse="!vm.element.meta.sendManagedObjectUpdate">
              <div ng-if="vm.element.meta.sendManagedObjectUpdate">
                <div class="tight-grid">
                  <div
                    class="form-group col-lg-6"
                    ng-class="{ 'has-error': vm.invalid('managedObjectFragmentType') }"
                    aria-label="{{ vm.validationHints(vm.elementForm.managedObjectFragmentType) }}"
                    uib-tooltip="{{ vm.validationHints(vm.elementForm.managedObjectFragmentType) }}"
                    tooltip-placement="bottom"
                    tooltip-popup-delay="500"
                    tooltip-append-to-body="true"
                  >
                    <label for="managedObjectFragmentType" translate>Managed object fragment</label>
                    <input
                      class="form-control"
                      id="managedObjectFragmentType"
                      name="managedObjectFragmentType"
                      ng-model="vm.element.managedObjectMapping.fragmentType"
                      placeholder="{{ 'e.g.' | translate }} c8y_Position"
                      ng-required="vm.element.meta.sendManagedObjectUpdate"
                    />
                  </div>
                  <div
                    class="form-group col-lg-6"
                    ng-class="{ 'has-error': vm.invalid('managedObjectInnerType') }"
                    aria-label="{{ vm.validationHints(vm.elementForm.managedObjectInnerType) }}"
                    uib-tooltip="{{ vm.validationHints(vm.elementForm.managedObjectInnerType) }}"
                    tooltip-placement="bottom"
                    tooltip-popup-delay="500"
                    tooltip-append-to-body="true"
                  >
                    <label for="managedObjectInnerType">
                      <span translate>Managed object property</span>
                      <i
                        class="text-primary"
                        c8y-icon="question-circle-o"
                        aria-label="{{ 'Property nested inside the fragment.' | translate }}"
                        uib-tooltip="{{ 'Property nested inside the fragment.' | translate }}"
                        tooltip-placement="bottom"
                        tooltip-popup-delay="500"
                        tooltip-append-to-body="true"
                      ></i>
                    </label>
                    <input
                      class="form-control"
                      id="managedObjectInnerType"
                      name="managedObjectInnerType"
                      ng-model="vm.element.managedObjectMapping.innerType"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
</div>
<div class="modal-footer">
  <button
    class="btn btn-default"
    type="button"
    title="{{ 'Cancel' | translate }}"
    ng-click="vm.dismiss()"
  >
    {{ 'Cancel' | translate }}
  </button>
  <button
    class="btn btn-primary"
    type="button"
    title="{{ 'Save' | translate }}"
    ng-disabled="vm.elementForm.$invalid"
    data-cy="configure-register--save-button"
    ng-click="vm.save()"
  >
    {{ 'Save' | translate }}
  </button>
</div>
