@extends("main")
@setmenu("product")
@section('metaTags')
    @pageTitle(seoTitle($datum->meta,$datum->{'name_'._clang()}))
    @pageDescription(seoDescription($datum->meta,$datum->{'content_'._clang()}))
    @pageImage($datum->getCover())
@endsection
@section("content")
    <div class="product-hero">
        <div class="wrap">

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

            <div class="page-title tac"><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

            @if($datum->content)
                <div class="product-about top-50">

                    {!! $datum->content !!}

                </div>
            @endif

            @if($datum->images)
                <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>

    {{--<div class="w100">
        <div class="page-title space-bottom tac"><strong>Diğer Ürünler</strong></div>
        <div class="slider-home-wrap">
            <div class="slider-home">
                <div class="slider-home-item">
                    <div class="item-in">
                        <a href="product-detail.html" class="product-item">
                            <picture><img src="trash/products/soslar/01.png" alt=""/></picture>
                            <strong>Ketçap</strong>
                        </a>
                    </div>
                </div>
                <div class="slider-home-item">
                    <div class="item-in">
                        <a href="product-detail.html" class="product-item">
                            <picture><img src="trash/products/soslar/02.png" alt=""/></picture>
                            <strong>Mayonez</strong>
                        </a>
                    </div>
                </div>
                <div class="slider-home-item">
                    <div class="item-in">
                        <a href="product-detail.html" class="product-item">
                            <picture><img src="trash/products/soslar/03.png" alt=""/></picture>
                            <strong>Meksika Sos</strong>
                        </a>
                    </div>
                </div>
                <div class="slider-home-item">
                    <div class="item-in">
                        <a href="product-detail.html" class="product-item">
                            <picture><img src="trash/products/soslar/04.png" alt=""/></picture>
                            <strong>Napoliten Sos</strong>
                        </a>
                    </div>
                </div>
                <div class="slider-home-item">
                    <div class="item-in">
                        <a href="product-detail.html" class="product-item">
                            <picture><img src="trash/products/soslar/05.png" alt=""/></picture>
                            <strong>Pesto Sos</strong>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>--}}
@endsection