@extends('site.master', [ 'headerIsLight' => true ])

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

@section('content')
    <div class="c-body">

        @include('site.organisms.componentables.textImage', [
        'component' => (object)[
            'reversed' => false,
            'gradient' => true,
            'corners' => false,
            'text' => '<h1>'.$page->translation->header_title.'</h1>'.$page->translation->header_description,
            'image' => $page->images,
            'button_link' => '#more',
            'button_label' => $page->translation->header_button_label,
        ],
        'loop' => (object)[
            'iteration' => -1,
        ]])

        <div class="l-contain  o-block o-block-bg o-block-grey">
            <div class="o-project-grid">
                <h2 class="on-light" id="more">@lang('site/projects.most_recent')</h2>
                <div class="c-project-grid">
                    @if(count($projects) > 0)
                        @foreach($projects as $project)

                            <a class="c-project-grid__item"
                               href="{{$links->projects->route}}/{{$project->translation->slug}}">
                                @if(isset($project->images) && $project->images->count() != 0)
                                    <div class="c-project-grid__image"
                                         style="background-image: url('{{$project->images->first()->medium_image_url}}');"></div>
                                @else
                                    <div class="c-project-grid__image"></div>
                                @endif
                                <p class="c-project-grid__body">
                                    <span class="c-project-grid__name">{{ $project->translation->name }}</span>
                                </p>
                            </a>

                        @endforeach

                    @else

                        <div class="u-text-align-center">
                            <h3 class="u-color-secondary">@lang('site/projects.no_projects')</h3>
                        </div>

                    @endif

                </div>
            </div>
        </div>

        <div class="o-block o-block-bg o-block-white">
            @include('site.components.ctaPerson')
        </div>

    </div>
@endsection