<div ng-if="!vm.onlyBasicOperations" class="d-contents bg-level-0">
  <div class="flex-grow" ng-form="MainForm">
    <div class="card-block large-padding">
      <div class="list-group">
        <div class="text-medium p-b-16 separator-bottom">{{ vm.title }}</div>
        <c8y-generic-ui-inventory-property
          ng-repeat="property in vm.mutatedProperties"
          property="property"
          operations="property.operationList"
          context="vm.context"
          class="list-group-item p-l-0 p-r-0"
          create-operation="vm.createOperation(operation, name, property)"
        ></c8y-generic-ui-inventory-property>
      </div>
    </div>
  </div>
  <div class="card-footer separator sticky-bottom" ng-show="vm.showSave">
    <button
      title="{{ 'Save' | translate }}"
      type="button"
      class="btn btn-primary"
      ng-disabled="MainForm.$invalid || MainForm.$pristine || vm.saving"
      ng-click="vm.save()"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</div>

<div ng-if="vm.onlyBasicOperations" class="d-flex a-i-center">
  <c8y-generic-ui-operation-list-button
    ng-click="$event.stopPropagation()"
    operations="vm.propertyContainsBasicOperations.operationList"
    modal-title="{{ vm.title }}"
    context="vm.context"
    class="d-block m-r-16"
  ></c8y-generic-ui-operation-list-button>

  <div
    class="dropdown card-actions"
    style="top: 0"
    uib-dropdown
    ng-click="$event.stopPropagation()"
    dropdown-append-to-body="true"
  >
    <button
      type="button"
      title="{{ 'Settings' | translate }}"
      class="dropdown-toggle c8y-dropdown"
      uib-dropdown-toggle
      aria-haspopup="true"
    >
      <i c8y-icon="ellipsis-v"></i>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
      <li ng-repeat="basicOperation in vm.propertyContainsBasicOperations.operations">
        <button
          title="{{ basicOperation.name | translate }}"
          type="button"
          ng-click="vm.execute($index)"
        >
          <i c8y-icon="{{ vm.getIcon($index) }}"></i>
          {{ basicOperation.name | translate }}
        </button>
      </li>
    </ul>
  </div>
</div>
