RENDER(Request& context)
{
	DTree t;

	String task_name = first(context.get["task-name"], "example-task");

	<>
		<link rel="stylesheet" href='style.css'></link>
		<h1>
			<a href="index.uce">UCE Test</a>:
			Tasks
		</h1>

		<script>

		function load(target, url) {
			var r = new XMLHttpRequest();
			r.open("GET", url, true);
			r.onreadystatechange = function () {
				if (r.readyState != 4 || r.status != 200) return;
				target.innerHTML = r.responseText;
			};
			r.send();
		}
		</script>

		<form action="?">
			Task name
			<input type="text" name="task-name" value="<?= task_name ?>"/>
			<input type="submit" name="cmd" value="Get Info"/>
			<input type="submit" name="cmd" value="Execute"/>
		</form>

		<script>

		/*setInterval(() => {

			load(document.getElementById('task-status'), 'task-status.uce?task-name=<?= uri_encode(task_name) ?>');

		}, 200);*/

		</script>

		Task Status

		<pre id="task-status" style="white-space: pre-wrap"><?

			print("Task Name: ", task_name, "\n");
			print("Task ID: ", task_pid(task_name), "\n");
			print("Task Running: ", task_pid(task_name) == 0 ? "no" : "yes", "\n");


		?></pre>

		<?
		if(context.get["cmd"] == "Execute")
		{
			?>
			Task Start

			<pre style="white-space: pre-wrap"><?

				print("New Task ID: ", task("example-task", []() {

					sleep(10);

				}), "\n");

				print("Task run time: 10 seconds");

			?></pre><?
		}
		?>

		Params
		<pre><?= var_dump(context.get) ?></pre>
	</>

}