
<body  class="landingBody" >
<main>
	<div class="container-fluid">
		<?php include(VIEWPATH . "includes/top-bar.php"); ?>
		<div class="row">

			<?php
			/*
			if(isset($my_user->first_name)){
			?>
			<div class="col-xs-2 col-xs-offset-9" style="margin-top: 30px;">
			<span class="topSimple-signinLink" >Welcome, <?php echo $my_user->first_name; ?></span>
			</div>
			<?php
			}else{
			?>
			<div class="col-xs-2 col-xs-offset-9" style="margin-top: 30px;">
			<a class="topSimple-signinLink" href="login-signup" role="button">SIGN IN</a>
			</div>
			<?php
			}
			*/
			?>



			<div class="Landing-coverImage">
				<!--<div>
				<img class="Landing-logo" src="img/logo-landing.png">
				</div>-->
				<div class="Landing-coverText">
					<div class="Landing-coverTitle">
						<h3>What do you want to be when you are older?</h3>
					</div>
					<div class="Landing-coverSubtitle">
						<h6>A fun, new way to discover your career</h6>
					</div>
					<div class="Landing-coverBtn">
						<a href="category-select" class="Landing-getStartedBtn btn btn-lg btn-primary button button-green" role="button">LET'S GO</a>
					</div>
					<div class="dropdown Landing-coverDropdown">
						<a class="btn btn-primary button-borderless" href="#landingInfo">
							How does it work?
						</a>

					</div>
				</div>
			</div>
			
			<div class='i-am-a col-md-12'> 
				<div class='col-md-4'><b>I AM A</b></div>
				<div class='col-md-1 '>student</div>
				<div class='col-md-1 border-l'>parent</div>
				<div class='col-md-1 border-l'>insider</div>
				<div class='col-md-1 border-l'>school</div>
				<div class='col-md-1 border-l'>university</div>
			</div>
		</div>
		<div class="row- Landing-Info- homepage-info container homepage-videos">
			<div class="videoListing-secondContainer">
				<div class="container-fluid">
					<div class="row">
						<div class=" col-md-12">
							<?php
							if(!empty($custom_sliders)){
								foreach ($custom_sliders as $slider_title => $slider_videos) {
									?>
									<div class='row'>
										<h4 class='col-md-6'><?=$slider_title;?></h4>
										<div class='pull-right col-md-2'>
											<div class='play-all-button'>
												<i class="fa fa-play" aria-hidden="true"></i>Play All
											</div>
										</div>
									</div>
									<br class='clearfix' />

									<div class="row videoTemplate-videosRows videoListing-videoTemplateRows">
										<?php
										if(!empty($slider_videos)){
											foreach ($slider_videos as $video) {
												?>
												<div class="col-xs-12 col-md-4 videoTemplate-videosWrapper videoListing-videoTemplateWrapper">
													<a href="video-playing/<?php echo $video['id']; ?>/<?=$video['seo-title'];?>">
														<div class="videoTemplate-videos" style="--background-image: url(https://img.youtube.com/vi/<?php echo $video['youtube_id']; ?>/mqdefault.jpg);">
															<img src="https://img.youtube.com/vi/<?php echo $video['youtube_id']; ?>/mqdefault.jpg" />
															<div class="videoTemplate-videosTags">
																<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
																<!-- <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> -->
																WATCHED
															</div>
															<img class="videoTemplate-videosPlay" src="img/play.png" width="38" height="37">
															<div class="videoTemplate-videosDescription">
																<?php
																$title = ( strlen($video['title']) > 25 ) ? substr($video['title'],0,25) . "..." : $video['title'];
																echo $title;
																?>
															</div>
															<div class="videoTemplate-videosTime"><?php echo $video['duration']; ?></div>
														</div>
													</a>
												</div>
												<?php
											}
										}
										?>


									</div>

									<?php
								}
							}

							?>
						</div>
					</div>
				</div>
			</div>

		</div>


		<div class="row Landing-Info  homepage-info-1">
			<div class='container'>
				<div class='col-md-6'>
					<br><br><br>
					<h5>
						Explore our growing library of<br>
						short videos about different jobs.
					</h5>
					<br><br>
					<h5>The insiders describe what they do, so you can<br>
						decide if it's right for you.</h5>
					<a href="<?php echo base_url(); ?>/login-signup">
						YALLA, LET'S GO! <i class="fa fa-play" aria-hidden="true"></i>
					</a>
				</div>
				<div class='col-md-6'>
					<img src='img/home-right.png' />
				</div>
			</div>
		</div>

		<div class="row Landing-Info-  homepage-info-2">
			<div class='container'>
				<div class='col-md-6'>
					<img src='img/home-left.png' />
				</div>
				<div class='col-md-6'>
					<br><br><br>
					<br>
					<h5>
						Be the first to watch new videos<br>
						and apply for job shadowing.
					</h5>
					<br><br>
					<h5>
						Nooreed members get the opportunity to get <br>
						real experience with the insiders.
					</h5>
					<a href="<?php echo base_url(); ?>/login-signup">
						SIGN ME UP! <i class="fa fa-play" aria-hidden="true"></i>
					</a>
				</div>
			</div>
		</div>
	</div>
</main>
