#load "../lib/app.uce"

COMPONENT(Request& context)
{
	context.call["app"]["page_title"] = "Ajaxy";
	<>
		<h1>Ajax Demo</h1>
		<div id="page2-section1">
			<p>This is the content of Page 2. You can add more information here.</p>
			<p>Sed at dolor leo. Morbi a tellus sed nisl dictum ultricies sit amet at purus. Nam mattis metus sed nunc egestas convallis.</p>
			<br/>
			<button id="page2-load-button" data-load-url="<?= app_link("page2-section1", context) ?>" type="button">Load new text</button>
		</div>
		<script>
		(function () {
			const button = document.getElementById('page2-load-button');
			if (!button) return;
			button.addEventListener('click', function () {
				$('#page2-section1').load(button.dataset.loadUrl);
			});
		}());
		</script>
	</>
}