<div class="testimonial-slider {{ $sliderClass }}">
    @foreach ($testimonials as $testimonial)
        <div class="mx-2">
            <div class="border sp-card border-1 rounded-3 bg-white">
                @if($testimonial->StoryType=='Image')
                    @if(!is_null($testimonial->media))
                        <img src="{{ $testimonial->media->thumbnail_url }}" alt="" class="img-fluid testimonial-image" style="height: 155px">
                    @else
                        <img src="{{ asset('img/test-testimonial.jpeg') }}" alt="" class="img-fluid testimonial-image" style="height: 155px">
                    @endif
                    <div class="ps-3 pe-2 pb-2 ">
                        <h4 class="text-start mt-1 mb-1 f-16 f-sm-16 mb-0  text-black">
                            {{ \Illuminate\Support\Str::limit($testimonial->Title, 60, '...') }}
                        </h4>
                        <span class="rounded-pill mb-0 d-inline-block bgBlueLight clrBlueDark f-10 fw-400 px-2 py-1">
                            @if($testimonial->specialities) {{ @$testimonial->specialities[0]->SpecialityName }} @endif
                        </span>
                    </div>
                @else
                    @if(!is_null($testimonial->YoutubeVideoCode) && $testimonial->YoutubeVideoCode != '')
                    <iframe width="100% " height="150" src="https://www.youtube.com/embed/{{ $testimonial->YoutubeURL }}"
                        srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em #00000069}.yt-bg{display: flex;align-items: center;justify-content: center;}.yt-bg span{height: 60px;background-image: url(https://all-filesuploads.s3.amazonaws.com/play.png);text-shadow: none;width: 60px;background-repeat: no-repeat;background-size: cover;
        }</style><a href=https://www.youtube.com/embed/{{ $testimonial->YoutubeURL }}?autoplay=1><img @if ($testimonial->patientImage) src={{ $testimonial->media->thumbnail_url}} @else src=https://img.youtube.com/vi/{{ $testimonial->YoutubeURL}}/hqdefault.jpg @endif alt='{{$testimonial->Title}}'><div class='yt-bg'><span></span></div></a>"
                        frameborder="0"
                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen
                        title="{{ $testimonial->Title }}">
                    </iframe>
                    @elseif(!is_null($testimonial->media))
                        <img src="{{ $testimonial->media->thumbnail_url }}" alt="" class="img-fluid" style="height: 155px">
                    @else
                        <img src="{{ asset('img/test-testimonial.jpeg') }}" alt="" class="img-fluid" style="height: 155px">
                    @endif
                    <div class="ps-3 pe-2 pb-2 ">
                        <h4 class="text-start mt-1 mb-1 f-16 f-sm-16 mb-0  text-black">
                            {{ \Illuminate\Support\Str::limit($testimonial->Title, 60, '...') }}
                        </h4>
                        @if(count($testimonial->specialities))
                            @foreach($testimonial->specialities as $speciality)
                                <span class="rounded-pill mb-0 d-inline-block bgBlueLight clrBlueDark f-10 fw-400 px-2 py-0">
                                    {{ $speciality->SpecialityName }}
                                </span>
                            @endforeach
                        @endif

                        @if(count($testimonial->treatments))
                            @foreach($testimonial->treatments as $treatment)
                                <span class="rounded-pill mb-0 d-inline-block bgBlueLight clrBlueDark f-10 fw-400 px-2 py-0">
                                    {{ $treatment->TreatmentName }}
                                </span>
                            @endforeach
                        @endif
                    </div>
                @endif
            </div>
        </div>
    @endforeach
</div>