@extends('layouts.master')

@section('editable_content')

    <div class="grid-row full-row image-header">
        @if(isset($page->images[0]))
            <figure class="image-header-content" style="background-image: url('{{ $page->images[0]->original_image_url }}')"></figure>
        @else
            <figure class="image-header-content" style="background-image: url('/img/structure/fallback/fallback.jpg')"></figure>
        @endif

        <div class="wave">
            <img src="/img/structure/wave-reversed.svg" alt="Wave">
        </div>
    </div>

    <div class="grid-row page-header">
        <div class="grid-col col-12">
            <div class="page-header-wrapper">
                <h1>@lang('translations.news')</h1>
                <p>@lang('translations.currentNewsItems')</p>
            </div>
        </div>
    </div>

    @foreach($posts as $key => $post)

        @if($key % 2 == 0)
            <div class="grid-row newsItem-block">
                <div class="grid-col col-4 col-sm-12 content-image">
                    @if(!empty($post->medium_image_url))
                        <a href="/{{$post->route}}"><img src="{{$post->medium_image_url}}" alt=""></a>
                    @endif
                </div>
                <div class="grid-col col-8 col-sm-12 content-description">

                    <a href="/{{$post->route}}"><h2>{{$post->name}}</h2></a>

                    <span class="date">{{ $post->date }}</span>

                    @if(strlen($post->description) >= 255)
                        {{substr($post->description, 0, 255) . '...';}}
                    @else
                        {{$post->description}}
                    @endif
                    <br />

                    <a href="/{{$post->route}}">@lang('translations.readMore')</a>

                </div>
            </div>
        @else
            <div class="grid-row newsItem-block blue-bg">
                <div class="grid-col col-4 col-sm-12 content-image">
                    <a href="/{{$post->route}}"><img src="{{$post->medium_image_url}}" alt=""></a>
                </div>
                <div class="grid-col col-8 col-sm-12 content-description">

                    <a href="/{{$post->route}}"><h2>{{$post->name}}</h2></a>

                    <span class="date">{{ $post->date }}</span>

                    @if(strlen($post->description) >= 255)
                        {{substr($post->description, 0, 255) . '...';}}
                    @else
                        {{$post->description}}
                    @endif
                    <br />

                    <a href="/{{$post->route}}">@lang('translations.readMore')</a>

                </div>
            </div>
        @endif


    @endforeach




@endsection