@extends('layouts.master')

@section('editable_content')

    <div class="after-menu">

        <header id="top">
        <span class="overlay animation-part">
        </span>

            <div class="grid-row">
                <section class="content grid-col col-6">
                    <span class="content-overlay animation-part"></span>

                    <figure class="home-logo">
                        <a href="/">
                            <img alt="logo" src="/img/logo.svg">
                        </a>
                    </figure>

                    <h1>{{$page->translation->title}}</h1>
                    <div class="text">
                        {{$page->translation->description}}
                    </div>

                    <a class="button" href="/{{$links->about->route}}">{{$page->translation->button}}</a>

                    <a href="#block-1" class="scroll-down internalLink"></a>
                </section>
            </div>

            <figure class="header-image">
                @if(isset($page->images) && $page->images->count() != 0)
                    <span class="large"
                          style="background-image: url('{{$page->images->first()->large_image_url}}')"></span>
                    <span class="medium"
                          style="background-image: url('{{$page->images->first()->medium_image_url}}')"></span>
                    <span class="small"
                          style="background-image: url('{{$page->images->first()->small_image_url}}')"></span>
                @endif
            </figure>

        </header>

        @include('layouts.partials.homeRow')

        @include('layouts.partials.home.discover')

        <section class="home-blog-post">
            <div class="grid-row">
                <h3>@lang('translations.lastBlogPost')</h3>
                @include('layouts.partials.posts.eloquentPost', ['post' => $post->first()])

                <a class="posts-button" href="/{{$links->blog->route}}">@lang('translations.showAllBlogPosts')</a>

            </div>
        </section>

        @include('layouts.partials.home.contactRow')

        <a href="#top" class="internalLink return-top">
            @lang('translations.returnTo')
        </a>

    </div>

@endsection

@section('extra-js')
    <script>
        $(function () {
            $('.discover-blocks .block a').mouseenter(function(){
               $('.discover-blocks .block a.last-hover').removeClass('last-hover');
               $(this).addClass('last-hover');
            });
        });
    </script>
@endsection