<section class="o-discover-row">

    <h2 class="o-discover-row__heading">
        <div class="o-discover-row__icon">@include('site.components.ornaments.pentagon')</div>
        {{ $discoverRowHeading ?? __('site/global.ourServices') }}
    </h2>

    <div class="o-discover-row__main">

        @php $discoverImageSizes = ['small' => 450, 'medium' => 500]; @endphp

        @foreach($discoverPages as $discoverPage)

            <a class="o-discover-row__item  c-discover-card" href="{{ $discoverPage->translation->route->alias }}">

                @if(isset($discoverPage->images) && $discoverPage->images->isNotEmpty())

                    <picture class="c-discover-card__image">
                        @foreach($discoverImageSizes as $imageSizeKey => $imageSize)
                            @if(!$loop->last)
                                <source
                                        media="(max-width: {{$imageSize}}px)"
                                        srcset="@if(isset($discoverPage->images->first()->{$imageSizeKey.'_image_url'})){{ $discoverPage->images->first()->{$imageSizeKey.'_image_url'} }}@elseif(isset($discoverPage->images->first()[$imageSizeKey])){{ $discoverPage->images->first()[$imageSizeKey] }}@endif">
                            @else
                                <img class="c-discover-card__img" src="@if(isset($discoverPage->images->first()->{$imageSizeKey.'_image_url'})){{ $discoverPage->images->first()->{$imageSizeKey.'_image_url'} }}@elseif(isset($discoverPage->images->first()[$imageSizeKey])){{ $discoverPage->images->first()[$imageSizeKey] }}@else{{'https://via.placeholder.com/400x300'}}@endif" alt="{{ $discoverPage->images->first()->name }}">
                            @endif
                        @endforeach
                    </picture>

                @endif

                <div class="c-discover-card__content">

                    <div class="c-discover-card__heading">
                        <span class="c-discover-card__icon  c-discover-card__icon--{{$discoverPage->code_name}}">
                            @includeIf('site.components.icons.'. $discoverPage->code_name)
                        </span>

                        <h3 class="c-discover-card__title">{{ $discoverPage->translation->name }}</h3>
                    </div>

                    <div class="c-discover-card__description  s-text">
                        {!! nl2br($discoverPage->translation->description) !!}
                    </div>

                    <div class="c-discover-card__button">
                        @include('site.components.button', [
                            'buttonText' => __('site/global.to') . ' ' . strtolower($discoverPage->translation->name),
                            'isButton' => true
                        ])
                    </div>
                </div>

            </a>

        @endforeach

    </div>

    <div class="o-discover-row__background">
        <span class="o-discover-row__spot"></span>
    </div>

    @if(rand(0, 1))
        <div class="o-discover-row__oval">
            @include('site.components.ornaments.oval')
        </div>
    @endif

</section>