<div class="o-card-grid">
    @if(!empty($title))
        <h2 class="c-heading">
            {{$title}}
        </h2>
    @endif

    @if(isset($cardItems))
            <div class="o-card-grid__main">
                @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-card.svg';
                    @endphp

                    @if($showCard)
                        <div class="o-card-grid__item">
                            <a class="c-card  c-card--has-action" href="{{$link}}">

                                <picture class="c-card__picture">
                                    <img class="c-card__img" src="{{ $image }}" alt="image" data-object-fit="cover"/>
                                </picture>

                                <p class="c-card__label">{{$model->translation->name}}</p>
                            </a>
                        </div>
                    @endif
                @endforeach
            </div>
    @endif
</div>