<%- include('./partials/head') %>

	<body>
		<%- include('./partials/navbar') %>

			<!-- Page Content -->
			<div class="container">
				<div class="row mt-5 justify-content-between">
					<div class="col-4">
						<div class="card linden-hill px-5">
							<p style="font-size: 32px; margin: 16px 0px 14px">
								<%=data.date%>
							</p>
						</div>
					</div>
					<div class="col">
						<div class="card card-bg-orange">
							<p class="linden-hill-italic"
								style="font-size: 32px; text-align: center; margin-top: 14px; color: white;">
								“If you start doing beautiful things, you will be happy in every circumstance.”
							</p>
						</div>
					</div>
				</div>
				<br>
				<div class="card border-0 shadow mb-5" style="background-color: #00000010;">
					<form id="messageForm" class="form-inline" action="/daily-page" method="post">
						<textarea name="message" id="message" class="card-body p-5 form-control linden-hill"
							style="font-size: 24px;" rows="7" placeholder="Type here about your day!


						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem sapien, scelerisque non ultricies nec, tempor vitae tortor. Ut porta arcu nec hendrerit convallis. Fusce sollicitudin metus ligula, vel condimentum est bibendum ac. Fusce ligula dui, rutrum ut fringilla congue, facilisis porttitor odio. Cras cursus auctor nibh. Proin condimentum luctus sapien, et semper felis laoreet sed. Aenean blandit, enim at hendrerit pharetra, leo turpis ultricies quam, et pellentesque tellus justo sed leo. Duis ultrices lorem ut magna placerat gravida. Fusce vitae mauris ac eros porta commodo vel vitae nisl.

						Duis fringilla metus lorem. Nam ut urna quis neque pulvinar mollis at ac mauris. Mauris molestie maximus ultrices. Vestibulum eget condimentum mauris. Nam non consequat ex. Nulla imperdiet lacus vitae est pulvinar, ac pellentesque massa maximus. Vestibulum non eros risus. Aliquam vestibulum bibendum ante in luctus. Etiam volutpat ipsum sed mauris rhoncus lacinia. Pellentesque efficitur nisi neque, nec iaculis sapien iaculis vitae. Mauris volutpat est rhoncus commodo bibendum.
						
						Integer in ipsum ligula. Phasellus fringilla elit sed enim dignissim auctor. Sed vitae magna enim. Nunc ultricies gravida iaculis. Integer aliquam viverra ex, id rutrum ex laoreet nec. Morbi et suscipit massa. Donec non tortor bibendum, convallis neque ut, ultrices felis. Aliquam eget tristique metus. Mauris cursus justo eu metus efficitur lacinia.
						
						Sed vitae felis in magna molestie pharetra. Sed eget lorem ante. Etiam nibh metus, egestas et tortor quis, bibendum ornare lectus. Suspendisse fermentum dui at tincidunt sodales. Pellentesque vitae orci fermentum, convallis elit vitae, ultrices magna. Aenean non urna ipsum. Curabitur aliquam metus magna, a scelerisque tellus dignissim nec.
						
						Nullam scelerisque molestie elementum. Suspendisse auctor rhoncus purus et bibendum. Duis libero tortor, suscipit non nunc rhoncus, egestas pellentesque justo. Phasellus imperdiet vestibulum ligula. Vivamus in libero nec tellus volutpat pellentesque. Aliquam vel ex nec est interdum dapibus at at velit. Cras non rutrum neque, a fermentum leo. Etiam sit amet bibendum quam.Quisque elementum nunc et augue placerat tristique.Curabitur at pulvinar arcu, sit amet vehicula diam. Pellentesque efficitur feugiat tellus.
						Id porttitor ligula euismod vitae."><%= message %></textarea>
						<br>
						<div class="row">
							<div class="col-5"></div>
							<button class="btn btn-orange col-2" type="submit">Save</button>
							<div class="col-5"></div>
						</div>
						<br>
					</form>
				</div><br><br>
			</div>
	</body>

	<%- include('./partials/footer') %>

		<script>
			// 

			// Throttle function to limit how often we can call a function
			function throttle(func, limit) {
			let lastFunc;
			let lastRan;
			return function() {
				const context = this;
				const args = arguments;
				if (!lastRan) {
				func.apply(context, args);
				lastRan = Date.now();
				} else {
				clearTimeout(lastFunc);
				lastFunc = setTimeout(function() {
					if ((Date.now() - lastRan) >= limit) {
					func.apply(context, args);
					lastRan = Date.now();
					}
				}, limit - (Date.now() - lastRan));
				}
			}
			}

			// Get the textarea and form elements by their IDs
			const textarea = document.getElementById('message');
			const form = document.getElementById('messageForm');

			// Throttled form submission function
			const throttledFormSubmit = throttle(function() {
			form.submit();
			}, 20000); // Only allow form submission once every 20000 milliseconds (20 seconds)

			// Add the throttled function to the textarea input event
			textarea.addEventListener('input', throttledFormSubmit);
		</script>