<div id="room-content">
	<div id="room-top">
		#{{room.name}}
	</div>
	<div id="chatbox" x-data="{msgs: $chatroom.messages}">
		{% include "rechat/message.html" %}
	</div>
	<div id="chatform">
		<form method="post"
			onsubmit="event.preventDefault();$chatroom.postMessage(this.message.value);this.message.value=''">
			<input type="text" id="message" name="message" />
			<input type="submit" class="btn btn-primary" value="Send" />
		</form>
	</div>
</div>

<style>
	#room-content {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	#chatbox {
		flex-grow: 1;
		padding: 1rem;
	}

	#room-top {
		width: 100%;
		padding: 1rem 1rem 0 1rem;
		font-weight: bold;
	}

	#chatform {
		padding: 1rem;
		display: flex;
		flex-direction: row;
	}

</style>
