@props(['sliders'])

<swiper-container init="false" slides-per-view="1" speed="500" navigation="true" pagination="true">
    @foreach ($sliders as $slider)
        <swiper-slide>
            <a href="{{ $slider['link'] }}">
                <picture>
                    @php
                        $base_url = env('CDN_URL') . '/' . $slider['folder'];
                        $poster_url = !empty($slider['poster'])
                            ? $base_url . '/' . $slider['poster'] . '?w=1500'
                            : env('VITE_CDN_URL') . '/assets' . '/default/imageDefault2.jpg';
                        $poster_mobile_url = !empty($slider['poster_mobile'])
                            ? $base_url . '/' . $slider['poster_mobile'] . '?w=800'
                            : env('VITE_CDN_URL') . '/assets' . '/default/imageDefault2.jpg';
                        // dd($base_url, $slider['poster_mobile'])
                    @endphp
                    <source media="(min-width: 768px)" srcset="{{ e($poster_url) }}">
                    <source media="(max-width: 767px)" srcset="{{ e($poster_mobile_url) }}">
                    <img src="{{ e($poster_url) }}" alt="{{ $slider['title'] }}"
                        class="w-full aspect-square md:aspect-[19/6]" loading="lazy" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </swiper-slide>
    @endforeach
</swiper-container>


@once
    @push('scripts')
        <script type="module">
            const swiperMain = document.querySelector('swiper-container');
            const params = {
                injectStyles: [
                    `
                    .swiper-button-prev svg,
                    .swiper-button-next svg {
                        display: none;
                    }
                    .swiper-button-prev::after {
                        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.369 12.007 7.736 7.736c.263.263.39.57.381.92-.009.352-.145.659-.408.922s-.57.394-.92.394c-.351 0-.658-.131-.922-.394l-8.104-8.078a2.103 2.103 0 0 1-.473-.71 2.111 2.111 0 0 1-.158-.79c0-.263.052-.526.158-.79.105-.263.263-.5.473-.71l8.104-8.104c.264-.263.575-.39.935-.382.36.009.67.145.934.408.263.263.394.57.394.921 0 .35-.131.658-.394.92l-7.736 7.737Z' fill='currentColor' /%3E%3C/svg%3E");
                        content: "";
                        display: block;
                        width: 24px;
                        height: 24px;
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-color: transparent;
                    }
                    .swiper-button-next::after {
                        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.631 11.993 6.895 4.257a1.216 1.216 0 0 1-.381-.92c.009-.352.145-.659.408-.922s.57-.394.92-.394c.351 0 .658.131.922.394l8.104 8.078c.21.21.368.448.474.71.105.264.157.527.157.79s-.052.526-.157.79c-.106.263-.264.5-.474.71l-8.104 8.104c-.264.263-.575.39-.935.382a1.325 1.325 0 0 1-.934-.408 1.262 1.262 0 0 1-.394-.921c0-.35.131-.658.394-.92l7.736-7.737Z' fill='currentColor' /%3E%3C/svg%3E");
                        content: "";
                        display: block;
                        width: 24px;
                        height: 24px;
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-color: transparent;
                    }
                    .swiper-button-next.swiper-button-disabled,
                    .swiper-button-prev.swiper-button-disabled {
                        pointer-events: auto;
                    }
                    `
                ],
                pagination: {
                    clickable: true,
                }
            }
            Object.assign(swiperMain, params);
            swiperMain.initialize();
        </script>
    @endpush
@endonce