<section class="projects-overview">

    <div class="grid-row">
        @include('layouts.partials.breadcrumb')

        <div class="overview-placeholder grid-col col-12">

            {{-- Make header and pagination if needed --}}
            <div class="overview-header grid-row full-row">
                <h1 class="grid-col">{{$page->translation->name}}</h1>

                <div class="grid-col pull-right categorie-holder">
                    <ul class="categories">
                        <li>
                            Filter op:
                        </li>
                        @foreach($categories as $category)
                            <li>
                                @if( count($category->translations) && (!empty($category->images)) )

                                    <input type="checkbox" id="{{$category->translations->first()->name}}"
                                           value="{{$category->translations->first()->category_id}}"
                                           @if(!empty($currentCat) && count($currentCat) == 1 && $currentCat == $category->translations->first()->category_id) checked
                                           @endif
                                           @if(!empty($currentCat) && count($currentCat) > 1 && in_array($category->translations->first()->category_id, $currentCat)) checked @endif
                                    />
                                    <label for="{{$category->translations->first()->name}}"><span></span>{{$category->translations->first()->name}}
                                    </label>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                    <br>
                    @if(method_exists($projects, 'links') && $projects->getLastPage() != 1)
                        <div class="pagination">
                            {{$projects->links('layouts.partials.projects.pagination')}}
                        </div>
                    @endif
                </div>
            </div>
        </div>


        {{-- Loop through news for this pagination page--}}
        <div class="grid-row full-row articles">
            @include('layouts.partials.projects.projectsLoop')
        </div>
        @if(method_exists($projects, 'links') && $projects->getLastPage() != 1)
            <br>
            <div class="pagination grid-col col-12">
                {{$projects->links('layouts.partials.projects.pagination')}}
            </div>
        @endif
        <br/>
        <br/>
        <div class="grid-row full-row bottom-categories">
            <div class="grid-col categorie-holder">
                <ul class="categories">
                    <li>
                        Filter op:
                    </li>
                    @foreach($categories as $category)
                        <li>
                            @if( count($category->translations) && (!empty($category->images)) )

                                <input type="checkbox" id="{{$category->translations->first()->name}}"
                                       value="{{$category->translations->first()->category_id}}"
                                       @if(!empty($currentCat) && count($currentCat) == 1 && $currentCat == $category->translations->first()->category_id) checked
                                       @endif
                                       @if(!empty($currentCat) && count($currentCat) > 1 && in_array($category->translations->first()->category_id, $currentCat)) checked @endif
                                />
                                <label for="{{$category->translations->first()->name}}"><span></span>{{$category->translations->first()->name}}
                                </label>
                            @endif
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>

        <div class="grid-row referencesLink">
            <div class="grid-col col-12">
                <a href="/aannemers">Ook voor aannemers</a>
            </div>
        </div>

    </div>

    <div class="project-referenties">
        <div class="grid-row full-row">
            <div class="grid-row">
            <section class="grid-col references-text">
                <h2>Wil jij bij ons komen werken?</h2>
                <a href="/vacatures" class="button blue arrow">Vacatures</a>
            </section>
            <section class="grid-col col-7 references-imgHolder">
                <figure class="large"
                        style="background-image: url('/uploads/images/dynamic/1521803331-large-verhoeven-dakdekkersbedrijf-someren-van-der-weerden-02.jpg');"></figure>
            </section>
            </div>
        </div>
    </div>


</section>

@section('extra-js')
    <script type="text/javascript" src="/js/projects.js"></script>
@endsection