<!-- input shown when needed data retrival completed -->
<div class="form-group p-relative" ng-if="vm.visible && !vm.loading">
  <label>
    {{ 'Unit conversion' | translate }}
    <button
      class="btn-help btn-help--sm"
      type="button"
      aria-label="{{ 'Help' | translate }}"
      uib-popover="{{ vm.tooltip | translate }}"
      popover-trigger="'focus'"
      popover-placement="right"
      ng-click="$event.preventDefault()"
    ></button>
  </label>
  <ui-select ng-model="vm.user.measurementUnit">
    <ui-select-match placeholder="{{ 'Select unit conversion' | translate }}">
      {{ $select.selected.label | translate }}
    </ui-select-match>
    <ui-select-choices repeat="unit in vm.UNIT_TYPES | filter: $select.search | orderBy:'name'">
      <div ng-bind="unit.label | translate"></div>
    </ui-select-choices>
  </ui-select>
</div>
<!-- spinner is show when data is in process of retrieval -->
<div class="text-center" ng-if="vm.visible && vm.loading">
  <i c8y-icon="circle-o-notch" class="icon-spin"></i>
  <span translate>Wait while settings are loaded…</span>
</div>
