
<div class="p-l-24 p-r-24 bg-level-0 sticky-top p-t-8 p-b-8 separator-bottom" style="z-index: 20;">
  <div class="d-flex tight-grid">
    <div class="col-xs-6">
      <div class="d-flex">
        <label class="a-s-center m-r-4 m-b-0" translate>
          Reference device
        </label>
        <ui-select class="a-s-center flex-grow" append-to-body="true" style="max-height: 34px;" class="form-control"
          ng-model="vm.referenceDevice" on-select="vm.onReferenceDevice({ device: $model })">
          <ui-select-match placeholder="{{ 'Select reference device' | translate }}">{{
            $select.selected.name
            }}</ui-select-match>
          <ui-select-choices repeat="device in vm.referenceDevices | filter: $select.search"  position="down">
            <div ng-bind="device.name"></div>
          </ui-select-choices>
        </ui-select>
      </div>
    </div>

    <div class="flex-grow a-s-center m-l-4">
      <div class="d-flex">
        <label title="{{ 'Show equal properties' | translate }}" ng-show="vm.haveMatches"
          class="c8y-switch m-l-auto">
          <input id="audit-hide-synced" type="checkbox" ng-model="vm.showSyncedProperties" />
          <span></span>
          <span>{{ 'Show equal properties' | translate }}</span>
        </label>

        <div class="m-l-auto form-inline" ng-show="vm.haveMatches">
          <label title="{{ 'Select all' | translate }}" class="m-r-4 m-b-0" for="audit-select-all">{{ 'Select all' |
            translate }}</label>
          <label class="c8y-checkbox m-r-4">
            <input type="checkbox" id="audit-select-all" ng-model="vm.selectAll" ng-disabled="vm.selectAllDisabled" />
            <span></span>
          </label>
        </div>
      </div>
    </div>

  </div>
</div>
<div class="p-l-24 p-r-24" ng-hide="vm.referenceDevice">
  <div class="c8y-empty-state text-left">
    <h1 c8y-icon="exchange"></h1>
    <p>
      <strong translate>No reference device selected</strong><br />
      <span translate>Use the selector above to set the reference device</span>
    </p>
  </div>
</div>

<c8y-config-audit-diff schemas="vm.schemas" reference="vm.referenceDevice" context="vm.context"
  hide-synced="!vm.showSyncedProperties" select-all="vm.selectAll"
  on-select="vm.selectAll = allSelected; vm.onSelected({ selected: selected })"
  on-schema-match="vm.haveMatches = !!matches.length" disable-select-all="vm.selectAllDisabled = disabled">
</c8y-config-audit-diff>