<!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 webinars, 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>Webinar | Xpecto</title>
	</head>
	<style>
		#more {
			display: none;
		}

		#page .container {
			padding-top: 2.25rem;
			width: 250px;
		}

		#page .heading span {
			font-size: 2.25rem;
			padding-right: 2.5rem;
			transform: skew(0deg);
		}

		#page .heading {
			line-height: 1.5;
			padding-left: 7.5rem;
			padding-top: 25%;
			display: flex;
			align-items: baseline;
			transform: skewX(-7.5deg);
		}

		@media (max-width: 480px) {
			#page .content {
				padding: 2rem 0.25rem;
			}
		}

		.team-size {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			margin: 0.5rem;
		}

		body {
			background: url("../images/svg/Hexagon.svg");
			background-attachment: fixed;
		}

		.event-list-container {
			display: flex;
			flex-direction: column;
		}

		.event-card-container {
			width: 95%;
			margin: 1.75rem;
			display: flex;
			flex-direction: column;
		}

		.event-name {
			font-size: 2.25rem;
		}

		.event-register {
			margin: 1.5rem;
			font-size: 1.25rem;
			width: 200px !important;
		}

		@media (max-width: 600px) {
			.event-register {
				margin: 1rem;
				font-size: 1.25rem;
				width: 150px !important;
			}

			.event-card-container {
				margin: 1.5rem;
			}
			.webinarhead {
				font-size: 1.5rem;
				text-align: center;
			}
		}

		.event-description {
			margin-top: 1rem;
			font-size: 1.5rem;
		}
		.webinarhead {
			font-size: 3rem;
			text-align: center;
		}
		.webinar-name{
			font-size: 1.9rem;
		}
		.speaker-dur-qual{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 60%;
		}

		.speaker-container{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-evenly;
			margin: 2rem;
		}
		.speakers-list-container{
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;
			
		}
		.speaker-name-img{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-end;
			width:250px ;
		}
		.speaker-name-img:first-child{
			margin-bottom: 1rem;
		}
		.speaker-name-img img{
			width: 125px;
			height: 125px;
			margin-bottom: 1.5rem;
			margin-top: 1.5rem;
		}
		.speaker-name-img h5{
			font-size: 1.25rem;
		}
		.speakers-list-container h3{
			margin-top: 1rem;
			font-size: 1.75rem;
		}
		hr{
			width: 80%;
			margin: 1rem auto;
		}
		.speaker-dur-qual h4:last-child{
			margin-top: 2rem;
		}
		.speaker-dur-qual p{
			font-size: 0.9rem;
		}
		@media(max-width:1100px)
		{
			.speaker-dur-qual p{
				font-size: 0.75rem;
			}
			.webinar-name{
				font-size: 1.75rem;
			}
			.webinarhead{
				font-size: 2.75rem;
			}
			.speakers-list-container h3{
				font-size: 1.5rem;
			}
			.speaker-name-img h5{
			font-size: 1.1rem;
		}
		.speaker-dur-qual h4{
			font-size: 1.1rem !important;
		}
		.webinar-benefit-content{
		font-size: 0.85rem;
		}
		.webinar-description{
			font-size: 1rem !important;
		}
		}
		@media (max-width: 1000px) {
    #page .container {
        display: none;
    }
	@media(max-width:700px)
	{
		.speaker-container{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;
			/* margin: 2rem; */
		}
		.speaker-dur-qual{
			width: 90%;
		}
		
		.speaker-dur-qual p{
				font-size: 0.75rem;
			}
			.webinar-name{
				font-size: 1.5rem;
			}
			.webinarhead{
				font-size: 2.25rem;
			}
		
	}
}
	</style>

	<body>
		<!-- -----HEADER INCLUDING LOGO AND NAVBAR----- -->
		<%- include ('partials/navbar.ejs') %>
		<!-- -----HEADER END----- -->
		<div class="" id="page">
			<div class="container">
				<div class="heading" style="color: aqua">
					<span>&nbsp;W</span>
					<span>&nbsp;E</span>
					<span>&nbsp;B</span>
					<span>&nbsp;I</span>
					<span>&nbsp;N</span>
					<span>&nbsp;A</span>
					<span>&nbsp;R</span>
					<!-- <span>&nbsp;P</span> -->
				</div>
			</div>
			<div class="content">				
				<h1 class="webinarhead">WEBINAR</h1>
				<div class="events-list-container">
					<!-- card start -->
					<div class="event-card-container">
							<div class="event-card">
								<div class="event-name webinar-name" style="color: aqua">
									<%= webinar.name %>
								</div>
								<div class="webinar-description">
									
									<%if (webinar.description.length !==0) {%>
										<%= webinar.description %>
										<hr>
										<%}%>
								</div>
								<div class="speakers-list-container">
								<%if (webinar.speakers.length !==0) {%>
										<div class="">
											<h3>Speakers</h3>
											<% for(let j=0; j<webinar.speakers.length; j++) {%>
												<div class="speaker-container">
													<div class="speaker-name-img">
													<img src="<%= webinar.speakers[j].image %>" alt="">
													<h5><%= j+1 %>. <%= webinar.speakers[j].name %></h5>
												    </div>
													<div class="speaker-dur-qual">
														<h4>Qualifications</h4>
														<p><%= webinar.speakers[j].desc %></p>
														<h4>Duration</h4>
														<ul><%= webinar.speakers[j].duration%> (Max)</ul>
														
													</div>
												</div>
												<hr>
											<%}%>
										</div>
								<%}%> 
							</div>
								<%if (webinar.webinar_benefits.length !==
								0) {%>
								<div class="webinar-benefit">
									<h4 class="webinar-benefit-head">Webinar Benefits</h4>
									<div class="webinar-benefit-content">
									<%= webinar.webinar_benefits %>
								</div>
								</div>

								<%}%>
								<!-- <hr /> -->
								<br />
								<% if(checker==false) {%>
											<a
												href="/webinarRegister?webinar=<%=webinar.info %>"
												><button class="event-register">
													Register
												</button></a
											>	
								<%} else {%>
									<div class="msg" style="color:yellow; font-size: 1.5rem;"> Already Registered for the Webinar!</div>
									<% if (webinar.webinar_link.length>0) {%>
																		<a
										target="_blank"
										href="<%=webinar.webinar_link %>"
										><button class="event-register">
											Link
										</button></a
									>

								<%}%>	
								<%}%>		
									<a href="/webinar?webinar=<%=webinar.info %>"
										><button class="event-register">
										Webinar Info
										</button></a
									>					
									<!--
									<a
										target="_blank"
										href="<%=webinar.webinar_link %>"
										><button class="event-register">
											Webinar Info
										</button></a
									>-->
						
							</div>
					</div>
					<!-- card end -->
				</div>
			</div>

		<script src="scripts/script.js"></script>
		<script src="scripts/ejs.js"></script>
	</body>
</html>
