<div class="o-product">
    <div class="o-product__aside js-product-image-slider">
        @php
            $images = $product->documents->filter(fn($document) => $document->key === 'Documents-product_images');
        @endphp

        @if(count($images) > 0)
        <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mainSwiper">
            <div class="swiper-wrapper">
                @foreach($images as $image)
                    <div class="swiper-slide">
                        <img src="{!! $image->medium_image_url !!}" />
                    </div>
                @endforeach
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <div thumbsSlider="" class="swiper thumbsSwiper">
            <div class="swiper-wrapper">
                @foreach($images as $image)
                    <div class="swiper-slide">
                        <img src="{!! $image->medium_image_url !!}" />
                    </div>
                @endforeach
            </div>
        </div>
        @endif


        @if(!empty($product->overviewImage) && empty($product->translation->youtube_url))
            <div class="o-product__image">
                <img class="o-product__img  u-clip-path" data-id="clip-path-image-2"
                     src="{{$product->overviewImage->large_image_url}}" alt="{{ $product->overviewImage->name }}">
            </div>
        @elseif(!empty($product->translation->youtube_url))
            <iframe width="100%" height="315"
                    src="https://www.youtube.com/embed/{{ $product->translation->youtube_url }}"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen></iframe>
        @endif
        <div class="o-stats__info u-spacing-mt4">
            <ul class="o-stats__list">
                @foreach($product->getStats() as $statKey => $statValue)
                    <li class="o-stats__item">
                        @include('site.components.stat', ['stars' => $statValue])
                    </li>
                @endforeach
            </ul>
        </div>

        <div class="o-product__positives">
            {!! $product->translation->positives !!}
        </div>
        <div class="o-product__negatives">
            {!! $product->translation->negatives !!}
        </div>

        @if(isset($product->required_age) && $product->required_age != 0)
            <div class="o-product__note">
                @include('site.components.note', [
                    'noteContent' => __('site/availability.age_notification', ['age' => $product->required_age])
                ])
            </div>
        @endif

        @if(!empty($product->translation->notification))
            <div class="o-product__note">
                @include('site.components.note', [
                    'noteContent' => $product->translation->notification,
                ])
            </div>
        @endif
    </div>

    <div class="o-product__content">
        <div class="o-product__back">
            @include('site.components.button', [
                'buttonText' => 'Bekijk alle activiteiten',
                'buttonLink' => $links->products->route,
                'buttonType' => 'text',
                'buttonIcon' => 'arrowLeft',
                'modifiers' => ['icon','is-reversed'],
            ])
        </div>

        <h1 class="o-product__title">{{$product->translation->name}}</h1>
{{--        <div class="o-product__location">{{ $location->city }}</div>--}}

        <div class="o-stats__content-wrapper">

            <div class="o-product__costs">
                <div class="o-product__costs--left">
                    <p class="o-product__price"
                       data-currency="{{ config('site.shop_currency') }}">{!! $product->getPriceLabel(false, false)  !!}</p>
                    <p class="o-product__price-line">{!! $product->getPosterLabel()  !!}</p>
                    <p class="o-product__subprice">incl. BTW {{ $product->getPriceLabel(true, true) }}</p>
                    <div class="o-booking__info">* Prijzen kunnen afwijken per locatie</div>
                </div>
                <div class="o-product__costs--right">
                    @if(isset($linkToButton))
                        @include('site.components.button', [
                          'buttonLink' => $linkToButton,
                          'buttonText' => __('site/products.request_now'),
                      ])
                    @else
                        <button class="c-button  js-plan-popup" data-product-id="{{ $product->id }}">
                            <span class="c-button__text">@lang('site/global.add_to_planning')</span>
                        </button>
                    @endif
                </div>
            </div>

            <div class="o-product__spec u-spacing-mb3">
                @include('site.components.spec', [
                    'specs' => [
                        'Min. personen' => $product->minimum_amount_of_persons,
                        'Duur' => $product->getDurationLabel() . ' (' . __('site/global.eventuate') . ')'
                    ]
                ])
            </div>

            @if(!isset($linkToButton))
                <button class="c-button  js-plan-popup mobile-visible u-spacing-mb3"  data-product-id="{{ $product->id }}">
                    <span class="c-button__text">@lang('site/global.add_to_planning')</span>
                </button>
            @endif

            @if(isset($product->translation->inspo_url) && !empty($product->translation->inspo_url))
                <a href="{{$product->translation->inspo_url ?? '#'}}"
                   class="c-text-button  c-text-button--icon u-spacing-mb3" target="_blank">
                    <span class="c-text-button__text">@lang('site/global.download_inspo')</span>
                    <i class="c-text-button__icon">
                        <svg width="7" height="10">
                            <use href="/img/icon-arrowRight.svg#arrowRight"></use>
                        </svg>
                    </i>
                </a>
            @endif
        </div>

        <div class="s-text">
            {!! $product->translation->description !!}
        </div>

        @if (!empty($product->translation->usp) || !empty($product->translation->usp_1) || !empty($product->translation->usp_2) || !empty($product->translation->usp_3))
            <ul class="o-product__usps u-spacing-mt2 u-spacing-mb6">
                @if(!empty($product->translation->usp))
                    <li>{{ $product->translation->usp }}</li>@endif
                @if(!empty($product->translation->usp_1))
                    <li>{{ $product->translation->usp_1 }}</li>@endif
                @if(!empty($product->translation->usp_2))
                    <li>{{ $product->translation->usp_2 }}</li>@endif
                @if(!empty($product->translation->usp_3))
                    <li>{{ $product->translation->usp_3 }}</li>@endif
            </ul>
        @endif

        @if(!isset($linkToButton))
            <div class="o-product__order">
                <button class="c-button  c-button--large  js-plan-popup"   data-product-id="{{ $product->id }}">
                    <span class="c-button__text">@lang('site/global.add_to_planning')</span>
                </button>
            </div>
        @endif

        <div class="u-spacing-mt3">
            @include('site.components.rating', ['modifiers' => ['dark']])
        </div>
    </div>

</div>