<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FediBooks</title>
	{% include 'imports.html' %}
	<style>
		.bot-icon {
			background: center / contain url("{{icon}}") no-repeat;
		}
	</style>
	<script>
		window.onload = function() {
			document.getElementById("chatbox-input-box").focus();
			document.getElementById("chatbox-input").onsubmit = sendMessage;
		}
	</script>
</head>

<body>
	<div class="container centred">
		<h1 class="thin centred">Chat</h1>
		<p class="centred">Talking to {{ bot }}</p>
		<p class="centred" style="margin: 20px 0;">
			<a class="button btn-primary" href="/" role="button"><i class="fas fa-home"></i> Home</a>
		</p>
	</div>

	<noscript>
		<div class="container centred">
			<h2>This feature requires JavaScript.</h2>
		</div>
	</noscript>

	<div class="container">
		<div id="chatbox">

		</div>

		<form id="chatbox-input">
			<input id="chatbox-input-box" autocomplete="off" required name="message" placeholder="Press enter to send">
		</form>
	</div>

	{% include 'footer.html' %}
</body>
</html>