<?php

include 'views/_header_blog.tpl.php'; ?>

<script type="text/javascript">
</script>

<style type="text/css">
	div.spacer { padding-top:70px; }
	.hidden, #mmen {
		display: none;
	}
	#current_user_id,
	#current_user_status {
		display: none;
	}
	.ui-menu-item {
		font-family:Montserrat,'Open Sans',Helvetica,sans-serif;
		font-size:17px;
	}
	.ui-item-thumb {
		width: 80px;
		height: 80px;
		object-fit: cover;
		max-height: 80px;
		margin-right: 7px;
		float: left;
		overflow: hidden;
	}
	.nav-category > li .iPlugGray {
		position: absolute;
		top: 14px;
		left: 5px;
	}
	.nav-category > li .fa-angle-right {
		position: absolute;
		top: 12px;
		right: 5px;
		color: #ccc;
		font-size: 18px;
	}
	.nav-category > li {
		margin: 0px 0;
		padding: 10px 22px;
		position: relative;
		font-weight: 300;
		font-family: 'Open Sans';
		border-bottom: 1px solid #eee;
	}
	.nav-category > li:hover {
		background: #fff;
	}
	.nav-category > li > a {
		display: inline;
		font-family: 'Open Sans', sans-serif;
		font-weight: 500;
		text-shadow: 0px 1px 0px rgba(255,255,255,.4);
		font-size: 1.077em;
		display: block;
		transition: none;
		-o-transition: none;
		-ms-transition: none;
		-moz-transition: none;
		-webkit-transition: none;
	}
	.top-project-info {
		max-height: 200px;
	}
	.project-short.sml-thumb .top-project-info {
		padding: 0px;
	}
	h1 {
		margin-bottom: 7px;
	}
	.search-result-page .top-lbl-val {
		padding-bottom: 0px;
	}
	i.ajra.fa.fa-angle-right {
		position: absolute;
		line-height: auto;
		right: 5px;
		color: #ccc;
		font-size: 18px;
		width: 10px;
		display: inline-block;
		display: none;
	}
	.form-search .btn-search {
		position: absolute;
		top: 15px;
		left: 9px;
		width: 16px;
		height: 16px;
		border: none;
		padding: 0;
		margin: 0;
		background: none;
		line-height: 0;
	}
	.form-search .btn-reset-keyword {
		position: absolute;
		top: 19px;
		right: 18px;
		width: 9px;
		height: 9px;
		border: none;
		padding: 0;
		margin: 0;
		background: none;
		line-height: 0;
	}	
	.form-search .txt-keyword {
/*		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0);
		-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0);
		-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0);	*/	
		border:0;
		box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0);
		-moz-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0);
		-webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0);
		padding-left: 4%;
		width: 100%;
	}
	
	.form-search .txt-keyword input:focus {
		background-color: yellow;
	}
	.ajaxsearch {
		background: #333;
		border-radius: 30px;
		-moz-border-radius: 30px;
		-webkit-border-radius: 30px;
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
		-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
		-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
		transition: border linear 0.2s, box-shadow linear 0.2s;
		-o-transition: border linear 0.2s, box-shadow linear 0.2s;
		-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
		-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
		vertical-align: middle;
	}
	#bottominfo {
		position: absolute;
	bottom: 0;
	background: rgba(0,0,0,.75);
	width: 94%;
	padding: 3%;
	}
	#bottominfo a {
		color: #fff;
	font-family: 'Open Sans',sans-serif;
	font-weight: 300;
	text-shadow: 0px -1px 1px rgba(0,0,0,.9);
	}
	#bottominfo a:hover {
		color: #5CAEE8 !important;
	}
	#footer {
		padding-top: 0px;
	}
	.main-footer {
		display: none;
	}
	
	.btn-o, .btn-o a, .btn-oo a {
		border: 0px solid #0DA5F2; /* was 3px */
		/*background: rgba(0,0,0,.5);*/
		background: #00A1FE; /* red: E91C19 */
		padding: 15px 20px;
		width: 200px;
		height: 20px;
		line-height: 20px;
		display:inline-block; font-family: Montserrat,Raleway,'Open Sans', Helvetica,Arial,sans-serif; 
		font-weight:700;
		text-align:center;
		font-size:17px; color:#fff; 
		-webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
		box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 12px;
		-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 12px;
		-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 12px;
		text-shadow:0px -1px 0px rgba(0,0,0,41);
		letter-spacing: 1.2px;
	}
	
	.btn-o:active, .btn-o:hover, .btn-oo a:hover, .btn-oo a:active { 
		border:0px solid #fff; 
		background: #6ac8ff;
		/*background: #82be55;*/
	}

	/* ######################################################### */
	/*                        MOBILE STYLES                      */
	/* ######################################################### */

	@media (min-width: 980px) and (max-width: 1024px) {
		.form-search .txt-keyword {
			padding-left: 5%;
			width: 95%;
		}		
	}

	/* Portrait tablet to landscape and desktop */
	@media (min-width: 768px) and (max-width: 979px) {
		.form-search .txt-keyword {
			padding-left: 5%;
			width: 95%;
		}
	}

	/* Landscape phone to portrait tablet */
	@media (max-width: 767px) {
		.form-search .txt-keyword {
			padding-left: 6%;
			width: 94%;
		}
	}

	/* Landscape phones and down */
	@media (max-width: 586px) {
		.grid_3 {
			display: block;
			width: 100% !important;
		}
		.top-project-info {
			max-height: 300px;
		}
	}

	/* Landscape phones and down */
	@media (max-width: 480px) {
		.form-search .txt-keyword {
			padding-left: 8%;
			width: 92%;
		}
		.top-project-info {
			max-height: 400px;
		}
		#bottominfo {
			background: rgba(0,0,0,.75);
		}
		h3 {
			font-size: 18px;
		}
	}
	
	/* Smaller Landscape phones and down */
	@media (max-width: 320px) {

	}	

</style>

<div class="layout-2cols">

	<div class="content grid_9" style="overflow:hidden;">
		<div class="search-result-page" style="overflow:hidden;">
			<div class="top-lbl-val">
				<!-- AJAX SEARCH -->
				<div class="form-search header-search" style="margin:25px 0 10px; overflow:hidden; width:100%;
					background:none;">
					<form class="ajaxsearch" method="get" action="/search" style="position:relative; overflow:hidden;">
						<label for="sys_txt_keyword" style="background:none; width:100%; display:block;">
							<input id="sys_txt_keyword" name="term" class="txt-keyword multi-search"
							type="text" placeholder="Search Events..."
							style="display:block; background:none; border:none; color:#eee;
							padding-right:0px;" />
							<input type="hidden" name="disable_json" value="1" />
						</label>
						<button class="btn-search" type="reset">
							<i class="icon iMagnifier"></i></button>
						<button class="btn-reset-keyword" type="reset">
							<i class="icon iXHover"></i></button>
					</form>
				</div>
				<br />
				
				<h1 style="">
					<a href="/categories/all">
						<i class="fa fa-angle-left"></i></a> Browse / <span class="fc-orange"><?= $category['title'] ?></span>
					<a href="/category/all"
						style="color:#ccc; font-size:22px;">
						<i class="fa fa-refresh"></i></a>
				</h1>
				<?php
				if ($category['id'] != 'all') {
				?>
				<div class="count-result">
					<span class="fw-b fc-black"><?= $category['count'] ?></span> item<?php
					if ($category['count'] != 1) {
						echo 's'; } ?> found in this category
				</div>
				<?php
			}
				?>
			</div>
			<div class="list-project-in-category">
				<!--
				<div class="lbl-type clearfix">
				<h4 class="rs title-lbl"><a href="#" class="be-fc-orange">Staff picks</a></h4>
				<a href="#" class="view-all be-fc-orange">View all</a>
				</div>
				-->
				<div class="list-project">

					<?php
					foreach ($projects as $project)
						:
					if (!$project['main_img'] && isset($project['images'][0]))
						$project['main_img'] = $project['images'][0]['file'];
					?>

					<div class="grid_3">
						<div class="project-short sml-thumb" style="overflow:hidden; 
						background-size: cover;
						background-position: top center; margin-bottom:20px; background:#222">
							<div class="top-project-info" style="min-height:200px; overflow:hidden; 
							position:relative;
							background-size: cover; background-position: top center;">
								<div class="content-info-short clearfix" style="overflow:hidden;
									background-size: cover; background-position: top center;">
									<a href="/project/<?= $project['id'] ?>" class="thumb-imgxxx">
										<img src="/<?= $project['main_img'] ?>" 
							onerror="this.src='/static/system/item_categories_placeholder.png'"
										alt="<?= $project['title'] ?>"
										style="max-width:auto !important; background-size:cover;
										object-fit: cover; background-position: top center">
									</a>
									<!-- BOTTOM INFO WAS HERE -->
									<!-- NOTES: background-size:cover !important; object-fit:contain; -->
								</div>

								<div id="bottominfo" class="wrap-short-detail" style="">
									<h3 class="rs acticle-title">
										<a class="be-fc-orange" href="/project/<?= $project['id'] ?>"><?= $project['title'] ?></a></h3>
									<!--<p class="rs tiny-desc">by <a href="/profile/<?= $project['user']['user_slug'] ?>" class="fw-b fc-gray be-fc-orange"><?= $project['user']['name'] ?></a></p>-->
									<!--<p class="rs title-description"><?= substr(strip_tags($project['description']),0, 100) ?>...<a href="/project/<?= $project['id'] ?>" class="be-fc-orange" style="font-weight:bold;">read more &raquo;</a></p>-->
								</div>
							</div>
						</div>
					</div>

					<?php
					endforeach; ?>

				</div>

			</div><!--end: .list-project-in-category -->

			<div style="clear:both"></div>
			<!--
			<p class="rs ta-c">
			<a id="showmoreproject" class="btn btn-black btn-load-more" href="#">Show more projects</a>
			</p>
			-->
		</div><!--end: .search-result-page -->
	</div><!--end: .content -->
	<div class="sidebar grid_3" style="">
		<div class="left-list-category" style="padding-left:0px;">
			<h4 class="rs title-nav">Categories</h4>
			<ul class="rs nav nav-category">
				<li><a href="/category/all">View All <i class="icon iPlugGray"></i> <i class="fa fa-angle-right"></i></a></li>
			</ul>
			<ul class="rs nav nav-category">
				<?php
				foreach ($categories as $cat) {
					if ($cat['id'] == $cat_id) {
						$class = 'class="active"';
					} else {
						$class = '';
					}
				?>
				<li <?= $class ?>>
					<a href="/category/<?= strtolower($cat['slug']) ?>">
					<?= $cat['title'] ?>
					<span class="count-val">(<?= $cat['count'] ?>)</span>
					<i class="icon iPlugGray"></i> <i class="fa fa-angle-right"></i>
					</a>
				</li>
				<?php
			}
				?>
			</ul>
			
			<br /><br />
			
			<div>
				<a href="/listings" class="btn-o" title="View Nearby Events">All Mobs
					<i class="fa fa-angle-right"></i></a>
			</div>
			
		</div><!--end: .left-list-category -->
	</div><!--end: .sidebar -->
	<div class="clear"></div>
</div>
<?php include 'views/_footer.tpl.php'; ?>