{{if $app}}
<div id="personal-notes" class="generic-content-wrapper{{if $hidden}} d-none{{/if}}">
	<div class="section-title-wrapper clearfix">
		<div class="float-end rounded border border-secondary m-1 ps-1 pe-1  text-muted small note-mode" title="Double click into note for edit mode">Read mode</div>
		<h2>{{$banner}}</h2>
	</div>
	<div class="section-content-wrapper-np">
{{else}}
<div id="personal-notes" class="widget{{if $hidden}} d-none{{/if}}">
	<div class="float-end rounded border border-secondary mb-1 ps-1 pe-1 text-muted small note-mode" title="Double click note for edit mode">Read mode</div>
	<h3 class="float-start">{{$banner}}</h3>
{{/if}}
	<textarea name="note_text" id="note-text" class="form-control{{if $app}} border-0{{else}} p-1{{/if}}" style="display: none;">{{$text}}</textarea>
	<div id="note-text-html" class="{{if !$app}}border rounded p-1{{/if}}">{{$html}}</div>
	<script>
		var noteSaveTimer = null;
		var noteText = $('#note-text');
		var noteTextHTML = $('#note-text-html');
		var noteMode = $('.note-mode');
		var noteEditing = false;

		noteText.bbco_autocomplete('bbcode');

		$(document).on('focusout',"#note-text",function(e){
			if(noteSaveTimer)
				clearTimeout(noteSaveTimer);

			noteEditing = false;
			notePostFinal();
			noteSaveTimer = null;
			setNoteMode(noteMode, 'saving');
		});

		$(document).on('dblclick',"#note-text-html",function(e){
			noteEditing = 1;
			noteText.show().focusin();
			noteText.height(noteTextHTML.outerHeight());
			noteText.scrollTop(noteTextHTML.scrollTop());
			noteTextHTML.hide();
			setNoteMode(noteMode, 'edit');

			$(document).one('click', function(e) {
				if (e.target.id !== 'note-text') {
					noteTextHTML.show();
					noteTextHTML.height(noteText.outerHeight());
					noteTextHTML.scrollTop(noteText.scrollTop());
					noteText.hide();
					setNoteMode(noteMode, 'read');
				}
			});

			$(document).one('click', '#note-text', function(e){
				noteEditing = 2;
				setNoteMode(noteMode, 'editing');
				noteSaveTimer = setTimeout(noteSaveChanges,10000);
			});

		});



		function notePostFinal() {
			$.post(
				'notes/sync',
				{
					'note_text' : noteText.val()
				},
				function (data) {
					noteTextHTML.html(data.html);
					noteTextHTML.show();
					noteTextHTML.height(noteText.outerHeight());
					noteTextHTML.scrollTop(noteText.scrollTop());
					noteText.hide();
					setNoteMode(noteMode, 'saved');
				}
			);
		}

		function noteSaveChanges() {
			$.post('notes', { 'note_text' : noteText.val() });
			noteSaveTimer = setTimeout(noteSaveChanges, 10000);
		}

		function setNoteMode (obj, mode) {
			switch(mode) {
				case 'edit':
					obj.removeClass('border-secondary border-success text-muted text-success')
					obj.addClass('border-danger text-danger')
					obj.html('Edit mode');
				break;
				case 'editing':
					obj.removeClass('border-secondary border-success text-muted text-success')
					obj.addClass('border-danger text-danger')
					obj.html('Editing...');
				break;
				case 'saving':
					obj.removeClass('border-secondary border-danger text-muted text-danger')
					obj.addClass('border-success text-success')
					obj.html('Saving...');
				break;
				case 'saved':
					obj.removeClass('border-secondary border-danger text-muted text-danger')
					obj.addClass('border-success text-success')
					obj.html('Saved');
					setTimeout(function () {
						if(noteEditing) {
							setNoteMode(noteMode, noteEditing === 1 ? 'edit' : 'editing');
						}
						else {
							setNoteMode(noteMode, 'read');
						}
					}, 3000);
				break;
				case 'read':
				default:
					obj.removeClass('border-success border-danger text-success text-danger').addClass('border-secondary text-muted').html('Read mode');
			}
		}

	</script>
{{if $app}}
</div>
{{/if}}
</div>