@php
	$fallbackImages = collect([
		'small' => '/img/hero_small.jpg',
		'medium' => '/img/hero_medium.jpg',
		'large' => '/img/hero_large.jpg'
	]);
	$pageImage = isset($page->images) && $page->images->isNotEmpty() ? $page->images->first() : null;
	$headingImage = (isset($heroImage) && !empty($heroImage)) ? $heroImage->first() : $pageImage;

@endphp

<div class="o-hero">
	<picture class="o-hero__picture" data-kal="fade">
		@foreach([ 'small' => 800, 'medium' => 1480, 'large' => 2200] as $imageSizeKey => $imageSize)
			@if(!$loop->last)
				<source media="(max-width: {{$imageSize}}px)"
						srcset="{{ $headingImage ? $headingImage->{$imageSizeKey.'_image_url'} : $fallbackImages[$imageSizeKey] }}">
			@else
				<img class="o-hero__img"
					 src="{{ $headingImage ? $headingImage->{$imageSizeKey.'_image_url'} : $fallbackImages[$imageSizeKey] }}"
					 alt="{{ $headingImage ? $headingImage->name : "Heading afbeelding" }}"
				>
			@endif
		@endforeach
	</picture>
	<div class="o-hero__main">
		<div class="o-hero__breadcrumb" data-kal="fade" style="--kal-delay: 0.6s">
			@include('components.breadcrumb', ['modifiers'=>'on-dark'])
		</div>

		@if((isset($hideTitle) ? !$hideTitle : true))
			<h1 class="o-hero__title" data-kal="fade" style="--kal-delay: 0.3s">{{$heroTitle ?? $page->translation->name}}</h1>
		@endif
	</div>
</div>