<div class="card card-info card-outline">
	<div class="card-header">
		<h5 class="m-0">Notepad</h5>
	</div>
	<form method="post">
		<div class="card-body">
			<div class="form-group">
				<label>This is your personal notepad. Be sure to save it each time you modify something.</label>
				<textarea class="form-control" name="content" cols="50" rows="15"
						  onchange="notepad_onchange(this);">{% if content is not null %}{{ content }}{% endif %}</textarea>
			</div>
		</div>
		<div class="card-footer">
			<button name="submit" onclick="notepad_save(this);" value="Save" class="btn btn-info">Save</button>
		</div>
	</form>
</div>

{# <?php echo isset($_content) ? htmlentities($_content, ENT_COMPAT, 'UTF-8') : ''; ?> #}

{# confirm leaving current page if content of the notepad has been modified #}

<script type="text/javascript">
	var original_value = document.getElementsByName("content")[0].value;

	function confirm_exit(e) {
		var e = e || window.event;
		var message = 'Are you sure you want to quit? Remaining changes will be unsaved.';

		// for IE and Firefox prior to version 4
		if (e) {
			e.returnValue = message;
		}

		// for Safari
		return message;
	}

	function notepad_onchange(e) {
		if (original_value != e.value) {
			window.onbeforeunload = confirm_exit;
		}
		return true;
	}

	function notepad_save(e) {
		window.onbeforeunload = function (e) {
		};
		return true;
	}
</script>