<div class="filter-row project-filter">
    <div class="content-container">
        <p>@lang('translations.filter'):</p>
        <ul class="filters">
            <li><p><a href="/projecten">Bekijk alle Projecten</a></p></li>
            @foreach($categories as $category)
                <li id="{{Str::slug($category->name)}}"><a
                            href="/projecten/{{Str::slug($category->name)}}"><span>#</span><p>{{$category->name}}</p></a></li>
            @endforeach
        </ul>
        <div class="clear"></div>
    </div>
</div>

<div class="project-page">
    @if(isset($data->content->header_image) && $data->content->header_image != '')
        <div class="grid12 header-container">
            <img alt="headerfoto" src="{{$data->content->header_image->original_image_url}}"/>
        </div>
        <div class="clear"></div>
    @endif
    <div class="content-container  @if(!isset($data->content->header_image)) extra-padding @endif">
        <div class="left-column grid6">

            @if(isset($data->content->images->lft[0]))
                <div class="photo-container @if(rand(0, 1) == 1) animateL @else animateB @endif ">
                    <img alt="foto1" src="{{$data->content->images->lft[0]->large_image_url}}"/>
                </div>
            @endif

            @if(isset($data->content->images->lft[1]))
                <div class="photo-container @if(rand(0, 1) == 1) animateL @else animateB @endif ">
                    <img alt="foto3" src="{{$data->content->images->lft[1]->large_image_url}}"/>
                </div>
            @endif


            @for($i = 2; $i <= sizeof($data->content->images->lft)-1; $i++)
                @if(isset($data->content->images->lft[$i]))
                    <div class="photo-container @if(rand(0, 1) == 1) animateL @else animateB @endif ">
                        <img alt="foto{{$i}}" src="{{$data->content->images->lft[$i]->large_image_url}}"/>
                    </div>
                @endif
            @endfor


        </div>

        <div class="right-column grid6">
            <div class="info">
                <div class="inner">
                    <h1>{{$data->content->name}}</h1>
                    {{--<ul>--}}

                        {{--@foreach($data->content->category as $category)--}}
                            {{--<li>{{$category->name}}</li>--}}
                        {{--@endforeach--}}
                    {{--</ul>--}}
                    {{$data->content->description}}
                </div>
            </div>
            @if(isset($data->content->images->rgt[0]))
                <div class="photo-container @if(rand(0, 1) == 1) animateL @else animateB @endif ">
                    <img alt="foto2" src="{{$data->content->images->rgt[0]->large_image_url}}"/>
                </div>
            @endif

            @if(isset($data->content->reference) && isset($data->content->author) && $data->content->author !='' && $data->content->reference !='')
                <blockquote class="quote-container">
                    <div>
                        {{$data->content->reference}}
                        <p class="author">{{$data->content->author}}</p>
                    </div>
                </blockquote>
            @endif

            @for($i = 1; $i <= sizeof($data->content->images->rgt)-1; $i++)
                @if(isset($data->content->images->rgt[$i]))
                    <div class="photo-container @if(rand(0, 1) == 1) animateL @else animateB @endif ">
                        <img alt="foto{{$i}}" src="{{$data->content->images->rgt[$i]->large_image_url}}"/>
                    </div>
                @endif
            @endfor


        </div>
        <div class="mobile-project">
            <div class="info">
                <div class="inner">
                    <h1>{{$data->content->name}}</h1>
                    {{--<ul>--}}
                        {{--@foreach($data->content->category as $category)--}}
                            {{--<li>{{$category->name}}</li>--}}
                        {{--@endforeach--}}
                    {{--</ul>--}}
                    {{$data->content->description}}
                </div>
            </div>


            @foreach($data->content->images->lft as $m_image)
                <div class="photo-container @if(rand(0, 1) == 1) animateL @else animateB @endif ">
                    <img alt="foto" src="{{$m_image->large_image_url}}"/>
                </div>
            @endforeach
            {{--@if(isset($data->content->images->lft[0]))
                <div class="photo-container @if(rand(0, 1) == 1) animateL @else animateB @endif ">
                    <img alt="foto1" src="{{$data->content->images->lft[0]->large_image_url}}"/>
                </div>
            @endif

            @if(isset($data->content->images->lft[1]))
                <div class="photo-container @if(rand(0, 1) == 1) animateL @else animateB @endif ">
                    <img alt="foto2" src="{{$data->content->images->lft[1]->large_image_url}}"/>
                </div>
            @endif--}}

            @if(isset($data->content->reference) && isset($data->content->author) && $data->content->author !='' && $data->content->reference !='')
                <blockquote class="quote-container">
                    <div>
                        {{$data->content->reference}}
                        <p class="author">{{$data->content->author}}</p>
                    </div>
                </blockquote>
            @endif

            @foreach($data->content->images->rgt as $m_image)
                <div class="photo-container @if(rand(0, 1) == 1) animateL @else animateB @endif ">
                    <img alt="foto" src="{{$m_image->large_image_url}}"/>
                </div>
            @endforeach

            {{--@if(isset($data->content->images->rgt[0]))
                <div class="photo-container @if(rand(0, 1) == 1) animateL @else animateB @endif ">
                    <img alt="foto2" src="{{$data->content->images->rgt[0]->large_image_url}}"/>
                </div>
            @endif
            @if(isset($data->content->images->rgt[1]))
                <div class="photo-container @if(rand(0, 1) == 1) animateL @else animateB @endif ">
                    <img alt="foto2" src="{{$data->content->images->rgt[1]->large_image_url}}"/>
                </div>
            @endif--}}


        </div>

        <div class="clear"></div>
    </div>
    <hr>
</div>