wasilak/notes-manager

<div class="row">
  <div class="col-sm-12">
 
    <div class="row overlay" ng-if="$ctrl.loader">
      <div class="col-sm-12">
        <span class="loader"><i style="font-size: 2rem" class="bi bi-arrow-repeat"></i></span>
      </div>
    </div>
 
    <div class="alert alert-danger" role="alert" ng-if="!$ctrl.note.success">
      <p>{{$ctrl.note.error}}</p>
    </div>
 
    <div class="row" ng-if="$ctrl.note.success">
      <div class="col-sm" ng-cloak>
        <form class="form-horizontal" ng-if="$ctrl.note.success">
          <div class="form-group">
            <input type="text" ng-model="$ctrl.note.response.title" class="form-control" placeholder="Enter note title here...">
          </div>
        </form>
      </div>
 
      <div class="col-sm-12 col-md-3" ng-cloak>
        <div class="btn-toolbar pull-right" role="toolbar" aria-label="Toolbar with button groups">
          <div class="btn-group mr-2" role="group">
            <a ng-if="$ctrl.note.response.id" ui-sref-active="active" class="btn btn-secondary" ui-sref="list_note({uuid: $ctrl.note.response.id})" ui-sref-opts="{reload: true}" data-toggle="tooltip" data-placement="bottom" title="Cancel edit">cancel</a>
            <a ng-if="!$ctrl.note.response.id" ui-sref-active="active" class="btn btn-secondary" ui-sref="list()" ui-sref-opts="{reload: true}" data-toggle="tooltip" data-placement="bottom" title="Cancel create">cancel</a>
            <button ng-disabled="$ctrl.saveButtonDisabled()" ng-if="$ctrl.note.response.id" type="button" class="btn btn-primary" ng-click="$ctrl.saveNote()"><i class="bi bi-save"></i></button>
            <button ng-if="$ctrl.isAiEnabled" ng-disabled="$ctrl.aiRewriteButtonDisabled()" type="button" class="btn btn-primary" ng-click="$ctrl.aiReWriteNote()"><i class="bi bi-robot"></i></button>
            <button ng-disabled="$ctrl.saveButtonDisabled()" ng-if="$ctrl.note.response.id" type="button" class="btn btn-primary" ng-click="$ctrl.restoreOriginal()"><i class="bi bi-arrow-counterclockwise"></i></button>
            <button ng-disabled="$ctrl.createButtonDisabled()" ng-if="!$ctrl.note.response.id" type="button" class="btn btn-primary" ng-click="$ctrl.createNote()"><i class="bi bi-save"></i></button>
          </div>
          <div class="btn-group mr-2" role="group">
            <button ng-if="$ctrl.note.response.id" ng-click="$ctrl.deleteNote()" type="button" class="btn btn-danger"><i class="bi bi-x"></i></button>
          </div>
        </div>
      </div>
    </div>
 
    <div class="row" ng-if="$ctrl.note.success">
      <div class="col-sm-12" ng-cloak>
        <tags-input
            ng-model="$ctrl.note.response.tags"
            use-strings="true"
            spellcheck="false"
            >
          <auto-complete
            source="$ctrl.loadItems($query)"
            load-on-down-arrow="true"
            select-first-match="false"
            ng-if="$ctrl.note.success"
            max-results-to-show="500"
            min-length="2"
            ></auto-complete>
        </tags-input>
      </div>
    </div>
 
    <div class="row noteArea" ng-if="$ctrl.note.success">
      <div class="col-sm-6" ng-cloak>
        <code-editor syntax="markdown" ng-model="$ctrl.note.response.content" ng-model-options="{ debounce: 250 }" class="bordered" line-numbers="true" break-points="$ctrl.breakpoints"></code-editor>
      </div>
      <div class="col-sm-6 outputText" ng-cloak>
        <div class="outputText" ng-bind-html="$ctrl.outputText"></div>
      </div>
    </div>
    <div class="row" ng-if="$ctrl.note.success" ng-show="$ctrl.lintResult">
      <div class="col-sm-6" ng-cloak>
        <div class="alert alert-warning" role="alert">
          <span ng-bind-html="$ctrl.lintResult"></span>
        </div>
      </div>
    </div>
    <div class="row" ng-if="$ctrl.note.success" ng-show="$ctrl.errorMessage">
      <div class="col-sm-6" ng-cloak>
        <div class="alert alert-warning" role="alert">
          <span ng-bind-html="$ctrl.errorMessage"></span>
        </div>
      </div>
    </div>
 
  </div>
</div>
<script>
  $(function () {
    $('body').on('DOMNodeInserted', '[data-toggle="tooltip"]', function () {
          $(this).tooltip();
    });
 
    $('[data-toggle="tooltip"]').tooltip();
    
  });
 
</script>