<div class="mi-note-popup-back-fixed"></div>
<div class="mi-note-popup">
    <div class="frame">
        <div class="profile-section">
            <img class="profile-avatar" ng-src="{{avatar}}"/>
            <div class="profile-title" >{{note.user.firstName}} {{note.user.lastName}}</div>
        </div>
        <div class="book-info">
            <img ng-src="{{cover}}"/>
        </div>
        <div class="note-section">
            <form class="note-section" name="form" novalidate ng-show="note.editable">
                <input required type="text" class="note-subject" placeholder="Note Heading" ng-model="note.subject"/>
                <textarea required placeholder="Enter your notes" class="note-content" ng-model="note.noteText" ng-auto-expand></textarea>

                <div class="social-section">
                    <button class="mindinkButton note floatRight" ng-click="delete()" ng-show="showDelete">DELETE</button>
                    <button class="mindinkButton note floatRight" ng-click="save()"
                                ng-disabled="form.$invalid || !form.$dirty || isUnchanged()"
                                ng-bind="buttonText"></button>
                </div>
            </form>
            <div ng-hide="note.editable">
            <div class="note-subject" ng-bind="note.subject"></div>
            <div class="note-content" ng-bind="note.noteText" ></div>
            </div>
            <div class="reference-section">
                <div class="reference-title">SELECTED TEXT</div>
                <div class="reference-content">
                {{note.selectedText}}
                </div>
            </div>
        </div>

    </div>

    <div class="ereaderControls fixed">
        <div class="close-button cancel-text" ng-click="closeNote()"></div>
    </div>
</div>