{{define "main"}}
	<div hx-ext="sse" sse-connect="/sub/sse" sse-swap="test">
	    Contents of this box will be updated in real time
	    with every SSE message received from the chatroom.
	</div>
	<!-- user has no username -> login form -->
	{{ if not . }}
	{{template "login"}}
	<!-- user has name but no room id => suggest to create room -->
	{{ else if eq .State.RoomID "" }}
	<div id="hello-user">
		<p>Hello {{.State.Username}}</p>
	</div>
	<div id="create-room" class="create-room-div">
	    <button button id="create-form-btn" type="submit" class="justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" hx-get="/room/createform" hx-swap="outerHTML">SHOW ROOM CREATE FORM</button>
	</div>
	<div>
	{{template "roomlist" .List}}
	</div>
	{{else}}
	<!-- instead of having room div; better to replace ancestor completely with room -->
	<div id="room">
	{{template "room" .}}
	</div>
	{{end}}
{{end}}