<div class="o-card-grid">
    @if(!empty($title))
        <h2 class="c-heading  u-spacing-mt5  u-spacing-mb5">
            {{$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" width="444" height="296"/>
                            </picture>

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


        </div>
    @endif
</div>