<div class="form-group form-group-sm m-b-0">
  <label>
    {{ vm.property.title }}
    <button
      class="btn-help btn-help--sm"
      type="button"
      aria-label="{{ 'Help' | translate }}"
      uib-popover="{{ vm.property.description }}"
      popover-trigger="'focus'"
      popover-placement="right"
      popover-append-to-body="true"
      ng-if="vm.property.description"
    ></button>
  </label>

  <div class="d-flex flex-wrap">
    <c8y-schema-form
      ng-if="vm.needsForm()"
      schema="vm.schema"
      form="vm.form"
      model="vm.model"
      options="vm.options"
      class="generic-ui m-r-4 m-b-8"
    ></c8y-schema-form>
    <span ng-repeat="operation in vm.property.operations" class="m-r-4 m-b-8">
      <button
        class="btn btn-default btn-sm"
        type="button"
        title="{{ operation.name | translate }}"
        ng-class="{ 'btn-pending': vm.isInProgress(operation) }"
        ng-if="!vm.needsUserInput(operation)"
        ng-disabled="vm.isInProgress(operation)"
        ng-click="vm.execute(operation)"
      >
        {{ operation.name | translate }}
      </button>
      <button
        class="btn btn-default btn-sm"
        type="button"
        aria-label=" {{ operation.name | translate }}"
        uib-popover-template="vm.operationPopoverTemplate"
        popover-placement="right"
        popover-is-open="vm.popoverOpen"
        popover-append-to-body="true"
        popover-trigger="'outsideClick'"
        ng-disabled="vm.isInProgress(operation)"
        ng-class="{ 'btn-pending': vm.isInProgress(operation) }"
        ng-if="vm.needsUserInput(operation)"
      >
        {{ operation.name | translate }}
      </button>
    </span>
    <c8y-generic-ui-operation-list-button
      operations="vm.operations"
      modal-title="{{ vm.property.title }}"
      class="m-l-auto m-b-8"
      context="vm.context"
    ></c8y-generic-ui-operation-list-button>
  </div>
</div>
