<div ng-class="['usin-notes', {'usin-notes-empty': !user.notes || !user.notes.length}]">
	<h3 class="usin-profile-title">{{strings.notes}}</h3>
	
	<div class="usin-notes-form" ng-show="canUpdateUsers">
		<textarea ng-model="noteContent" class="usin-note-field" rows="3"></textarea>
		<span class="usin-btn usin-btn-main usin-btn-note" ng-click="addNote()">{{strings.addNote}}</span>
		<div class="usin-icon-simple-loading usin-note-loading alignright" ng-show="noteLoading"></div>
	</div>
	
	<div class="clear"></div>
	<div class="usin-error" ng-show="noteErrorMsg">{{noteErrorMsg}}</div>
	
	<div ng-if="user.notes" class="usin-notes-list">
		<div ng-repeat="(index, note) in user.notes" ng-class="['usin-note', 'usin-note-'+note.state]">
			<div class="usin-note-content">{{note.content}}</div>
			<div class="usin-note-info">{{strings.by}} {{note.by}} | {{note.date}}
			<span class="alignright usin-note-delete" ng-if="canUpdateUsers" usin-confirmed-click="deleteNote(note.id, index)" usin-confirm-click="{{strings.areYouSure}}">{{strings.delete}}</span>
			<span class="usin-custom-directive" ng-repeat="ct in customTemplates['note_actions']" ct="ct" ></span>
			</div>
			
		</div>
	</div>
	
	<div class="usin-custom-directive" ng-repeat="ct in customTemplates['after_notes']" ct="ct" ></div>
</div>