<div class="form-group selectize-container">
  <label class="control-label">{{ 'Scope' | translate }}</label>
  <ui-select class="form-control" ng-model="properties.scope">
    <ui-select-match placeholder="{{ 'Select or search' | translate }}">
      {{ $select.selected.name | translate }}
    </ui-select-match>
    <ui-select-choices repeat="st in scopeTypes | filter: $select.search" position="down">
      <div ng-bind="st.name | translate"></div>
    </ui-select-choices>
  </ui-select>
</div>

<div class="form-group">
  <label for="type-input" class="control-label">
    {{ 'Type' | translate }}
    <button
      class="btn-help btn-help--sm"
      type="button"
      aria-label="{{ 'Help' | translate }}"
      uib-popover="{{ typeTooltip | translate }}"
      popover-placement="right"
      popover-trigger="'focus'"
      popover-append-to-body="true"
    ></button>
  </label>
  <input
    id="type-input"
    type="text"
    class="form-control direct-edit"
    maxlength="100"
    ng-model="permissionType"
    typeahead="type for type in getSuggestedTypes(device)"
  />
</div>

<div class="form-group selectize-container">
  <label class="control-label">{{ 'Permission' | translate }}</label>
  <ui-select class="form-control" ng-model="properties.access">
    <ui-select-match
      title="{{ $select.selected.name | translate }}"
      placeholder="{{ 'Select or search' | translate }}"
    >
      {{ $select.selected.name | translate }}
    </ui-select-match>
    <ui-select-choices repeat="pt in accessTypes | filter: $select.search" position="down">
      <div ng-bind="pt.name | translate"></div>
    </ui-select-choices>
  </ui-select>
</div>
