<div class="o-card-grid">
    @if(empty($theme) || $theme == 'dark')<div class="u-bg-triangle-primary"></div>@endif

    <div class="o-card-grid__main" @if(isset($showOrnament) && $showOrnament == true) data-ornament-type="stroked" @endif>
        <div class="o-card-grid__header">

            @if(isset($theme) && $theme == 'light')
                <h3 class="o-card-grid__title  u-color-text--800  u-text-align-center">{{$headerTitle}}</h3>
            @else
                <div class="l-bisect">
                    <div class="l-bisect__a">
                        @if(isset($headerTitle) && $headerTitle !== null)
                            <h3 class="o-card-grid__title  @if(isset($theme) && $theme == 'light') u-color-text--800 @endif">{{$headerTitle}}</h3>
                        @endif

                        @if(isset($showBackToIndex) && $showBackToIndex == true)
                            <div class="o-card-grid__back">
                                @include('site.components.button', [
                                    'buttonText' => $backToLabel,
                                    'buttonLink' => $parentLink,
                                    'type' => 'text',
                                    'modifiers' => ['icon', 'on-dark', 'is-reversed'],
                                ])
                            </div>
                        @endif

                    </div>

                    @if(isset($headerLinkLabel) && $headerLinkLabel !== null)
                        <div class="l-bisect__b">
                            @include('site.components.button', [
                                'buttonText' => $headerLinkLabel,
                                'buttonLink' => $parentLink,
                                'type' => 'text',
                                'modifiers' => ['icon', 'on-dark']
                            ])
                        </div>
                    @endif

                </div>
            @endif
        </div>

        <div class="o-card-grid__list @if(isset($listClasses)) {{$listClasses}} @endif">
            @if(!empty($cards))
                @foreach($cards as $card)
                    <div class="o-card-grid__item">
                        <a class="c-card" href="{{$parentLink . '/' . $card->translation->slug}}">
                            <div class="c-card__image">
                                @if($card->images->count() > 0)
                                    <img src="{{$card->images->first()->medium_image_url}}" alt="{{$card->images->first()->name}}">
                                @endif
                            </div>
                            <div class="c-card__content">
                            {{-- <p class="c-card__label">@if(isset($cardLabel)){{$cardLabel}}@endif</p> --}}
                                <h4 class="c-card__title">{{$card->translation->name}}</h4>
                                <div class="c-card__action">
                                    @include('site.components.button', [
                                        'buttonText' => __('site/global.discoverMore'),
                                        'type' => 'text',
                                        'modifiers' => ['icon'],
                                        'tagName' => 'div'
                                    ])
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            @endif

        </div>

        @if(isset($theme) && $theme == 'light')
            <div class="o-card-grid__footer">
                @if(isset($showBackToIndex) && $showBackToIndex == true)
                    <div class="o-card-grid__back">
                        @include('site.components.button', [
                            'buttonText' => $backToLabel,
                            'buttonLink' => $parentLink,
                            'type' => 'text',
                            'modifiers' => ['icon', 'on-dark', 'is-reversed'],
                        ])
                    </div>
                @endif
                @if(isset($headerLinkLabel) && $headerLinkLabel !== null)
                    <div class="l-bisect__b">
                        @include('site.components.button', [
                            'buttonText' => $headerLinkLabel,
                            'buttonLink' => $parentLink,
                            'type' => 'text',
                            'modifiers' => ['icon', 'on-dark']
                        ])
                    </div>
                @endif
            </div>
        @endif

    </div>

</div>