<div ng-controller="assetPropertyWidgetCtrl" class="d-flex d-col fit-h">
  <form name="schemaForm" novalidate class="p-l-16 p-r-16 flex-grow">
    <c8y-schema-form
      schema="schema"
      form="form"
      model="managedObject"
      class="widget"
      ng-class="{ 'form-read-only': !editable }"
    ></c8y-schema-form>
  </form>
  <c8y-if-allowed admin-mos="[managedObject]" class="d-contents">
    <div class="p-t-8 p-16" ng-show="editable && canAddProperties()">
      <button
        title="{{ 'Add fragment' | translate }}"
        type="button"
        class="btn btn-default m-b-0"
        ng-click="addProperties()"
        data-cy="assetPropertyWidget--addProperties"
      >
        <i c8y-icon="plus-circle"></i>
        {{ 'Add fragment' | translate }}
      </button>
    </div>

    <div c8y-widget-footer class="p-16 sticky-bottom bg-level-0 separator-top">
      <button
        title="{{ 'Edit' | translate }}"
        type="button"
        class="btn btn-link p-l-0 min-width-unset"
        ng-click="startEdit()"
        data-cy="main--edit"
        ng-show="!editable"
      >
        <i c8y-icon="pencil"></i>
        {{ 'Edit' | translate }}
      </button>
      <button
        title="{{ 'Cancel' | translate }}"
        type="button"
        class="btn btn-default btn-sm"
        ng-click="cancelEdit()"
        ng-show="editable"
      >
        {{ 'Cancel' | translate }}
      </button>
      <button
        title="{{ 'Save' | translate }}"
        type="button"
        class="btn btn-primary btn-sm"
        ng-click="save()"
        ng-show="editable"
      >
        {{ 'Save' | translate }}
      </button>
    </div>
  </c8y-if-allowed>
</div>
