<div class="part-detail">
    <div class="styling-block first">
        <div class="left"></div>
        <div class="right"></div>
    </div>

    <section class="part-information">
        <div class="content-container">
            {{--@include('layouts.partials.breadcrumb')--}}
            <div class="part-info">
                <h1 class="main-title">{{$data->translation->title}}</h1>

                @if($data->images->count() != 0 || $data->video != '')
                    <div class="images">
                        <div class="main-block">
                            @if($data->video != '')
                                <div class="video-wrapper">
                                    <div id="ytplayer"></div>
                                </div>
                            @endif
                            <div class="main-block-wrapper @if($data->video != '') inactive @endif">
                                <div class="main-block-content">
                                    @foreach($data->images as $key => $image)
                                        <a href="{{$image->large_image_url}}" data-lightbox="opel">
                                            <span data-image="{{$key}}"
                                                  class="large @if($image == $data->images->first()) active @endif"
                                                  style="background-image: url('{{$image->large_image_url}}');"></span>
                                            <span data-image="{{$key}}"
                                                  class="medium @if($image == $data->images->first()) active @endif"
                                                  style="background-image: url('{{$image->medium_image_url}}');"></span>
                                        </a>
                                    @endforeach
                                </div>

                            </div>
                        </div>
                        <div class="image-nav">
                            @if($data->video != '')
                                <div data-nav="video" class="video-item item active">
                                    <div class="wrapper">
                                        <span style="background-image: url('https://img.youtube.com/vi/{{$data->video}}/mqdefault.jpg');"></span>
                                    </div>
                                </div>
                            @endif
                            @foreach($data->images as $key => $image)
                                <div data-nav="{{$key}}"
                                     class="item @if($data->video == '' && $image == $data->images->first()) active @endif">
                                    <div class="wrapper">
                                        <span style="background-image: url('{{$image->medium_image_url}}');"></span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
                <div class="content  @if($data->images->count() == 0 && $data->video == '') full-width @endif">
                    <h1>{{$data->translation->title}}</h1>
                    <ul class="list">
                        @if($data->price != '0')
                            <li class="price @if( ! $data->sold_state) sold @endif">
                                <div class="background"></div>
                                @if($data->sold_state)
                                    <p class="inner">
                                        €{{$data->price}}
                                    </p>
                                @endif
                            </li>
                        @endif
                        <li class="mobile-nav"><strong>@lang('translations.price'):</strong>€{{$data->price}}</li>
                        <li><strong>@lang('translations.type'):</strong>@lang('parts.id-'.$data->partType)</li>
                        @if(!( sizeof($data->kapitanTypes) == 1) && ( !isset($data->activeOtherParts)) )
                            <li><strong>@lang('translations.kapitanType')
                                    :</strong> @foreach($data->kapitanTypes as $kapitanType)@if( ! in_array($kapitanType, ['other_1', 'other_2', 'other_3']))@lang('parts.kapitan_'.$kapitanType)
                                ,&nbsp;&nbsp;@endif @endforeach
                            </li>
                        @endif
                        <li><strong>@lang('translations.state'):</strong>@lang('parts.state-'.$data->state)</li>
                        @if($data->uniqueNr != '')
                            <li><strong>@lang('translations.uniqueNr'):</strong>{{$data->uniqueNr}}</li>
                        @endif
                        @if($data->translation->descriptionState != '')
                            <li><strong>@lang('translations.message'):</strong>{{$data->translation->descriptionState}}
                            </li>
                        @endif
                        @if($data->price == '0' && $data->sold_state)
                            <li><strong>@lang('translations.price'):</strong>@lang('parts.ntb')</li>
                        @endif
                        <li><strong>@lang('translations.sendable'):</strong>
                            @if($data->sendable)
                                Ja
                            @else
                                Nee
                            @endif
                        </li>
                    </ul>
                    @if( $data->sold_state)
                        <div class="button-placeholder buy-button">
                            <div class="button">
                                <div class="placeholder">
                                    <div class="inner-button">
                                        <p>@lang('translations.buyThis')</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
            <div class="extra-info">
                {{--<div class="left">--}}
                {{--<div class="previous-item">--}}
                {{--@if($previous)--}}
                {{--<a href="/{{$previous->route->route}}">--}}
                {{--<div class="button">--}}
                {{--<div class="background"></div>--}}
                {{--</div>--}}
                {{--<p>@lang('translations.previousItem')</p>--}}
                {{--</a>--}}
                {{--@endif--}}
                {{--</div>--}}
                {{--<div class="badge">--}}
                {{--<div class="content">--}}
                {{--<h3>@lang('translations.interest')</h3>--}}
                {{--<p>@lang('translations.interestText')</p>--}}
                {{--<div class="button">--}}
                {{--<a href="/contact">--}}
                {{--<div class="placeholder">--}}
                {{--<div class="inner-button sendMail">--}}
                {{--<p>Contact</p>--}}
                {{--</div>--}}
                {{--</div>--}}
                {{--</a>--}}
                {{--</div>--}}
                {{--</div>--}}
                {{--</div>--}}
                {{--</div>--}}

                {{--<div class="right">--}}
                {{--<div class="text">--}}
                {{--@if($data->translation->description != '')--}}
                {{--<h3>@lang('translations.shortDescription')</h3>--}}
                {{--{{$data->translation->description}}--}}
                {{--@endif--}}
                {{--@if($data->translation->extra_description != '')--}}
                {{--{{$data->translation->extra_description}}--}}
                {{--@endif--}}
                {{--</div>--}}
                {{--<div class="next-item">--}}
                {{--@if($next)--}}
                {{--<a href="/{{$next->route->route}}">--}}
                {{--<div class="button">--}}
                {{--<div class="background"></div>--}}
                {{--</div>--}}
                {{--<p>@lang('translations.nextItem')</p>--}}
                {{--</a>--}}
                {{--@endif--}}
                {{--</div>--}}
                {{--</div>--}}

                <div class="mobile">
                    <div class="text">
                        @if($data->translation->extra_description != '' || $data->translation->description != '')
                            <h3>@lang('translations.shortDescription')</h3>
                        @endif
                        @if($data->translation->extra_description != '')
                            {{$data->translation->extra_description}}
                        @else
                            {{$data->translation->description}}
                        @endif
                    </div>
                    {{--<div class="badge">--}}
                    {{--<div class="content">--}}
                    {{--<h3>@lang('translations.interest')</h3>--}}
                    {{--<p>@lang('translations.interestText')</p>--}}
                    {{--<div class="button">--}}
                    {{--<div class="placeholder">--}}
                    {{--<div class="inner-button sendMail">--}}
                    {{--<p>Contact</p>--}}
                    {{--</div>--}}
                    {{--</div>--}}
                    {{--</div>--}}
                    {{--</div>--}}
                    {{--</div>--}}
                    <div class="controls">
                        <div class="previous-item">
                            @if($previous && isset($previous->route))
                                <a href="/{{$previous->route->route}}">
                                    <div class="button">
                                        <div class="background"></div>
                                    </div>
                                    <p>@lang('translations.nextItem')</p>
                                </a>
                            @endif
                        </div>
                        <div class="next-item">
                            @if($next && isset($next->route))
                                <a href="/{{$next->route->route}}">
                                    <div class="button">
                                        <div class="background"></div>
                                    </div>
                                    <p>@lang('translations.previousItem')</p>
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="styling-block bottom">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</div>

@if($data->video != '')
    <script>
        // Load the IFrame Player API code asynchronously.
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // Replace the 'ytplayer' element with an <iframe> and
        // YouTube player after the API code downloads.
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('ytplayer', {
                height: '360',
                width: '640',
                videoId: '{{ $data->video }}',
                playerVars: {
                    modestbranding: 1,
                    showinfo: 0,
                    rel: 0
                },
            });
        }

    </script>
@endif