@extends('site.master')

@section('title', $page->translation->meta_title)
@section('meta_description', $page->translation->meta_description)

@section('content')
    <section class="content">
        <div class="grid-row refHeader">
            <h3 class="grid-col">Onze klanten</h3>
        </div>
        <div class="grid-row refBlock">
            <div class="grid-col left">
                <ul class="refs">
                    @foreach($subPages as $key => $subPage)
                        @if($subPage->active)
                            <li class="ref-{{$subPage->code_name}} {{$key == 0 ? 'active ': ''}}"
                                data-ref-id="{{$key}}">
                                <span class="ref-holder"></span>
                            </li>
                        @endif
                    @endforeach
                </ul>
            </div>
            <div class="grid-col right">
                @foreach($subPages as $key => $subPage)
                    @if($subPage->active)
                        <div class="grid-row refItem {{$key == 0 ? 'active ': ''}}" id="refItem-{{$key}}">
                            <div class="grid-col quoteHolder">
                                @foreach(json_decode($subPage->translation->description) as $blockkey => $block)
                                    <div class="quote {{$key == 0 &&  $blockkey == 0 ? 'active' : ''}}">
                                        <h2>{{$block->typeName}}</h2>
                                        <blockquote>{!! $block->description  !!}</blockquote>
                                    </div>
                                @endforeach
                            </div>
                            <div class="grid-col imgHolder" style="
                            @if(count($subPage->images) > 0)
                                    background-image: url('{{$subPage->images[0]->large_image_url}}')
                            @else
                                    background-color: #eeeeee;
                            @endif
                                    "></div>
                            </a>
                        </div>
                    @endif
                @endforeach
            </div>

        </div>
    </section>
@endsection