<%- include("../base/header", { title: "Join Party", userId: session.userId }) %>
<div class="d-flex justify-content-center">
	<div class="card my-auto" style="width: 25rem;">
		<div class="card-body">
			<h4 class="card-title text-center">Join Party</h5>
			<% if (typeof(message) === "string") { %>
				<div class="alert alert-danger text-center" role="alert"><%= message %></div>
			<% } %>
			
			<form method="post">
				<div class="form-group mt-3">
					<label class="form-label">Join Code / Party ID <span style="font-size: 10pt;">e.g. "<b>3EGGS</b>"</span></label>
					<input class="form-control" type="text" name="partyRef" minlength="5" maxlength="5" value="<%= typeof(partyRef) === "undefined" ? "" : partyRef %>" required />
				</div>
			
				<div class="text-center mt-3">
					<input class="btn btn-primary" type="submit" value="Join" />
					<a class="btn btn-danger ms-2" href="/">Cancel</a>
				</div>
			</form>
		</div>
	</div>
</div>
<%- include("../base/footer", { apiKey: session.apiKey, username: session.username }) %>