<div class="dashboard-notes">
    <div class="dashboard-notes-search-area">
        <div ng-if="showKeywordFilter && keywordFilterLoaded" class="dashboard-notes-keywordbar">
            <tags-input ng-model="keywordFilter" display-property="name" key-property="id" replace-spaces-with-dashes="false"
                        on-tag-removing="keywordbarOnRemoving($tag)" add-from-autocomplete-only="true" style="width: 550px;">
                <auto-complete source="keywordsLoadItems($query)" highlight-matched-text="false"></auto-complete>
            </tags-input>

            <subscription-eye type="'keywords'" target="keywordFilter" target-description="keywordFilter | keywordsPrint"></subscription-eye>
            
            <div ng-show="showKeywordFilterRemoveError" class="dashboard-notes-error" translate>This keyword is fixed.</div>
        </div>

        <div ng-show="showSearch" class="dashboard-notes-searchbar"><label>
           <i class="fa fa-search"></i> <input type="text" class="search-input" placeholder="{{ 'Filter notes' | translate }}" ng-model="searchKey" ng-change="doSearch()">
        </label></div>

        <div ng-show="showStatusFilter" class="dashboard-notes-statusbar">
            <span translate>Status</span>:
            <label><input type="checkbox" ng-model="statusFilterObj.Draft"> <span translate>Draft</span></label>
            <label><input type="checkbox" ng-model="statusFilterObj.Final"> <span translate>Final</span></label>
            <label><input type="checkbox" ng-model="statusFilterObj.Closed"> <span translate>Closed</span></label>
            <label><input type="checkbox" ng-model="statusFilterObj.Reviewed"> <span translate>Reviewed</span></label>
        </div>
    </div>

    <div class="loadingIndicator" ng-show="notesAreLoading" translate>
        Loading notes...
    </div>

    <ul class="dashboard-notes-list">
        <li class="dashboard-notes-element new-note-button" ng-show="showNew === 'top' && !newNote.editorActive">
          <button ng-click="createNewNote()" translate>Add new note</button>
        </li>

      <li ng-if="showNew === 'top' && newNote.editorActive" class="dashboard-notes-element">
        <text-angular ng-model="newNote.noteTextNew" ta-toolbar="[['bold', 'italics', 'underline', 'strikeThrough'],['ul','ol','outdent','indent','quote','pre'],['insertLink', 'clear']]" class="note-editor note-editor-new"></text-angular>

        <div class="dashboard-notes-attachments with-spacing">
          <translate>Attachments</translate>:
          <ul>
            <li ng-repeat="attachment in newNote.attachmentsNew | filter:orderBy: 'name'">
              <div ng-if="attachment.link" ng-class="{'is-deleted': attachment.toBeRemoved}"><a href="{{attachment.link}}" target="_blank">{{attachment.name}}</a></div>
              <div ng-if="!attachment.link" ng-class="{'is-deleted': attachment.toBeRemoved}">{{attachment.name}}</div>
              <span class="dashboard-notes-attachment-buttons">
                            [
                            <a ng-if="!attachment.toBeRemoved" ng-click="removeAttachmentToggle(attachment)" class="click-link" translate>Remove</a>
                            <a ng-if="attachment.toBeRemoved" ng-click="removeAttachmentToggle(attachment)" class="click-link" translate>Restore</a>
                            ]
                        </span>
            </li>
            <li>
              <input type="file" onchange="angular.element(this).scope().filesChanged(true, this)" multiple />
            </li>
          </ul>
        </div>

        <div ng-if="enableKeywords" class="with-spacing"><translate>Keywords</translate>:
          <tags-input ng-model="newNote.keywordsNew" display-property="name" key-property="id" replace-spaces-with-dashes="false" on-tag-removing="keywordsOnRemoving($tag)"
                      on-tag-adding="keywordsOnAdding($tag)" add-on-paste="true" add-from-autocomplete-only="false">
            <auto-complete source="keywordsLoadItems($query)" highlight-matched-text="false"></auto-complete>
          </tags-input>
          <div ng-show="showKeywordRemoveError" class="dashboard-notes-error" translate>You cannot remove the keyword that binds this note to this dashboard.</div>
        </div>

        <div class="dashboard-notes-status" class="with-spacing">
          <label><translate>Status</translate>:
            <select ng-model="newNote.noteStatusNew">
              <option value="Draft" translate>Draft</option>
              <option value="Final" translate>Final</option>
              <option value="Closed" translate>Closed</option>
              <option value="Reviewed" translate>Reviewed</option>
            </select></label>
        </div>

        <div class="dashboard-notes-impact-flags" ng-if="showImpacts" class="with-spacing">
          <impact-manager impacts="notesImpacts.NEW" source-endpoint="'notes'" risk-category="impactsRiskCategory" risk-category-description="impactsRiskCategoryDescription"></impact-manager>
        </div>

        <div class="with-spacing">
            <button ng-click="newEditorSave()" translate>Save</button>
            <button ng-click="newEditorCancel()" translate>Cancel</button>
        </div>
      </li>


        <li ng-repeat="note in notes | filter:searchKey | orderBy: '-lastModifiedDate' | limitTo: currLimitTo track by note.id" ng-class="['dashboard-notes-element', 'dashboard-notes-' + note.noteStatus]">
            <a id="{{zoomKey}}/{{note.id}}"></a>

            <div ng-if="editorActiveNote !== note">
                <div class="dashboard-notes-text">
                    <div ng-if="showImpacts" class="dashboard-notes-impacts">
                        <impact-direct-viewer impacts="notesImpacts['note-' + note.id.toString()]"></impact-direct-viewer>
                    </div>
                    <div ng-bind-html="note.noteText | highlightSearchResults:searchKey"></div>
                </div>

                <div ng-if="note.attachments.length > 0" class="ng-attachments with-spacing">
                    <translate>Attachments</translate>:
                    <ul>
                        <li ng-repeat="attachment in note.attachments | orderBy: 'name'">
                            <a ng-href="{{attachment.link}}" target="_blank">{{attachment.name}}</a>
                        </li>
                    </ul>
                </div>

                <div class="dashboard-notes-signature">
                    <translate>Keywords</translate>:
                    <keywords-list keywords="note.keywords" enable-eye="true"></keywords-list>.
                </div>

                <div class="dashboard-notes-interactions">
                  <interaction-buttons target-type="'note'"
                                       target-id="note.id"
                                       target-description="makeMakeNoteIntro(note)"
                                       source-url="'#' + sourceLink + '%2F' + note.id"
                                       interaction-summary="note.interactionSummary">
                </div>

                <div class="dashboard-notes-footer">
                    {{note.lastModifiedDate | date: 'yyyy-MM-dd HH:mm'}} |
                    {{note.lastAuthor}} |
                    {{note.noteStatus | translate}} |
                    <a ng-if="note.sourceLink && note.sourceLink != sourceLink" ng-href="#{{note.sourceLink}}%2F{{note.id}}" translate>Jump to source</a>
                    <span ng-if="note.sourceLink && note.sourceLink != sourceLink"> | </span>
                    <a ng-click="makeEditorActive(note)" class="click-link" ng-show="!note.isSaving" translate>Edit</a><span ng-show="note.isSaving" translate>Saving...</span>
                </div>
            </div>

            <div ng-if="editorActiveNote === note">
                <text-angular ng-model="note.noteTextNew" ta-toolbar="[['bold', 'italics', 'underline', 'strikeThrough'],['ul','ol','outdent','indent','quote','pre'],['insertLink', 'clear']]" class="note-editor note-editor-old"></text-angular>

                <div class="dashboard-notes-attachments with-spacing">
                    <translate>Attachments</translate>:
                    <ul>
                        <li ng-repeat="attachment in note.attachmentsNew | filter:orderBy: 'name'">
                            <div ng-if="attachment.link" ng-class="{'is-deleted': attachment.toBeRemoved}"><a href="{{attachment.link}}" target="_blank">{{attachment.name}}</a></div>
                            <div ng-if="!attachment.link" ng-class="{'is-deleted': attachment.toBeRemoved}">{{attachment.name}}</div>
                            <span class="dashboard-notes-attachment-buttons">
                                [
                                <a ng-if="!attachment.toBeRemoved" ng-click="removeAttachmentToggle(attachment)" class="click-link" translate>Remove</a>
                                <a ng-if="attachment.toBeRemoved" ng-click="removeAttachmentToggle(attachment)" class="click-link" translate>Restore</a>
                                ]
                            </span>
                        </li>
                        <li>
                            <input type="file" onchange="angular.element(this).scope().filesChanged(false, this)" multiple />
                        </li>
                    </ul>
                </div>

                <div ng-if="enableKeywords" class="with-spacing"><translate>Keywords</translate>:
                    <tags-input ng-model="note.keywordsNew" display-property="name" key-property="id" replace-spaces-with-dashes="false" on-tag-removing="keywordsOnRemoving($tag)"
                                on-tag-adding="keywordsOnAdding($tag)" add-on-paste="true" add-from-autocomplete-only="false">
                     <auto-complete source="keywordsLoadItems($query)" highlight-matched-text="false"></auto-complete>
                    </tags-input>
                    <div ng-show="showKeywordRemoveError" class="dashboard-notes-error" translate>You cannot remove the keyword that binds this note to this dashboard.</div>
                </div>

                <div class="dashboard-notes-status with-spacing">
                    <label><translate>Status</translate>:
                    <select ng-model="note.noteStatusNew">
                        <option value="Draft" translate>Draft</option>
                        <option value="Final" translate>Final</option>
                        <option value="Closed" translate>Closed</option>
                        <option value="Reviewed" translate>Reviewed</option>
                    </select></label>
                </div>

                <div class="dashboard-notes-impact-flags with-spacing" ng-if="showImpacts">
                    <impact-manager impacts="notesImpacts['note-' + note.id.toString()]" source-endpoint="'notes'" source-id="note.id" source-date="note.createdDate" risk-category="impactsRiskCategory" risk-category-description="impactsRiskCategoryDescription"></impact-manager>
                </div>

                <div class="with-spacing">
                    <button ng-click="editorSave(note)" translate>Save</button>
                    <button ng-click="editorCancel(note)" translate>Cancel</button>
                    <button ng-click="removeNote(note)" translate>Remove this note</button>
                </div>
            </div>
        </li>

        <li ng-if="showNew === 'bottom' && newNote.editorActive" class="dashboard-notes-element">
            <text-angular ng-model="newNote.noteTextNew" ta-toolbar="[['bold', 'italics', 'underline', 'strikeThrough'],['ul','ol','outdent','indent','quote','pre'],['insertLink', 'clear']]" class="note-editor note-editor-new"></text-angular>

            <div class="dashboard-notes-attachments with-spacing">
                <translate>Attachments</translate>:
                <ul>
                    <li ng-repeat="attachment in newNote.attachmentsNew | filter:orderBy: 'name'">
                        <div ng-if="attachment.link" ng-class="{'is-deleted': attachment.toBeRemoved}"><a href="{{attachment.link}}" target="_blank">{{attachment.name}}</a></div>
                        <div ng-if="!attachment.link" ng-class="{'is-deleted': attachment.toBeRemoved}">{{attachment.name}}</div>
                        <span class="dashboard-notes-attachment-buttons">
                            [
                            <a ng-if="!attachment.toBeRemoved" ng-click="removeAttachmentToggle(attachment)" class="click-link" translate>Remove</a>
                            <a ng-if="attachment.toBeRemoved" ng-click="removeAttachmentToggle(attachment)" class="click-link" translate>Restore</a>
                            ]
                        </span>
                    </li>
                    <li>
                        <input type="file" onchange="angular.element(this).scope().filesChanged(true, this)" multiple />
                    </li>
                </ul>
            </div>

            <div ng-if="enableKeywords" class="with-spacing"><translate>Keywords</translate>:
                <tags-input ng-model="newNote.keywordsNew" display-property="name" key-property="id" replace-spaces-with-dashes="false" on-tag-removing="keywordsOnRemoving($tag)"
                            on-tag-adding="keywordsOnAdding($tag)" add-on-paste="true" add-from-autocomplete-only="false">
                    <auto-complete source="keywordsLoadItems($query)" highlight-matched-text="false"></auto-complete>
                </tags-input>
                <div ng-show="showKeywordRemoveError" class="dashboard-notes-error" translate>You cannot remove the keyword that binds this note to this dashboard.</div>
            </div>

            <div class="dashboard-notes-status with-spacing">
                <label><translate>Status</translate>:
                    <select ng-model="newNote.noteStatusNew">
                        <option value="Draft" translate>Draft</option>
                        <option value="Final" translate>Final</option>
                        <option value="Closed" translate>Closed</option>
                        <option value="Reviewed" translate>Reviewed</option>
                    </select></label>
            </div>

            <div class="dashboard-notes-impact-flags with-spacing" ng-if="showImpacts">
                <impact-manager impacts="notesImpacts.NEW" source-endpoint="'notes'" risk-category="impactsRiskCategory" risk-category-description="impactsRiskCategoryDescription"></impact-manager>
            </div>

            <div class="with-spacing">
                <button ng-click="newEditorSave()" translate>Save</button>
                <button ng-click="newEditorCancel()" translate>Cancel</button>
            </div>
        </li>

        <li class="dashboard-notes-element show-more-button" ng-show="showMore && hasMoreNotes()">
            <button ng-click="showMoreNotes()" translate>Load more notes</button>
        </li>

        <li class="dashboard-notes-element new-note-button" ng-show="showNew === 'bottom' && !newNote.editorActive">
            <button ng-click="createNewNote()" translate>Add new note</button>
        </li>
    </ul>
</div>
