<div class="modal-header">
  <h3 id="modal-title">{{ 'Select property' | translate }}</h3>
  <div class="form-group m-t-16">
    <div class="input-group input-group-search">
      <input
        type="search"
        class="form-control"
        placeholder="{{ 'Search property' | translate }}"
        ng-model="vm.search.$"
      />
      <span class="input-group-addon">
        <i c8y-icon="search" ng-show="vm.search.$.length === 0 || !vm.search.$"> </i>
        <i
          c8y-icon="times"
          class="text-muted"
          ng-show="vm.search.$.length > 0"
          ng-click="vm.search.$ = ''"
        >
        </i>
      </span>
    </div>
  </div>
</div>
<div class="modal-body" id="modal-body">
  <div class="row form-group separator-bottom" style="vertical-align: bottom;">
    <div class="col-sm-2">
      <label translate>Show</label>
    </div>
    <div class="col-sm-4">
      <label translate>Label</label>
    </div>
    <div class="col-sm-6">
      <label translate>Property</label>
    </div>
  </div>
  <div class="form-group">
    <div
      class="row property"
      ng-class="{'bg-info': vm.isParent(property)}"
      ng-repeat="property in vm.properties | orderBy:vm.orderByFn | filter:vm.search"
    >
      <div class="col-sm-2">
        <input
          ng-if="!vm.isParent(property)"
          type="radio"
          name="property"
          ng-model="vm.selected"
          ng-value="property"
        />
      </div>
      <div class="col-sm-4">
        {{ property.label }}
      </div>
      <div class="col-sm-6">
        {{ property.keyPath.join('.') }}
      </div>
    </div>
    <p ng-if="!vm.properties.length" class="alert alert-warning m-t-40" translate>
      The selected device does not have coil status and register properties.
    </p>
  </div>
</div>
<div class="modal-footer">
  <button
    title="{{ 'Cancel' | translate }}"
    class="btn btn-default"
    type="button"
    ng-click="vm.dismiss()"
  >
    {{ 'Cancel' | translate }}
  </button>
  <button
    title="{{ 'Select' | translate }}"
    class="btn btn-primary"
    type="button"
    ng-disabled="!vm.selected"
    ng-click="vm.close({ $value: vm.selected })"
  >
    {{ 'Select' | translate }}
  </button>
</div>
