@props(['images'])

<section class="splide img_spacer" aria-label="Bildergalerie der Pension Forke" aria-roledescription="Carousel" aria-atomic="false">
    <div class="splide__track">
        <ul class="splide__list">
            @foreach($images as $image)
            <li class="splide__slide h-80" role="group" aria-roledescription="slide">
                <img class="object-cover w-full h-full" loading="lazy" src="{{ asset($image['src']) }}" alt="{{ $image['alt'] }}" width="800" height="600">
            </li>
            @endforeach
        </ul>
    </div>
</section>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    new Splide('.img_spacer', {
        type: 'loop',
        perPage: 4,
        arrows: false,
        gap: 0,
        padding: 0,
        pagination: 0,
        breakpoints: {
            1024: {
                perPage: 3,
            },
            740: {
                perPage: 2,
            },
            480: {
                perPage: 1,
            }
        }
    }).mount();
});
</script>
@endpush