<?php $__env->startSection('content'); ?>
<div class="container-fluid" style="margin: 0 1em 0 1em;">
	<div class="row"> <!-- Row for player and ad -->
		<div class="col-xs-12 col-md-8 col-lg-9">
			<div class="row"> <!-- New row for player -->
				<div class="col-xs-12">
					<div class="scheduleInfo" style="margins: auto auto;  background-color: lightgray; text-align: center; margin-top: 15px; margin-bottom: 15px;">
                        <p style="padding-top: 150px;"><strong>This event is scheduled to begin streaming on <?php echo e(date('F j, Y @ g:i a', strtotime($event->stream_time))); ?>.</strong></p>
                        <i class="fa fa-refresh" style="cursor: pointer;" onclick="location.reload();"> </i>
                    </div>
				</div>
			</div> <!-- End row for player -->
			<div class="row"> <!-- New row for description to be under player -->
				<div class="col-xs-6 col-sm-3">
					<p class="event_title"><?php echo e($event->title); ?></p>
				</div>
				<div class="col-xs-6 col-sm-6">
					<p class="event_desc"><?php echo e($event->description); ?></p>
				</div>
				<div class="col-xs-6 col-sm-3">
					<?php if($event->display_date): ?>
						<p class="event_date"><?php echo e(date('F j, Y', strtotime($event->start_time))); ?></p>
					<?php endif; ?>
				</div>
			</div> <!-- End row for description -->
		</div> <!-- End player column -->
		<div class="col-xs-12 col-md-4 col-lg-3">
			<a href="<?php echo e($banner_ad->url); ?>" target="_blank" id="banner_ad"><img style="max-width: 100%; max-height: 600px;" src="https://local10.centracom.com/images/ch10/banner_ad/<?php echo e($banner_ad->file); ?>"></a>
		</div>
	</div>
	<div class="row" >			
		<div class="col-sm-12 col-md-12 hl" style="background-color: #333;">
			<div class="suggested-title" style="">
				Suggested Events:
			</div>
<!--
				<div class="next" id="next-suggested">
					<i class="fa fa-arrow-right"></i>
				</div>
				<div class="prev" id="prev-suggested">
					<i class="fa fa-arrow-left"></i>
				</div>
-->
			<div id="owl-suggested" class="owl-carousel">
				<?php foreach($recent_events as $event2): ?>
				<div class="card-content">
					<a href="<?php echo e(url('stream/'.$event2->id.'/'.\App\Event::seo($event2->title))); ?>">
						<img class="card-img" src="<?php echo e(asset('images/ch10/banner/'.$event2->banner)); ?>" id="suggested-row" />
						<div class="card-title">
							<?php echo e($event2->title); ?>

						</div>
					</a>
				</div>
				<?php endforeach; ?>
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-xs-12">
		<a href="https://centracom.com" target="_blank"><img style="margin-top: 20px;" height="70px" src="<?php echo $variable->getMedia('provided_by_CentraCom-white'); ?>"></a>
	</div>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('extras'); ?>
	<link rel="image_src" href="<?php echo e(asset('images/ch10/banner/'.$event->banner)); ?>" />
	<meta property="og:url"           content="<?php echo e(url('stream/'.$event->id.'/'.\App\Event::seo($event->title))); ?>" />
	<meta property="og:type"          content="website" />
	<meta property="og:title"         content="<?php echo e($event->title); ?>" />
	<meta property="og:description" content="<?php echo e($event->description); ?>" />
	<meta property="og:image" content="<?php echo e(asset('images/ch10/banner/'.$event->banner)); ?>" />
	<meta property="fb:app_id" content="188108276122" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
	
	<style>
		body {
			background-color: white;
			background-color: #232323;
		}
		.container-fluid {
			background-color: #232323;
/* 			background-color: white; */
			padding-top: 10px;
			margin-top: 0px;
			
		}
		.containerHelper {
			background-color: white;
			border-radius: 5px;
			background-color: #232323;
		}
		#CentraComPlayer {
			margin-top: 0px;
			margin-bottom: 15px;
			
		}
		#banner_ad {
/* 			float: right; */
		}
		#pbc {
			float: right;
		}
		.infoDiv {
			padding-left: 5px;
/* 			max-height: 85px; */
/* 			overflow-x: hidden; */
/* 			overflow-y: scroll; */
		}
		.scheduleInfo {
				height: 520px;
			}
		
		@media(max-width:767px) {

			.scheduleInfo {
				height: 380px;
			}
			#banner_ad {
			float: none;
			text-align: left;

			}
		#pbc {
			float: none;
			text-align: left;
			}
		.infoDiv {
			padding-left: 5px;
			max-height: 200px;
			overflow-x: visible;
			overflow-y: visible;
			text-align: left;
			}
		.containerHelper {
			border-radius: 0px;
			padding-top: 10px;
			}
		.container-fluid {
			background-color: #232323;
			padding-top: 0px;
			margin-top: 0px;
			}
		}
		
		.suggested-title {
			padding-left: 5px;
			max-height: 20px;
			text-transform: uppercase;
			letter-spacing: 2px;
			color: white;
			opacity: 0.6;
		}
		.noEvents {			
			opacity: .6;
		}
		.card-content {
			padding: 5px;
		}
		.card-img {
			width: 100%;
			max-width: 100%;
		}
		.card-title {
			color: white;
			opacity: 0.6;
			font-size: 1em;
			text-align: center;
		}
		.card-content a {
			text-decoration: none;
		}
		.prev {
			width: 30px;
			max-width: 20%;
			background-color: black;
			opacity: .6;
			position: absolute;
			z-index: 9999;
			text-align: center;
			cursor: pointer;
			top: 25px;
			border-right: 1px solid white;
		}
		.next {
			right: 0;
			width: 30px;
			max-width: 20%;
			background-color: black;
			opacity: .6;
			position: absolute;
			z-index: 9999;
			text-align: center;
			cursor: pointer;
			top: 25px;
			border-left: 1px solid white;
		}
		.prev i, .next i {
			margin: auto;
		}
		.next:hover, .prev:hover {
			opacity: .7;
		}
		
		.hl {
			margin-top: 20px;
		}
		
		.skip {  
	        position: absolute;
	        top: 15px;
	        left: 25px;
	        z-index: 9999;
    	}

		h1 {
			font-size: 1.5em;
			color: white;
			opacity: .5;
			font-weight: normal;

		}
		.event_title, .event_desc, .event_date {
			color: white;
			font-size: 1em;
		}
		.event_title {
			opacity: 0.6;
			text-align: left;
		}
		.event_desc {
			font-style: italic;
			opacity: 0.5;
			text-align: center;
		}
		.event_date {
			color: white;
			opacity: 0.4;
			font-size: .75em;
			text-align: right;
		}
	</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('bottom'); ?>
	
	
	<script>
		$(document).ready(function() {
		 
		 var suggested = $("#owl-suggested").owlCarousel({
			 	autoPlay : 20000,
				pagination: false
			 });


	 	$("#next-suggested").click(function(){
	   	 	suggested.trigger('owl.next');
	  	});
	  	$("#prev-suggested").click(function(){
	  		suggested.trigger('owl.prev');
	  	});

		//navHeight();
		 
		});


		function navHeight()
		{
			var liveHeight = $('#suggested-row').height();

			var nextLive = document.getElementById('next-suggested');
			var prevLive = document.getElementById('prev-suggested');
			nextLive.style.height = liveHeight + 'px';
			prevLive.style.height = liveHeight + 'px';
			nextLive.childNodes[1].style.marginTop = liveHeight/2.5 + "px";
			prevLive.childNodes[1].style.marginTop = liveHeight/2.5 + "px";

		}
	</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('residential.local10.stream_template', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>