<!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="Event, 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" />

		<title>Event | Xpecto</title>
	</head>

	<style>
		#page {
			justify-content: center;
			padding-bottom: 100px;
		}
		#page .content {
			/* padding: 2rem; */
			height: 100%;
			padding-bottom: 50px !important;
			padding-left: 0;
			padding-right: 0;
			margin-left: 0;
			margin-right: 0;
		}
		.first h1 {
			font-size: 3rem;
			font-weight: bold;
			color: white;
			margin: 1rem;
		}

		body {
			background: url("../images/svg/Hexagon.svg");
			background-attachment: fixed;
			background-size: cover;
			padding-bottom: 50px;
		}
		main .first {
			padding: 1rem;
			/* background-color: red; */
			/* height: 200px; */
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		main .second {
			text-align: center;
			padding: 1rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
		}
		main .second {
		}
		.event-desc-heading,
		.timeline-heading,
		.submission-heading {
			font-size: 2rem;
			font-weight: bold;
			color: white;
			text-align: center;
		}
		.event-desc,
		.timeline,
		.submission {
			margin: 1rem;
		}
		.submission-link {
			font-size: 1.5rem;
			text-decoration: none;
			color: cyan;
			font-weight: bolder;
		}
		.submission-link:hover {
			cursor: pointer;
		}
		footer .prizes {
			padding: 1rem;
			width: 100%;
			display: flex;
			height: 250px;
			justify-content: space-evenly;
			flex-wrap: wrap;
			/* background-color: blueviolet; */
		}
		@media (max-width: 1080px) {
			footer .prizes {
				margin-bottom: 5rem;
			}
		}
		@media (max-width: 700px) {
			footer .prizes {
				margin-bottom: 15rem;
			}
		}
		.first a {
			text-decoration: none;
		}
		.btn1 {
			font-weight: bold;
			padding: 0.5rem;
			width: 150px;
			border-radius: 5px;
			transition: 0.2s;
			font-size: 1rem;
			background-color: rgba(2, 84, 200, 1);
			color: white;
			border: 2px solid rgba(2, 84, 200, 1);
			display: flex;
			justify-content: center;
			margin: 2rem 1rem 1rem 1rem;
		}
		.btn1:hover {
			cursor: pointer;
			background-color: rgb(4, 74, 172);
			color: white;
			border-color: rgb(4, 74, 172);
			transition: 0.2s;
		}
		.btn-group {
			display: flex;
		}
		@media (max-width: 480px) {
			.btn-group {
				flex-direction: column;
			}
		}
		.prize {
			background: rgba(0, 37, 84, 0.3);
			box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(5px);
			border: 1px solid rgba(255, 255, 255, 0.18);
			border-radius: 10px;
			padding: 1rem;
			text-align: center;
			margin: 1rem;
		}
		.prize-heading {
			font-size: 1.5rem;
			font-weight: bold;
			margin: 1rem;
		}
		hr {
			margin: 2rem;
			margin-left: auto;
			margin-right: auto;
			/* text-align: center; */
			width: 75%;
		}
		.event-desc-content {
			padding-top: 0.5rem;
			width: 75%;
			margin-left: auto;
			margin-right: auto;
		}
		@media (max-width: 480px) {
			.first h1 {
				font-size: 2rem;
			}
		}
		footer {
			margin-bottom: 100px;
		}
		.prizes {
			margin-bottom: 100px;
		}

		/* @media(); */
		@media (max-width: 1000px) {
			#page .content {
				padding-bottom: 100px;
			}
		}
	</style>
	<body>
		<!-- -----HEADER INCLUDING LOGO AND NAVBAR----- -->
		<%- include ('partials/navbar.ejs') %>
		<!-- -----HEADER END----- -->

		<div class="" id="page">
			<div class="content">
				<main>
					<section class="first">
						<h1><%= event.name.toUpperCase()%></h1>
						<div class="msg"></div>
						<div class="msg1"></div>
						<div class="msg3" style="color: yellow">
							Registrations are Closed!
						</div>
						<div class="btn-group">
							<% if(isRegisteredforEvent==="true"){%> <% if
							(team_created==="false" && event.teamMaxSize > 1)
							{%>

							<a href="/createTeam?event=<%= event.name %>"
								><button class="btn1 create-team">
									Create Team
								</button></a
							>
							<%}%> <% if ( team_created==="true" &&
							event.teamMaxSize > 1) {%>
							<a href="/userTeam?event=<%= event.name %>"
								><button class="btn1 create-team">
									Your Team
								</button></a
							>
							<%}%>

							<!-- outside else condition: if not registered-->
							<%} else { %>

							<!--
							<a href="/eventRegister?event=<%= event.name %>"
								><button id="isRegLive" class="btn1 rulebook">
									Register
								</button>
							</a>-->

							<%}%>
							<!-- For Rulebook-->
							<%if (event.rulebook_link.length>0) {%>
							<a target="_blank" href="<%= event.rulebook_link %>"
								><button class="btn1 rulebook">
									Rulebook
								</button></a
							>

							<%} else {%>
							<a href="#"
								><button id="rulebook_" class="btn1 rulebook">
									Rulebook
								</button>
							</a>

							<%}%>
						</div>
						<% if(isRegisteredforEvent==="true") {%>
						<div class="btn-group">
							<!-- For PS-->
							<%if (isEventLive==="true" &&
							event.problemset_link.length>0) {%>
							<a
								target="_blank"
								href="<%= event.problemset_link %>"
								><button class="btn1 rulebook">
									Problem Statement
								</button></a
							>

							<%} else {%>
							<a href="#"
								><button id="problemset" class="btn1 rulebook">
									Problem Statement
								</button>
							</a>

							<%}%>
						</div>
						<%}%>
					</section>
					<hr />
					<section class="second">
						<div class="event-desc">
							<div class="event-desc-heading">
								Event Description
							</div>
							<div class="event-desc-content">
								<%= event.description %> <% if
								(event.name==="Vision Verse") {%>
								<div class="event-desc-content">
									<h4>
										Event will be held at
										<a
											class="submission-link"
											href="<%= event.problemset_link %>"
											>Kaggle.</a
										>
									</h4>
								</div>
								<%}%>
							</div>
						</div>
						<div class="timeline">
							<div class="timeline-heading">Timeline</div>
							<%if (event.start_time.day != 0) {%>
							<div class="timeline-content">
								<%if (event.name==='Reel-o-logy') {%>
								Participants must submit their Reels from
								<%}else {%>
								<li>
									The Event will start on<%}%>
									<b
										><%= event.start_time.day %> <%=
										event.start_time.time %></b
									>
									and submission must be made before
									<b>
										<%= event.end_time.day %> <%=
										event.end_time.time %>
									</b>
								</li>
								<%for (let i=0; i< event.timeline_desc.length;
								i++) {%>
								<li><%= event.timeline_desc[i]%></li>

								<%}%>
							</div>

							<%} else {%> To be Updated Soon! <%}%>
						</div>
						<div class="submission">
							<div class="submission-heading">Submission</div>
							<% if (event.submission_desc.desc !== "" &&
							event.submission_link.length > 0) {%>

							<div class="submission-content">
								<li>
									<%= event.submission_desc.desc%>
									<a
										class="submission-link"
										href="<%= event.submission_desc.link%>"
										>Link</a
									>
								</li>
							</div>
							<!--
							<div class="submission-content">
								<% if (event.name==="Vision Verse") {%>
								<div class="event-desc-content">
									<%=event.submission_desc%>
								</div>
								<%} else{%> You have to submit through this
								<a
									class="submission-link"
									href="<%= event.submission_link %>"
									>Submission link.</a
								>
								<%}%>
							</div>-->
							<%}else {%>
							<div class="submission-content">
								Submission Links Will be provided Soon!
							</div>
							<%}%>
						</div>
						<!--Event Coordinators-->
						<div class="submission">
							<div class="submission-heading">
								Event Coordinators
							</div>
							<div class="submission-content">
								<% if (event.coordinators.first &&
								event.coordinators.first.name !== "") {%>
								<div>
									<b
										>Name: <%= event.coordinators.first.name
										%> Contact:

										<a
											href="tel:<%=event.coordinators.first.contact%>"
											style="
												color: white;
												text-decoration: none;
											"
										>
											<span
												><%=
												event.coordinators.first.contact
												%></span
											>
										</a>
									</b>
								</div>
								<%}%> <% if (event.coordinators.second &&
								event.coordinators.second.name !== "") {%>
								<div>
									<b
										>Name: <%=
										event.coordinators.second.name %>
										Contact:

										<a
											href="tel:<%=event.coordinators.second.contact%>"
											style="
												color: white;
												text-decoration: none;
											"
										>
											<span
												><%=
												event.coordinators.second.contact
												%></span
											>
										</a>
									</b>
								</div>
								<%}%> <% if (event.coordinators.third &&
								event.coordinators.third.name !== "") {%>
								<div>
									<b
										>Name: <%= event.coordinators.third.name
										%> Contact:

										<a
											href="tel:<%=event.coordinators.third.contact%>"
											style="
												color: white;
												text-decoration: none;
											"
										>
											<span
												><%=
												event.coordinators.third.contact
												%></span
											>
										</a>
									</b>
								</div>
								<%}%>
							</div>
						</div>
					</section>
				</main>
				<hr />
				<%if (firstPrizeAmount==="") {%>
				<footer
					style="
						text-align: center;
						margin-bottom: 100px;
						font-size: 1.5rem;
						font-weight: bold;
					"
				>
					Prize Pool To be updated Soon!
				</footer>
				<%}else{%>

				<div
					style="
						text-align: center;
						font-size: 1.5rem;
						font-weight: bold;
					"
				>
					Prize worth : <%= event.pricesworth %>
				</div>
				<%if (event.name==="Foldable Flight") {%>
				<div
					style="
						text-align: center;
						font-size: 1rem;
						font-weight: bold;
						color: yellow;
					"
				>
					Note: There are 2 categories. Prizes to be awarded in both
					categories separately.
				</div>
				<div
					style="
						text-align: center;
						font-size: 1rem;
						font-weight: bold;
						color: yellow;
					"
				>
					Category 1: Maximum Air Time
				</div>
				<footer>
					<div class="prizes">
						<div class="prize">
							<div class="prize-heading">1st Place</div>
							<div class="prize-name">
								<%= event.prices.first %>
							</div>
						</div>
						<div class="prize">
							<div class="prize-heading">2nd Place</div>
							<div class="prize-name">
								<%= event.prices.second %>
							</div>
						</div>
						<div class="prize">
							<div class="prize-heading">3rd Place</div>
							<div class="prize-name">
								<%= event.prices.third %>
							</div>
						</div>
						<% if (event.name === "Dementia") {%>
						<div class="prize">
							<div class="prize-heading">College Best</div>
							<div class="prize-name">
								<%= event.prices.collegeBest %>
							</div>
						</div>
						<%}%>
					</div>
				</footer>
				<br />
				<br />
				<div
					style="
						text-align: center;
						font-size: 1rem;
						font-weight: bold;
						color: yellow;
					"
				>
					Category 2: Maximum Air Distance
				</div>
				<%}%>
				<footer>
					<div class="prizes">
						<div class="prize">
							<div class="prize-heading">1st Place</div>
							<div class="prize-name">
								<%= event.prices.first %>
							</div>
						</div>
						<div class="prize">
							<div class="prize-heading">2nd Place</div>
							<div class="prize-name">
								<%= event.prices.second %>
							</div>
						</div>
						<div class="prize">
							<div class="prize-heading">3rd Place</div>
							<div class="prize-name">
								<%= event.prices.third %>
							</div>
						</div>
						<% if (event.name === "Dementia") {%>
						<div class="prize">
							<div class="prize-heading">College Best</div>
							<div class="prize-name">
								<%= event.prices.collegeBest %>
							</div>
						</div>
						<%}%> <% if (event.name === "FrostHack") {%>
						<div class="prize">
							<div class="prize-heading">Fourth</div>
							<div class="prize-name">
								<%= event.prices.fourth %>
							</div>
						</div>
						<div class="prize">
							<div class="prize-heading">Fifth</div>
							<div class="prize-name">
								<%= event.prices.fourth %>
							</div>
						</div>
						<div class="prize">
							<div class="prize-heading">Best BlockChain App</div>
							<div class="prize-name">
								<%= event.prices.bestBlockchainApp %>
							</div>
						</div>
						<%}%>
					</div>
				</footer>

				<%}%>
			</div>
		</div>
		<script src="scripts/script.js"></script>
		<!-- <script src="scripts/ejs.js"></script> -->
		<script type="text/javascript">
			const msg = document.querySelector(".msg");
			const msg1 = document.querySelector(".msg1");
			const element = document.getElementById("rulebook_");

			if (element) {
				element.addEventListener("click", rulebook);
			}

			const element1 = document.getElementById("rulebuk");
			if (element1) {
				element1.addEventListener("click", roolbook);
			}

			const element2 = document.getElementById("problemset");
			if (element2) {
				element2.addEventListener("click", problemset);
			}
			// const element3 = document.getElementById("isRegLive");
			// if (element3) {
			// 	element3.addEventListener("click", isRegLive);
			// }

			function problemset() {
				msg1.style.color = "yellow";
				msg1.innerHTML = "Problem Statement to be released soon!";
				setTimeout(() => msg1.remove(), 10000);
			}

			function roolbook() {
				msg1.style.color = "yellow";
				msg1.innerHTML = "Register for the Event First!";
				// setTimeout(() => msg1.remove(), 5000);
			}

			function rulebook() {
				msg.style.color = "yellow";
				msg.innerHTML =
					"Event Has Not Started Yet! Will be released soon.";
				setTimeout(() => msg.remove(), 5000);
			}
			// function isRegLive() {
			// 	msg.style.color = "yellow";
			// 	msg.innerHTML = "Registrations are Closed!";
			// 	element3.disable = true;
			// 	setTimeout(() => {
			// 		msg.remove();
			// 		element3.disable = false;
			// 	}, 5000);
			// }
		</script>
	</body>
</html>
