@php
	$combinedImages = array_merge([data_get($article, 'images.main')], data_get($article, 'images.additional', []));
@endphp

<!-- Bild-Slider in der Buybox auf der Artikeldetailseite -->
<div class="m-buybox__wrap-img is-loading">

	<transition name="fade-fast" v-cloak>
		<!-- Benachrichtigung, dass der Link der Produktdetailseite in die Zwischenablage kopiert wurde -->
		<div class="c-alert c-alert--success c-alert--success-buybox-image"
			 v-if="this.showLinkCopiedTooltip">
			{{ __('product_box.tooltips.copied') }}
		</div>
	</transition>

	<div class="m-buybox__slider">

		<!-- Slider main container -->
		<div class="c-slider c-slider--buybox swiper-container">
			<!-- Additional required wrapper -->
			{{-- Folgendes Markup, muss kompatibel mit Anforderungen aus lightGallery sein--}}
			{{-- Für Doku dazu, siehe: https://www.lightgalleryjs.com/docs/getting-started/#the-markup --}}
			<div class="c-slider__wrapper swiper-wrapper vendor-light-gallery" id="product-slider-wrapper">

				@foreach($combinedImages as $key => $image)
					@php
						$productImage = new \App\Helpers\ImageHelper(data_get($image, 'src'));
						$imageClasses = 'c-slider__image m-buybox__img';
						if (data_get($image, 'src') !== null) $imageClasses .= ' has-pointer';
					@endphp

					<div data-src="{{ $productImage->getImage(2400) }}"
						 class="c-slider__item swiper-slide vendor-light-gallery-item"
						 data-sub-html="{{ __('product_box.product_image_info_text') }}"
						 @dragstart.prevent="()=> false"
						 @drop.prevent="()=> false"
						 @contextmenu.prevent="$copyProductLinkToClipBoard()">

						<img
							alt="{{ __('product_slider.product_img_alt', ['number' => $key, 'product' => trim(escapeZWNJChar(data_get($article, 'standard.title'))) ]) }}"
							decoding="async"
							height="566"
							width="566"
							v-on:error="$setFallbackImage($event, '600x600')"
							class="{{ $imageClasses }}"
							src="{{ $productImage->getImage(600) }}"
							loading="{{ $key === 0 ? 'eager' : 'lazy' }}"
							fetchpriority="{{ $key === 0 ? 'high' : 'low' }}"
						>

						@if(data_get($image, 'src'))
							<span class="m-buybox__info-txt">{{ __('product_box.product_image_info_text') }}</span>
						@endif
					</div>
				@endforeach

			</div>

		</div>

		@if(count($combinedImages) > 1)
			<div class="c-slider__nav c-slider__nav--prev swiper-button-prev"
				 aria-label="{{ __('slider.prev_button') }}"
				 role="button"
				 aria-controls="product-slider-wrapper">
				<i class="c-slider__nav-icon icon icon-arrow-left"></i>
			</div>
			<div class="c-slider__nav c-slider__nav--next swiper-button-next"
				 aria-label="{{ __('slider.next_button') }}"
				 role="button"
				 aria-controls="product-slider-wrapper">
				<i class="c-slider__nav-icon icon icon-arrow-left"></i>
			</div>
		@endif

		@if(data_get($article, 'homologation.icon') && data_get($article, 'homologation.value'))
			<button type="button"
					title="{{ data_get($article, 'homologation.value') }}"
					class="m-buybox__homologation"
					@click.prevent="$modal.show('homologationModal', { homologation: '{{ data_get($article, 'homologation.value') }}' })">
				<img src="{{ data_get($article, 'homologation.icon') }}"
					 alt="{{ escapeZWNJChar(data_get($article, 'homologation.value')) }}" decoding="async"
					 loading="eager">
			</button>
		@endif

	</div>

	@if(!empty(data_get($article, 'images.additional', [])) || !empty($videos))

		<div class="m-buybox__thumbnails">
			<div class="c-slider c-slider--thumbnails swiper-thumb-container">
				<div class="c-slider__wrapper swiper-wrapper">

					@unless(empty($videos))
						<a href="#productvideo" v-anchor-scroll aria-label="{{ __('product_slider.jump_to_video') }}">
							<div class="c-slider__item swiper-slide is-video-thumbnail-slide">
								<i class="fa fa-play-circle-o"></i>
							</div>
						</a>
					@endunless

					@foreach($combinedImages as $key => $image)
						@php($productImage = new \App\Helpers\ImageHelper(data_get($image, 'src')))

						<div class="c-slider__item swiper-slide">
							<img src="{{ $productImage->getImage(155) }}"
								 loading="eager"
								 decoding="async"
								 v-on:error="$setFallbackImage($event, '155x155')"
								 alt="{{ __('product_slider.product_img_alt', ['number' => $key, 'product' => trim(escapeZWNJChar(data_get($article, 'standard.title'))) ]) }}"
								 class="m-buybox__img c-slider__image">
						</div>
					@endforeach
				</div>
			</div>

		</div>
	@endif

	<lightbox light-gallery-selector=".vendor-light-gallery"></lightbox>
</div>