<div class="o-big-card-grid" id="bigCardGrid">
	@if(isset($cardItems))
		<div class="o-big-card-grid__matrix">
			@foreach($cardItems as $item)
				@php
					// When we only get a array with names of the pages, we first set the model & link
						$showCard = true;
						if(isset($modelThroughLinks) && $modelThroughLinks) {
							if(property_exists($links, $item)) {
								$model = $links->{$item}->node;
								$link = $links->{$item}->route;
							} else {
								$showCard = false;
							}
						}
						// When we get real models of the pages we want to show
						else {
							$model = $item;
							$link = $modelTypeRoute . '/' . $model->translation->slug;
						}

					if($showCard) $image = $model->images->first()->medium_image_url ?? '/img/placeholder-big-card.svg';
				@endphp

				<div class="o-big-card-grid__item">

					<a class="c-big-card" href="{{$link}}">
						<img class="c-big-card__img" src="{{ $image }}" width="564" height="360" alt="image"/>

						<div class="c-big-card__info">
							<div class="c-big-card__label">
								<h2 class="c-big-card__title">{{$model->translation->name}}</h2>
								<p class="c-big-card__desc">{{$model->translation->description}}</p>
							</div>

							<div class="c-big-card__shape">
                                <div class="bg">
								    @include('components.icons.bigCardShape')
                                </div>
                                <div class="arrow">
								    @include('components.icons.arrow')
                                </div>
							</div>
						</div>

					</a>

				</div>
			@endforeach

		</div>
	@endif
</div>