<div class="o-certificates  @modifiers('o-certificates')">
    <h2 class="o-certificates__heading" data-kal="slide-left">{{__('site/global.certificates.heading')}}</h2>

    <div class="o-certificates__scroller">
        <div class="o-certificates__tray  js-certificates" id="certificate-slider">
            @foreach($composedCertificates as $key => $certificate)
                <section class="o-certificates__item  js-certificates-item" data-order="{{$key}}" data-kal="fade" style="--kal-delay: {{($loop->index % 4)*0.15}}s; --kal-duration: 0.6s;">

                    @php
                        $cardElement = 'div';
                        if(!empty($certificate->translation->url)) $cardElement = 'a';
                    @endphp

                    <{{ $cardElement }} class="o-certificates__card" @if($cardElement === 'a') href="{{ $certificate->translation->url }}" rel="noopener noreferrer"  target="_blank"  @endif>
                        @if(isset($certificate->images) && $certificate->images->count() != 0)
                            <picture class="o-certificates__picture">
                                <img alt="{{$certificate->translation->name}}" src="{{ $certificate->images->first()->small_image_url }}" />
                            </picture>
                        @endif

                        <div class="o-certificates__content">
                            @if(!empty($certificate->translation->name))
                                <h3 class="o-certificates__title">{!! $certificate->translation->name !!}</h3>
                            @endif

                            @if(!empty($certificate->translation->description))
                                <div class="o-certificates__description">{!! nl2br($certificate->translation->description) !!}</div>
                            @endif
                        </div>
                    </{{ $cardElement }}>

                </section>
            @endforeach
        </div>
    </div>

</div>