@extends('layouts.main')

@section('tartalom')
  <!-- SECTION -->
		<div class="section">
			<!-- CONTAINER -->
			<div class="container">
				<!-- ROW -->
				<div class="row">
					<!-- Main Column -->
					<div class="col-md-8">
						
						
						<!-- row -->
						<div class="row">
							<!-- section title -->
							<div class="col-md-12">
								<div class="section-title">
									<h2 class="title">Hírek</h2>
								</div>                               
							</div>
							<!-- /section title -->
							@for ($i = 0; $i < 2; $i++)
							<!-- Column 1 -->
							<div class="col-md-6 col-sm-6">
								<!-- ARTICLE --> 
								<!-- Ide egy ciklus kéne ami kiveszi az adatbázisból a híreket és megjeleníti --> 
															
								<article class="article">                         ]
									<div class="article-img">
										<a href="#">
											<img src=".{{$articles[$i]->image}}" alt="">
										</a>
										<ul class="article-info">
											<li class="article-type"><i class="fa fa-camera"></i></li>
										</ul>
									</div>
									<div class="article-body">
										<h3 class="article-title"><a href="{{$articles[$i]->name}}"></a></h3>
										<ul class="article-meta">
											<li><i class="fa fa-clock-o"></i> {{$articles[$i]->updated_at}}</li>
										</ul>
										<p>{{$articles[$i]->article_description}}</p>
									</div>
								</article>
								<!-- /ARTICLE -->
							</div>
							@endfor
							<!-- /Column 1 -->
						</div>	
							
						
						<!-- row -->
						<div class="row">
							<!-- Column 1 -->
							@for ($i = 2; $i < 5; $i++)
							<div class="col-md-4 col-sm-4">
								<!-- ARTICLE -->
								<article class="article">
									<div class="article-img">
										<a href="#">
											<img src=".{{$articles[$i]->image}}" alt="">
										</a>
										<ul class="article-info">
											<li class="article-type"><i class="fa fa-file-text"></i></li>
										</ul>
									</div>
									<div class="article-body">
										<h3 class="article-title"><a href="#">{{$articles[$i]->name}}</a></h3>
										<ul class="article-meta">
											<li><i class="fa fa-clock-o"></i> {{$articles[$i]->updated_at}}</li>
										</ul>
										<p>{{$articles[$i]->article_description}}</p>
									</div>
								</article>
								<!-- /ARTICLE -->
							</div>
							@endfor
							<!-- /Column 1 -->
							
						</div>
						<!-- /row -->
					</div>
					<!-- /Main Column -->
					
					<!-- Aside Column -->
						<div class="col-md-4">
											
						<!-- article widget -->
							<div class="widget">
							<div class="widget-title">
								<h2 class="title">Újdonságaink.</h2>
							</div>
							
							<!-- owl carousel 3 -->
							<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
								<!-- ARTICLE -->
								<article class="article">
									<div class="article-img">
										<a href="#">
											<img src="./img/img-md-3.jpg" alt="">
										</a>
										<ul class="article-info">
											<li class="article-type"><i class="fa fa-file-text"></i></li>
										</ul>
									</div>
									<div class="article-body">
										<h4 class="article-title"><a href="#">Duis urbanitas eam in, tempor consequat.</a></h4>
										<ul class="article-meta">
											<li><i class="fa fa-clock-o"></i> January 31, 2017</li>
											<li><i class="fa fa-comments"></i> 33</li>
										</ul>
									</div>
								</article>
								<!-- /ARTICLE -->
								
								<!-- ARTICLE -->
								<article class="article">
									<div class="article-img">
										<a href="#">
											<img src="./img/img-md-4.jpg" alt="">
										</a>
										<ul class="article-info">
											<li class="article-type"><i class="fa fa-file-text"></i></li>
										</ul>
									</div>
									<div class="article-body">
										<h4 class="article-title"><a href="#">Duis urbanitas eam in, tempor consequat.</a></h4>
										<ul class="article-meta">
											<li><i class="fa fa-clock-o"></i> January 31, 2017</li>
											<li><i class="fa fa-comments"></i> 33</li>
										</ul>
									</div>
								</article>
								<!-- /ARTICLE -->
							</div>
							<!-- /owl carousel 3 -->
							
						</div>
						<!-- /article widget -->
						
						<!-- galery widget -->
							<div class="widget galery-widget">
							<div class="widget-title">
								<h2 class="title">Életképek</h2>
							</div>
							<ul>
								<li><a href="#"><img src="./img/img-widget-3.jpg" alt=""></a></li>
								<li><a href="#"><img src="./img/img-widget-4.jpg" alt=""></a></li>
								<li><a href="#"><img src="./img/img-widget-5.jpg" alt=""></a></li>
								<li><a href="#"><img src="./img/img-widget-6.jpg" alt=""></a></li>
								<li><a href="#"><img src="./img/img-widget-7.jpg" alt=""></a></li>
								<li><a href="#"><img src="./img/img-widget-8.jpg" alt=""></a></li>
								<li><a href="#"><img src="./img/img-widget-9.jpg" alt=""></a></li>
								<li><a href="#"><img src="./img/img-widget-10.jpg" alt=""></a></li>
							</ul>
						</div>
						<!-- /galery widget -->
						
						</div>
					<!-- /Aside Column -->
					</div>
				<!-- /ROW -->
				</div>
			<!-- /CONTAINER -->
			</div>
		<!-- /SECTION -->
		
		
		
		<!-- SECTION -->
		<div class="section">
			<!-- CONTAINER -->
			<div class="container">
				<!-- ROW -->
				<div class="row">
					<!-- Main Column -->
					<div class="col-md-12">
						<!-- section title -->
						<div class="section-title">
							<h2 class="title">Népszerű videók</h2>
							<div id="nav-carousel-2" class="custom-owl-nav pull-right"></div>
						</div>
						<!-- /section title -->
						
						<!-- owl carousel 2 -->
						
						<!-- Ez jó lenne ha valami csatornáról szedné a videókat -->
						
						<div id="owl-carousel-2" class="owl-carousel owl-theme">
							
							<object width="370" height="350" data="http://www.youtube.com/v/QzOQhNknUYA" type="application/x-shockwave-flash"><param name="src" value="http://www.youtube.com/v/QzOQhNknUYA" /></object>
							
							<object width="370" height="350" data="http://www.youtube.com/v/qJNohtcAa1Q" type="application/x-shockwave-flash"><param name="src" value="http://www.youtube.com/v/qJNohtcAa1Q" /></object>
							
							<object width="370" height="350" data="http://www.youtube.com/v/qYckjdzjhlI" type="application/x-shockwave-flash"><param name="src" value="http://www.youtube.com/v/qYckjdzjhlI" /></object>
							
							<object width="370" height="350" data="http://www.youtube.com/v/9vdhfEqQU98" type="application/x-shockwave-flash"><param name="src" value="http://www.youtube.com/v/9vdhfEqQU98" /></object>
							
							
						</div>
						<!-- /owl carousel 2 -->
					</div>
					<!-- /Main Column -->
				</div>
				<!-- /ROW -->
			</div>
			<!-- /CONTAINER -->
		</div>
@stop