@extends('master')

@section('title', $product->translation->name . ' | ' . $page->translation->meta_title)
@section('meta_description', $product->translation->meta_description)

@section('content')
    <div class="l-body  l-body--rounded-tr">
        <div class="l-block  l-contain  u-spacing-pt5">
            <div class="u-spacing-pb5">
                @include('components.breadcrumb', [ 'breadcrumbNameOverrule' => [ 3 => $product->translation->name]])
            </div>

            <div class="o-details">
                <div class="o-details__main">
                    <h2 class="o-details__title  c-page-title" data-kal="slide-left">{{$product->translation->name}}</h2>
                    <div class="o-details__desc" data-kal="slide-right">
                        {!! $product->translation->description !!}
                    </div>
                    @if($product->translation->hasTabs())
                        <div class="o-details__tabs" data-kal="slide-up">
                            @include('components.tabs',[
                                'tabs' => $product->translation->getTabs()
                            ])
                        </div>
                    @endif
                </div>

                <div class="o-details__side" data-kal="zoom-out-right-top">
                    @if($product->translation->hasUsp())
                        @include('components.uspBlock', [
                            'uspItems' => $product->translation->getUsp()
                        ])
                    @endif

                    @if($product->intake_cta && isset($links->intake))
                        @include('components.ctaBlock', [ 'ctaButton1Link' => $links->intake->route, 'ctaButton1Text' => __('site/global.cta.buttonText1') ])
                    @else
                        @include('components.ctaBlock')
                    @endif
                </div>
            </div>
        </div>

        <div class="l-block">

            @if(isset($product->banner))
                <picture class="o-page-wide-photo  o-page-wide-photo--pull-bottom-up">
                    <source media="(min-width: 1100px)" srcset="{{ $product->banner->large_image_url }}">
                    <img class="o-page-wide-photo__img" alt="{{ $product->banner->name }}" src="{{ $product->banner->medium_image_url }}" data-kal="photo-zoom-out">
                </picture>
            @endif

{{--            @include('organisms.pageWidePhoto', ['modifiers' => 'pull-bottom-up', 'photoUrl'=>'/img/banners/product_' . $product->id . '.jpg'])--}}

            <div class="l-contain">
                @include('organisms.cta', [
                    'ctaTitle' => __('site/products.cta.title'),
                    'ctaButtonText1' => __('site/global.cta.buttonText1'),
                    'ctaButtonText2' => __('site/global.cta.buttonText2'),
                ])
            </div>
        </div>

        <div class="l-block  l-contain">
            @include('organisms.productGrid', ['products' => $products])
        </div>

    </div>
@endsection