<body class="categorySelectBody">

<style>
	<?php 
	foreach ($categories as $category) { 
		if (!empty($category['button-image'])) { 
			?>
			#cat-<?=$category['id'];?> {
				background-image: url(<?=$category['button-image'];?>);
			}
			<?php 
		}
	} 
	?>
</style>

<main>
	<div class="container-fluid">
		<?php include(VIEWPATH . "includes/top-bar.php"); ?>
		<div class="row">
			<div class="categorySelect-container">
				<!--<nav class="navbar navbar-default navbar-custom topSimple-navbar">
				<div class="row">
				<div class="inside">
				<div id="navbar" class="navbar-collapse- collapse-">
				<ul class="nav navbar-nav navbar-left pull-left">
				<li>
				<a href="home">
				<img src="img/logo-dark.png" height="45px" data-pin-nopin="true">
				</a>
				</li>
				</ul>
				<ul class="nav navbar-nav navbar-right pull-right">
				<li>
				<?php
				if(!empty($my_user)){
					?>
					<a class="topSimple-signinLink">Welcome, <?php echo $my_user->first_name ;?></a>
					<?php
				}else{
					?>
					<a class="topSimple-signinLink" href="login-signup" role="button">SIGN IN</a>
					<?php
				}
				?>
				</li>
				</ul>
				</div>
				</div>
				</div>
				</nav>-->
				<div class="categorySelect-title">
					<h3>What do you want to explore?</h3>
				</div>
				<div class="categorySelect-subTitle">
					<!--<h6>Select up to 4 categories & click NEXT.</h6>-->
				</div>
				<div class="row">
					<div class="col-md-8 col-md-offset-2">
						<div class="row categorySelect-categoryRow">
							<?php
							foreach ($categories as $category) {
								?>
								<div class="col-xs-12 col-md-4 categorySelect-rowItem">
									<div class="categorySelect-categories" id='cat-<?=$category['id'];?>'>
										<!--<p>
										<img src="<?php echo base_url() . $category['image']; ?>" alt="">
										</p>-->
										<img src="<?php echo base_url() . $category['image']; ?>" alt="">
										<?php echo $category['title']; ?>
										<input type="hidden" value="<?php echo $category['id']; ?>" />
									</div>
								</div>
								<?php
							}
							?>

						</div>
						<div class="row categorySelect-rows">
							<div class="categorySelect-button">
								<form id="findVideosForm" method="post" action="search">
									<input type="hidden" name="categories" id="selectedCategories" />
									<button style='opacity:0' disabled id="next_button" type="submit" class="btn button button-green-darker button-nooreed-large">NEXT</button>
								</form>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 categorySelect-search">
								<div class="row">
									<div class="col-md-6 categorySelect-searchLeft">
										<div class="categorySelect-searchLeftHeader">Can't see what you're looking for?</div>
										<div class="categorySelect-searchLeftText">Let us hear what's on your mind.</div>
									</div>
									<div class="col-md-6 categorySelect-searchRight">
										<form method="POST" id="career_request">
											<div class="form-group categorySelect-searchRightInput">
												<input type="text" class="form-control" id="search" placeholder="Type the job that you like here, and click submit" name="career">
											</div>

											<button type="submit" class="btn btn-default">Submit</button>
										</form>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
</main>