<div id="personalNote" class="details" ng-class="{'pinned': personalNotePinned}">
  <div class="row">
    <!-- inline editing toolbar -->
    <div class="motion-toolbar">
      <div class="pull-right inline-editing-activator">
        <button ng-click="exportPersonalNote()" class="btn btn-default btn-sm"
          uib-tooltip="{{ 'Export personal note only' | translate }}">
          <i class="fa fa-file-pdf-o"></i>
          <translate>PDF</translate>
        </button>
        <button ng-if="!personalNoteInlineEditing.active" ng-click="personalNoteInlineEditing.enable()"
          class="btn btn-sm btn-default">
          <i class="fa fa-pencil-square-o"></i>
          <translate>Inline editing</translate>
        </button>
        <button ng-if="personalNoteInlineEditing.active" ng-click="personalNoteInlineEditing.disable()"
          class="btn btn-sm btn-default">
          <i class="fa fa-times-circle"></i>
          <translate>Inline editing</translate>
        </button>
        <button ng-click="pinPersonalNote()" class="btn btn-sm btn-default">
          <i class="fa fa-thumb-tack" ng-class="{'rotate-45-deg-right': !personalNotePinned}"></i>
        </button>
      </div>
      <h1 class="toolbar-left" translate>Personal note</h1>
    </div>

    <!-- personal note editor field -->
    <div class="col-sm-12">
      <div id="personal-note-inline-editor"
        ng-bind-html="motion.personalNote.note | trusted" contenteditable="{{ personalNoteInlineEditing.isEditable }}"></div>
      <!-- save toolbar -->
      <div class="motion-save-toolbar" ng-class="{ 'visible': (personalNoteInlineEditing.changed && personalNoteInlineEditing.active) }">
        <div class="changed-hint" translate>The personal note has been changed.</div>
        <button type="button" ng-click="personalNoteInlineEditing.save()" class="btn btn-primary" translate>
            Save
        </button>
        <button type="button" ng-click="personalNoteInlineEditing.revert()" class="btn btn-default" translate>
            Revert
        </button>
      </div>
    </div>
  </div>
</div>
<div id="personalNoteSpacer" ng-class="{'activeSpace': personalNotePinned}"></div>
