@extends('layouts.app')

@section('head-title')
    <title>Covet Foundation Gallery</title>
@endsection

@section('head-style')
@endsection

@section('content')
<div id="news">
	<!-- Modal -->
	<div class="modal fade" id="issuu-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-body">

				</div>
			</div>
		</div>
	</div>
	<section id="first-section">
		<div class="container">
			<div class="row">
				@foreach ($news_items[0]->articles as $item)
				@if ($item->is_active == 1)
					<!-- @if ($loop->last)
						<div class="clearfix"></div>
					@endif -->
					<div class="col-xs-12 col-sm-{{ $item->cols }} news-item">
						<a href="#" title="">
							<img src="/imgs/news/{{ $item->slug }}.jpg" alt="" class="img-responsive">
							<div class="news-item-text">
								<p class="text-muted">{{ date('M Y', strtotime( $item->date )) }}</p>
								<h4><strong>{{ $item->article_languages[0]->title  }}</strong></h4>
								<p><strong>{{ $item->article_languages[0]->sub_title }}</strong></p>
							</div>
						</a>
					</div>
				@else
				@endif
				@endforeach
		    </div>
		</div>
	</section>
</div>
@endsection

@section('foot')
	<script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
    		$('.news-item a').on('click', function(event) {
    			event.preventDefault();
    			$('#issuu-modal .modal-body .issuuembed').remove();
    			var issuu = $(this).attr('data-issuu');
    			$('#issuu-modal .modal-body').append('<div data-configid="'+issuu+'" style="width:100%; height:500px;" class="issuuembed"></div>');
    			window.IssuuReaders.add();
    		});
    	});
    </script>
@endsection