@props(['center' => false])
<div x-data="{
    atStart: true,
    atEnd: false,
    center: @js($center),
    check() {
        const container = $refs.gallery;
        this.atStart = container.scrollLeft <= 0;
        this.atEnd = container.scrollLeft + container.clientWidth >= container.scrollWidth;
        this.center = this.atStart && this.atEnd
    },
    scroll(direction) {
        const container = $refs.gallery;
        const div = container.clientWidth > 600 ? 3 : 2;
        const scrollAmount = Math.ceil(container.clientWidth / div);

        if (direction === 'left') {
            container.scrollBy({ left: -scrollAmount, behavior: 'smooth'});
        } else {
            container.scrollBy({ left: scrollAmount, behavior: 'smooth'});
        }
    },
}" x-init="check()" class="contents">
    <div
        {{ $attributes->class(['overflow-auto no-scrollbar scroll-smooth'])->merge() }} x-resize="check()"
        @scroll="check()" x-ref="gallery" style="{{ $center ? 'justify-content: center' : '' }}" :style="center ? 'justify-content: center' : ''">
        {{ $slot }}
    </div>
    <div class="flex gap-3 items-center justify-center mt-12">
        <button :disabled="atStart" @click="scroll('left')"
                class="bg-white border-2 border-solid border-midnightblue-100 flex items-center justify-center sm:mt-0 rounded-full w-12 h-12 z-10 disabled:opacity-20 transition-opacity">
            <svg xmlns="http://www.w3.org/2000/svg" width="18.414" height="14.828">
                <path d="M17.414 7.414h-16m0 0 6-6m-6 6 6 6" fill="none" stroke="#003ca5" stroke-linecap="round"
                      stroke-linejoin="round" stroke-width="2"/>
            </svg>
        </button>
        <button :disabled="atEnd" @click="scroll('right')"
                class="bg-white border-2 border-solid border-midnightblue-100 flex items-center justify-center sm:mt-0 rounded-full w-12 h-12 z-10  disabled:opacity-20 transition-opacity">
            <svg xmlns="http://www.w3.org/2000/svg" width="18.414" height="14.828">
                <path d="M1 7.414h16m0 0-6-6m6 6-6 6" fill="none" stroke="#003ca5" stroke-linecap="round"
                      stroke-linejoin="round" stroke-width="2"/>
            </svg>
        </button>
    </div>
</div>