@php
    $godfatherImage = isset($_godfatherImage) ? Storage::url($_godfatherImage) : asset('img/templates/eucalipto/parent-1.jpg');
    $godmotherImage = isset($_godmotherImage) ? Storage::url($_godmotherImage) : asset('img/templates/eucalipto/parent-2.jpg');
    $eventdate = $invitation->event_date ?? now();
@endphp
<section id="godparents" class="py-5 position-relative">
        <div class="container py-3 position-relative">
            <h3 class="f-heading text-center mb-5 title fw-700">Padrinos</h3>
            <div class="px-4 px-sm-0">
                <div class="my-slider-3">
                    @foreach ($godparents as $godparent)
                        <div class="col-sm-6">
                            <div class="ratio ratio-1x1 rounded-circle mb-5 w-75 mx-auto">
                                <div class="p-3">
                                    @php
                                    $imageUrl = null;
                                    if(array_key_exists('godparentImage', $godparent)){
                                        $imageUrl = Storage::url($godparent['godparentImage']);
                                    }
                                    @endphp
                                    <div class="bg-img h-100 rounded-circle overflow-hidden" style="background-image: url('{{ $imageUrl }}')"></div>
                                </div>
                            </div>
                            <h5 class="fs-sm-36 f-heading text-center notranslate">{{ array_key_exists('godparentName', $godparent) ? $godparent['godparentName'] : null }}</h5>
                            <p class="fs-sm-24 fs-21 f-primary text-center fw-500">{{ array_key_exists('godparentRelationship', $godparent) ? $godparent['godparentRelationship'] : null }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
</section>
<script type="module">
        if ( $('.my-slider-3').length > 0 ) {
            var slider2 = tns({
                container: '.my-slider-3',
                items: 1,
                gutter: 30,
                controlsText: ['', ''],
                nav: false,
                autoplayButtonOutput: false,
                mouseDrag: true,
                slideBy: 1,
                autoplay: true,
                items: 1,
                responsive: {
                    640: {
                        items: 1
                    },
                    900: {
                        items: 2
                    }
                }
            });
        }
</script>