@extends('front.layouts.main')

@section('title',  $translate['info']['meta_title'] . ' | ' . getSiteName())
@section('meta-description', $translate['info']['meta_description'])
@section('meta-keywords', $translate['info']['meta_keywords'])
@section('og-type', 'page')
@section('og-url', url()->current())
@section('og-title', $translate['info']['meta_title'] . ' | ' . getSiteName())
@section('og-description', $translate['info']['meta_description'])
@section('og-image', asset('assets/images/app/og-image-new.png'))

@section('preloader')
    <img class="loader loader--big loader--all-news" src="{{ asset('assets/images/app/spinner.svg') }}" alt="" width="120" height="120" />
@endsection
@section('preloader-sclass', 'section--all-news')

@section('content')
    <div class="container section__container section__container--all-news">
        <h1 class="title title--all-news">{{ $translate['info']['seo_h1'] }}</h1>
        <div class="grid">
            <div class="grid__sizer"></div>
            <div class="grid__gutter"></div>
			@php($i=0)
            @foreach($posts as $post)
                <div class="grid__item">
                    @if($post->preview_type)
						<a href="{{ getSiteURL('/' . $post->slug) }}">
							<img class="section__video-icon" src="{{ asset('assets/images/app/video-icon.svg') }}" />
							<div class="section__video-wrap section__video-wrap--video">
								<video
									src="{{ asset('storage/uploads/news/' . $post->id . '/' . $post->video_preview)}}"
									class="section__video-file"
									width="306"
									height="{{ $post->video_preview_ratio ? round(306/$post->video_preview_ratio) : 306 }}"
									muted
									playsinline
								></video>
							</div>
						</a>
				   @else
                        @if($post->image)
                           <a href="{{  getSiteURL('/' . $post->slug) }}" class="grid__item-image-link">                              
							@if($post->position)
								@php($img = resizeImage('news/' . $post->id . '/', $post->image, 306, 246, 'resize'))
								@php($sizes = getImageRealSize('news/' . $post->id . '/', $post->image, 306, 246, 'resize'))
								<img width="{{ $sizes['width'] }}" height="{{ $sizes['height'] }}" class="grid__item-image @if($post->desaturate) img__desaturate @endif" src="{{ $img }}" alt="" width="306" height="246" />
							@else
								@php($img = resizeImage('news/' . $post->id . '/', $post->image, 306, 382, 'resize'))
								@php($sizes = getImageRealSize('news/' . $post->id . '/', $post->image, 306, 382, 'resize'))
								<img width="{{ $sizes['width'] }}" height="{{ $sizes['height'] }}" class="grid__item-image @if($post->desaturate) img__desaturate @endif" src="{{ $img }}" alt="" width="306" height="382" />
							@endif
                            </a>
                        @endif
                    @endif
                    @if($post->getNewsInfoByLocale('en')->tags)
                        <span class="grid__item-hash notranslate">{!! buildTags(!empty($post->getNewsInfoByLocale()->tags) ? $post->getNewsInfoByLocale()->tags : '') !!}</span>
                    @endif
					<a href="{{ getSiteURL('/' . $post->slug) }}" class="grid__item-link">{{ $translate[$post->id]['title'] }}</a>
                </div>
				@php($i++)
				@if(isset($banners[$i]))
					@foreach($banners[$i] as $banner)
						 <div class="grid__item">
							<a href="{{  $banner['link'] }}" class="grid__item-image-link">
								<img class="grid__item-image" src="{{  $banner['img'] }}" alt="" />
							</a>
						 </div>
					@endforeach
				@endif
            @endforeach
        </div>
        <div class="section__observable-block"></div>
    </div>
@endsection