@extends('site.master')

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

@section('hero-body')
    @include('site.components.heroHeading', [
               'heroHeadingTitle' => ( !empty($page->translation->visual_name) ? $page->translation->visual_name : $page->translation->name),
               'heroHeadingSubTitle' => $page->translation->description,
               'modifiers' => ['large']
           ])
@endsection

@section('content')

    <div class="t-webinars  @if($trainings->currentPage() !== 1) t-webinars--sub @endif">

        @if($trainings->currentPage() === 1)
            <div class="l-grid">
                <div>

                    @if($page->languageImages() !== null)
                        <div class="t-webinars__image">
                            @include('site.components.image', [
                                'images' => $page->languageImages()
                            ])
                        </div>
                    @endif

                    <div class="t-webinars__heading">
                        @include('site.components.heading', [
                            'headingType' => 'h1',
                            'headingTitle' => $page->translation->visual_name,
                            'headingSubTitle' => $page->translation->description
                        ])
                    </div>

                </div>
            </div>

            <div class="t-webinars__body  o-blocks">
                @include('site.organisms.components')
            </div>
        @endif

        <div class="t-webinars__main l-grid">
            <div>
                <h2 class="t-webinars__title">@lang('site/global.services')</h2>
                <div class="t-webinars__items  l-matrix @if($serviceCount < 3) l-matrix--half @endif" style="display: flex;">
                    @foreach($trainings as $training)
                        @if($training->training_type !== 1) @continue; @endif
                            <div class="l-matrix__item">
                            <a href="/{{$links->trainings->route}}/{{$training->translation->slug}}" style="text-decoration: none; color: inherit;">
                                <div class="c-card  c-card--shadow">

                                    @if($training->languageImages() !== null)
                                        <div class="c-card__image">
                                            <div class="c-card__img" style="background-image: url('{{ str_replace('\\', '/', $training->languageImages()->first()->medium_image_url) }}');"></div>
                                            {{--                                    <img alt="{{ $webinar->languageImages()->first()->name }}" src="{{ $webinar->languageImages()->first()->medium_image_url }}" />--}}
                                        </div>
                                    @endif

                                    <div class="c-card__body">
                                        <h4 class="c-card__title">{{ $training->translation->name }}</h4>
                                        <div class="c-card__description c-card__description--large">
                                            {!! $training->translation->meta_description !!}
                                        </div>

{{--                                        <div class="c-card__action">--}}
{{--                                            <a class="c-text-button  c-text-button--icon " href="/{{$links->trainings->route}}/{{$training->translation->slug}}">--}}
{{--                                                <span class="c-text-button__text">@lang('site/global.readMore')</span>--}}
{{--                                                <i class="c-text-button__icon">@include('site.components.icons.longArrow')</i>--}}
{{--                                            </a>--}}
{{--                                        </div>--}}
                                    </div>
                                </div>
                            </a>
                        </div>
                @endforeach
                </div>

            </div>
        </div>

            <div class="t-webinars__main l-grid">

                <div>
                    <h2 class="t-webinars__title">@lang('site/global.trainings')</h2>
                    <div class="t-webinars__items  l-matrix @if($trainingCount < 3) l-matrix--half @endif" style="display: flex;">
                        @foreach($trainings as $training)
                            @if($training->training_type !== 0) @continue; @endif
                            <div class="l-matrix__item">
                                <a href="/{{$links->trainings->route}}/{{$training->translation->slug}}" style="text-decoration: none; color: inherit;">
                                    <div class="c-card  c-card--shadow">

                                        @if($training->languageImages() !== null)
                                            <div class="c-card__image">
                                                <div class="c-card__img" style="background-image: url('{{ str_replace('\\', '/', $training->languageImages()->first()->medium_image_url) }}');"></div>
                                                {{--                                    <img alt="{{ $webinar->languageImages()->first()->name }}" src="{{ $webinar->languageImages()->first()->medium_image_url }}" />--}}
                                            </div>
                                        @endif

                                        <div class="c-card__body">
                                            <h4 class="c-card__title">{{ $training->translation->name }}</h4>
                                            <div class="c-card__description c-card__description--large">
                                                {!! $training->translation->meta_description !!}
                                            </div>

{{--                                            <div class="c-card__action">--}}
{{--                                                <a class="c-text-button  c-text-button--icon " href="/{{$links->trainings->route}}/{{$training->translation->slug}}">--}}
{{--                                                    <span class="c-text-button__text">@lang('site/global.readMore')</span>--}}
{{--                                                    <i class="c-text-button__icon">@include('site.components.icons.longArrow')</i>--}}
{{--                                                </a>--}}
{{--                                            </div>--}}
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>

                </div>
            </div>

    </div>
@endsection