@php
    $isCardClickable = isset($clickable) && $clickable == true ? true : false;
    $elem = $isCardClickable ? 'a' : 'div';
@endphp


<{{$elem}} class="c-card  @modifiers('c-card')" @if($isCardClickable) href="{{$cardLink}}" @endif>

@if(!empty($cardImage))

    @if(isset($cardAsImg) && $cardAsImg)
        <img class="c-card__image" src="{{ $cardImage }}" alt="{{ $cardTitle }}" />
    @else
        <div class="c-card__image-ratio">
            <div class="c-card__image" style="background-image: url('{{$cardImage}}')"></div>
        </div>
    @endif

@else
    <div class="c-card__image  c-card__image--placeholder"></div>
@endif

<div class="c-card__body">

    <div class="c-card__inner-body">

        @if(!empty($cardTitle))<h3 class="c-card__title">{{ $cardTitle }}</h3>@endif

        <div class="c-card__content">
            {!! $cardText ?? '' !!}
        </div>

        @if(!empty($cardLink) && !empty($cardButtonText))
            <div class="c-card__action">
                @include('site.components.button', ['buttonLink' => $cardLink, 'isButton' => $isCardClickable, 'modifiers' => ['icon', 'text'], 'buttonText' => $cardButtonText])
            </div>
        @endif

    </div>

</div>


</{{$elem}}>