@extends('layouts.base')

@section('navigationBar')
    @parent
    @if($data->socialMedia)
        @include('layouts.partials.socialMedia')
    @endif
@endsection

@section('pageHeader')
    @include('layouts.partials.mainHeader')
@stop

@section('content-block1')
    <section class="content-block1 row blog-info @if(isset($data->firstPage)&&$data->firstPage) homeBlog  @endif">
        @include('layouts.partials.contentblocks.breadcrumb')
        <article class="span8">
            <header>
                <h2>Over dit blog</h2>

                <p>
                    {{$data->content['text']}}
                </p>
            </header>
        </article>

    </section>
@stop

@section('subContent')
    <section
            class="content-red-block row blog-articles @if(isset($data->firstPage)&&$data->firstPage) homeBlog  @endif">
        <div class="background-container">
            @if(isset($data->firstPage)&&$data->firstPage)

                @for($i=0; $i <= sizeof($data->blogArticles)-2; $i++)
                    <div class="background-article"></div>
                @endfor
            @else
                @for($i=0; $i <= sizeof($data->blogArticles)-1; $i++)
                    <div class="background-article"></div>
                @endfor
            @endif
        </div>
        <div class="articles-block">

            @if(isset($data->firstPage)&&$data->firstPage)
                <article class="latestArticle article span12"><a href="{{$data->blogArticles[0]->route}}">
                        <div class="article-image span8"
                             style="background-image: url('{{$data->blogArticles[0]->img}}');">
                        </div>
                        <div class="article-content span4">
                            @if(isset($data->blogArticles[0]->date))
                                <span class="date">{{$data->blogArticles[0]->date}}</span>
                            @endif
                            <div class="article-wrapper">
                                <h4>{{$data->blogArticles[0]->header}}</h4>

                                <p>{{$data->blogArticles[0]->teaser}}</p>

                            </div>
                            <div class="icon-wrapper"><span class="icon"></span></div>
                            <span class="more">Lees meer</span>
                        </div>
                    </a>
                </article>

                <?php unset($data->blogArticles[0]); ?>
            @endif


            @foreach($data->blogArticles as $article)
                <article class="article"><a href="{{$article->route}}">
                        <div class="article-image span6" style="background-image: url('{{$article->img}}');">
                        </div>
                        <div class="article-content span6">
                            @if(isset($article->date))
                                <span class="date">{{$article->date}}</span>
                            @endif
                            <div class="article-wrapper">
                                <h4>{{$article->header}}</h4>

                                <p>{{$article->teaser}}</p>
                            </div>
                            <div class="icon-wrapper"><span class="icon"></span></div>
                            <div class="article-hover"></div>
                        </div>
                    </a>
                </article>
            @endforeach

        </div>
        <div class="pagination">
            <ul>

                <li class="previous @if($data->pagination==1) hide @endif"><a
                            href="/blog/{{$data->pagination-1}}"><span></span>vorige pagina</a></li>

                <div class="main-paginations">
                    <li class="paginations @if($data->pagination == 1)active @endif"><a href="/blog">1</a></li>

                    <?php
                    $amountOfPagination = ceil(($data->amountOfItems - 4) / 5) + 1;
                    for ($i = 1; $i != ($amountOfPagination); $i++)
                    {
                    ?>
                    <li class="paginations @if($data->pagination == ($i+1))active @endif"><a
                                href="/blog/<?php echo($i + 1);?>"> <?php echo($i + 1);?> </a></li>
                    <?php
                    }
                    ?>
                </div>
                <li class="next @if($data->pagination==$amountOfPagination) hide @endif"><a
                            href="/blog/{{$data->pagination+1}}">volgende pagina<span></span></a></li>
            </ul>
        </div>
    </section>
@endsection

@section('extraJavascript')
    <script>
        $('.article.latestArticle').height(($('.latestArticle .article-image').width()));
    </script>
@endsection