<div class="cards-block-highlight {{ $block->white_grid ? 'cards-block-highlight--white-grid' : 'cards-block-highlight--colored-grid' }} {{ $block->bg_color ? 'cards-block-highlight--bg-'.$block->bg_color : 'cards-block-highlight--bg-white' }} {{ !empty($block->luumo) ? 'cards-block-highlight--luumo' : '' }} block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}" data-controller="blocks/triplet-highlight">
    @if ($block->anchor_id )
        <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
    @endif
    @if(!empty($block->block_title) || !empty($block->block_subtitle))
        @php $block->heading_type = 'h2'; @endphp
        @include('frontend.templates.blocks.title-block',[
            'isInclude' => true,
        ])
    @endif
    <div class="cards-block-highlight__wrapper">
        <div class="cards-block-highlight__cards cards-block-highlight__cards--{{ $block->cards->count() }}">
            @foreach($block->cards as $card)
                <div class="cards-block-highlight__card bg--{{ $card->bg_color }}" data-role="card" data-card="{{ $loop->index }}">
                    <div class="cards-block-highlight__card-header" data-action="toogle-card">
                        @if(!empty($card->svg) && file_exists(getStoragePath(config('path.internal.media')) . '/' . $card->svg->filename))
                            <div class="cards-block-highlight__card-icon">
                                {!! file_get_contents(getStoragePath(config('path.internal.media')) . '/' . $card->svg->filename) !!}
                            </div>
                        @elseif(!empty($card->image))
                            <div class="cards-block-highlight__card-icon">
                                @if ($card->image->extension == 'gif')
                                    {!! getMediaImg($card->image, null, htmlentities($card->title)) !!}
                                @else
                                    {!! getMediaImg($card->image, '150x', htmlentities($card->title)) !!}
                                @endif
                            </div>
                        @endif
                        <div class="cards-block-highlight__card-title">
                            @title($card->title)
                        </div>
                        <a href="#" class="cards-block-highlight__card-toggle">
                            <span>@include('frontend.templates.icons.plus')</span>
                            <span>@include('frontend.templates.icons.minus')</span>
                        </a>
                    </div>
                    <div class="cards-block-highlight__card-content-box" data-role="shutter">
                        <div class="cards-block-highlight__card-content rich-content">
                            {!! $card->content !!}
                        </div>
                    </div>
                </div>
                @if ($loop->index === 3)
                    @break
                @endif
            @endforeach
        </div>
        @if(!empty($block->cta1))
            <div class="cards-block-highlight__cta">
                @if ($block->bg_color == 'blue' || $block->bg_color == 'primary')
                    {!! generateLink($block->cta1, 'std-button std-button--large std-button--light') !!}
                @else
                    {!! generateLink($block->cta1, 'std-button std-button--large') !!}
                @endif
            </div>
        @endif
    </div>
</div>
