<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta property="og:url" content="https://xpecto.tech/" />
		<meta property="og:type" content="website" />
		<meta property="og:title" content="Xpecto" />
		<meta
			name="description"
			content="Xpecto is science and technology festival of Indian
        Institute of Technology, Mandi. It has been ramped up to
        include the most electrifying events, prompting great
        discoveries, as well as enthralling brainstorming and
        grand prizes."
		/>
		<meta
			name="keywords"
			content="Team, Expect, Innovate, Achieve, IIT Mandi, TechFest 2022, Xpecto, Technical festival, Techfest IIT Mandi,
        Xpecto 2022, First Technical Festival, Techfest IIT Mandi"
		/>
		<link
			rel="icon"
			type="image/x-icon"
			href="images/xpecto-logo-header.png"
		/>
		<script
			src="https://kit.fontawesome.com/a1542a4884.js"
			crossorigin="anonymous"
		></script>
		<link rel="stylesheet" href="styles/page.css" />
		<link rel="stylesheet" href="styles/style.css" />
		<link rel="stylesheet" href="styles/profile.css" />

		<% if (teams.length===0) {%>
		<title>Join Team | Xpecto</title>
		<% } else{ %>
		<title>Team: <%= teams.name %> | Xpecto</title>
		<% } %>
	</head>

	<style>
		.join-container h1 {
			text-align: center;
			color: aqua;
		}
		#page .content {
			padding-top: 1rem;
		}
		#page .container {
			padding-top: 7.5rem;
			width: 500px;
		}
		#page .heading {
			line-height: 2;
			font-size: 3rem;
		}
		.card {
			color: white;
			font-weight: bold;
			width: 500px;
			padding: 2rem;
			backdrop-filter: blur(50px) saturate(200%);
			-webkit-backdrop-filter: blur(50px) saturate(200%);
			background-color: rgba(0, 16, 45, 0.781);
			border-radius: 12px;
			border: 2px solid rgba(255, 255, 255, 0.125);
			margin-top: 7rem;
		}

		.btn1 {
			font-weight: bold;
			padding: 0.25rem;
			width: 100px;
			border-radius: 5px;
			transition: 0.2s;
			font-size: 1.25rem;
			background-color: rgba(2, 84, 200, 1);
			color: white;
			border: 2px solid rgba(2, 84, 200, 1);
			display: flex;
			justify-content: center;
			margin: 2rem auto 1rem auto;
		}
		.btn1:hover {
			cursor: pointer;
			background-color: darkgreen;
			color: white;
			border-color: darkgreen;
			transition: 0.2s;
		}
		.btn1:active {
			background-color: grey;
			color: white;
			border-color: grey;
			transition: 0.2s;
		}
		@media (max-width: 480px) {
			.card {
				width: 300px;
			}
		}
		@media (max-width: 320px) {
			.card {
				width: 275px;
			}
		}
		.form-group {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		label {
			font-size: 1.5rem;
			margin: 1rem;
			display: flex;
			justify-content: center;
			text-align: center;
			align-items: center;
		}

		input[type="text"] {
			background-color: black;
			color: white;
			border: none;
			padding: 0.5rem 1rem;
		}
		input[type="text"]:focus {
			background-color: black;
			color: white;
			border: none;
			padding: 0.5rem 1rem;
		}
	</style>
	<body>
		<!-- -----HEADER INCLUDING LOGO AND NAVBAR----- -->
		<%- include ('partials/navbar.ejs') %>
		<!-- -----HEADER END----- -->

		<div class="" id="page">
			<div class="container">
				<div class="heading">
					<span>Join</span>
					<span>Team</span>
				</div>
			</div>
			<div class="prof-container">
				<!-- <div class="content"></div> -->
				<div class="card">
					<div class="join-container">
						<h1>Join Team</h1>
						<form action="/joinTeam" method="POST">
							<div class="form-group">
								<hr />
								<label for="inviteCode">Invite Code</label>
								<div class="msg"></div>
								<input
									type="text"
									class="form-control"
									id="inviteCode"
									placeholder="Enter invite code"
									name="invite_code"
									required
								/>
							</div>
							<button id="joinButton" type="submit" class="btn1">
								Join
							</button>
						</form>
					</div>
				</div>
			</div>
		</div>
		<script src="scripts/script.js"></script>
		<script src="scripts/ejs.js"></script>
		<script type="text/javascript">
			let invalidCode = ejs.render("<%= invalidCode %>").toString();
			let inviteCode = ejs.render("<%= inviteCode %>");
			let allowedTeamSize = ejs
				.render("<%= allowedTeamSize %>")
				.toString();
			const msg = document.querySelector(".msg");
			if (invalidCode === "false" && allowedTeamSize === "false") {
				msg.style.color = "yellow";
				msg.innerHTML = "Team already Full!";
				setTimeout(() => msg.remove(), 2000);
			} else if (
				allowedTeamSize === "true" &&
				invalidCode === "true" &&
				inviteCode > 0
			) {
				msg.style.color = "yellow";
				msg.innerHTML = "Couldn't Join A Team, Invalid Code!";
				setTimeout(() => msg.remove(), 2000);
			} else {
				msg.style.color = "yellow";
				msg.innerHTML = "Please Enter a Code to join a Team!";
				setTimeout(() => msg.remove(), 2000);
			}
		</script>
	</body>
</html>
