<div class="viewport-modal">
  <div class="modal-header separator">
    <h3 id="modal-title" class="p-b-8">{{ vm.title | translate }}</h3>
  </div>

  <div class="modal-inner-scroll" id="modal-body">
    <p class="p-l-24 p-r-24 p-b-8 p-t-8">
      <i c8y-icon="info-circle" class="text-info text-16"></i>
      {{ vm.subTitle | translate }}
    </p>
    <c8y-config-audit
      context="vm.managedObject"
      on-reference-device="vm.referenceDevice = device"
      on-selected="vm.selected = selected"
      class="d-contents"
    >
    </c8y-config-audit>
  </div>
  <div class="modal-footer">
    <button
      title="{{ 'Cancel' | translate }}"
      class="btn btn-default"
      ng-click="vm.dismiss()"
      translate
    >
      Cancel
    </button>
    <button
      title="{{ 'Sync selected properties' | translate }}"
      class="btn btn-primary"
      ng-click="vm.synchronize()"
      ng-disabled="!vm.selected.length || vm.syncing"
      translate
    >
      Sync selected properties
    </button>
  </div>
</div>
