@extends("main")
@setmenu("sauce")
@section('metaTags')
    @pageTitle(seoTitle($datum->meta,$datum->{'name_'._clang()}))
    @pageDescription(seoDescription($datum->meta,$datum->{'content_'._clang()}))
    @pageImage($datum->getCover())
@endsection
@section("content")
    <div class="category-page category-sauce product-sauce bottom-150">
        <div class="category-sauce-bg"><img src="{{ str_replace("\\", "/", $datum->getMini1()) }}" alt=""/></div>

        <div class="product-hero">
            <div class="wrap">

                <div class="product-hero-in">
                    <div class="product-hero-picture"><img src="{{ str_replace("\\", "/", $datum->getCover()) }}"
                                                           alt=""/></div>
                    @if($datum->features->count() > 0)
                        <div class="product-hero-highlights">
                            <div class="vertical-out">
                                <div class="vertical-in">
                                    <ul>
                                        @foreach($datum->features as $feature)
                                            <li>
                                                <picture><img src="{{ str_replace("\\", "/", $feature->getPhoto()) }}"
                                                              alt=""/></picture>
                                                <section><small>{{ $feature->name }}</small></section>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>

                <div class="page-title tac text-white"><strong>{{ $datum->name }}</strong></div>
                <div class="page-text space-top tac">{!! $datum->spot !!}</div>

            </div>
        </div>

        <div class="w100">

            <div class="wrap">

                @if($datum->youtube_link)
                    <div class="product-video">
                        <img src="{{ asset('images/product-video.png') }}" alt=""/>
                        <iframe width="100%" height="100%" src="{!! $datum->youtube_link !!}"
                                title="YouTube video player" frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                allowfullscreen></iframe>
                    </div>
                @endif

                <div class="product-about top-50">

                    {!! $datum->content !!}

                </div>

                @if($datum->images->count() > 0)
                    <div class="gallery bottom-50">
                        <div class="inner-5">
                            <ul>
                                @foreach($datum->images as $image)
                                    <li>
                                        <a class="fancybox" data-fancybox="porsion-gallery"
                                           href="{{ str_replace("\\", "/", $image->url()) }}">
                                            <section>
                                                <picture
                                                        style="background-image:url({{ str_replace("\\", "/", $image->url()) }});">
                                                    <img
                                                            src="{{ asset("images/for-gallery.png") }}" alt=""/>
                                                </picture>
                                            </section>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif

            </div>
        </div>


        @if($others->count() > 0)
            <div class="w100">
                <div class="page-title space-bottom tac text-white"><strong>{{ trans('products.others') }}</strong>
                </div>
                <div class="slider-home-wrap">
                    <div class="slider-home">
                        @foreach($others as $other)
                            <div class="slider-home-item">
                                <div class="item-in">
                                    <a href="{{ route("front.product", ['category_slug' => $other->saucecategory->slug, 'slug' => $other->slug]) }}"
                                       class="product-item">
                                        <picture><img src="{{ str_replace("\\", "/", $other->getCover()) }}" alt=""/>
                                        </picture>
                                        <strong>{{ $other->name }}</strong>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection