<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

{{--            @if(isset($showAlert) && $showAlert)--}}
{{--                --}}{{-- add job alert card  --}}
{{--                <div class="o-card-grid__item">--}}
{{--                    <a class="c-card  c-card--has-action" href="{{$links->jobalert->route}}">--}}

{{--                        <picture class="c-card__picture">--}}
{{--                            <img class="c-card__img" src="{{ $links->jobalert->node->images->first()->medium_image_url ?? '/img/placeholder-card.svg' }}" alt="image" data-object-fit="cover"/>--}}
{{--                        </picture>--}}

{{--                        <p class="c-card__label">--}}
{{--                            <span class="c-card__heading">Staat jouw vacature er niet bij?</span><br/>--}}
{{--                            <span class="c-card__subheading">Schrijf je in voor een jobalert!</span>--}}
{{--                        </p>--}}
{{--                    </a>--}}
{{--                </div>--}}
{{--            @endif--}}
        </div>
    @endif
</div>