@extends('front.layouts.main')

@section('title', getSiteName())
@section('meta-description', request()->translations['static']['home_meta_description'])
@section('meta-keywords', request()->translations['static']['home_meta_keywords'])
@section('og-type', 'page')
@section('og-url', url()->current())
@section('og-title', getSiteName())
@section('og-description', request()->translations['static']['home_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">{{ request()->translations['static']['home_title'] }}</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) }}" aria-label="{{ $translate[$post->id]['title'] }}">
				<img class="section__video-icon" src="{{ asset('assets/images/app/video-icon.svg') }}" alt="video" />
				<div class="section__video-wrap section__video-wrap--video">
					<video loading="lazy" 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
			<a href="{{  getSiteURL('/' . $post->slug) }}" class="grid__item-image-link" aria-label="{{ $translate[$post->id]['title'] }}">				
				@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 loading="lazy" width="{{ $sizes['width'] }}" height="{{ $sizes['height'] }}" class="grid__item-image @if($post->desaturate) img__desaturate @endif" src="{{ $img }}" alt="" />
							@else
								@php($img = resizeImage('news/' . $post->id . '/', $post->image, 306, 382, 'resize'))
								@php($sizes = getImageRealSize('news/' . $post->id . '/', $post->image, 306, 382, 'resize'))
								<img loading="lazy" width="{{ $sizes['width'] }}" height="{{ $sizes['height'] }}" class="grid__item-image @if($post->desaturate) img__desaturate @endif" src="{{ $img }}" alt="" />
							@endif
			</a>
			@endif
			<span class="grid__item-hash notranslate">{!! buildTags(!empty($post->getNewsInfoByLocale('en')->tags) ? $post->getNewsInfoByLocale('en')->tags : '') !!}</span>
			<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