{{--home page slider--}}
@if ($currentChannel->slider)
    <slider2-component direction="'forward'"></slider2-component>

    @push('scripts')
        <script type="text/x-template" id="slider2-template">
            <div class="slides-container">
                <carousel-component
                    loop="true"
                    timeout="5000"
                    autoplay="true"
                    slides-per-page="1"
                    navigation-enabled="false"
                    pagination-enabled="true"
                    :slider-direction="direction"
                    :slides-count="{{ ! empty($sliderData) ? sizeof($sliderData) : 1 }}">

                    @if (!empty($sliderData))
                        @foreach ($sliderData as $index => $slider)

                            @php
                                $textContent = str_replace("\r\n", '', $slider['content']);
                            @endphp

                            @if($slider['is_mobile_view'] == 0)
                                <slide slot="slide-{{ $index }}" v-if="!isMobileView">
                                    <a @if($slider['slider_path']) href="{{ $slider['slider_path'] }}" @endif>
                                        <img
                                            alt="{{@$slider['alt_name']}}"
                                            height="100%"
                                            width="100%"
                                            class=""
                                            src="{{ \Illuminate\Support\Facades\Storage::url($slider['path']) }}"/>

                                        <div class="show-content" v-html="'{{ $textContent }}'">
                                        </div>
                                    </a>
                                </slide>
                            @endif
                            @if($slider['is_mobile_view'] == 1)
                                <slide slot="slide-{{ $index }}" v-if="isMobileView">
                                    <a @if($slider['slider_path']) href="{{ $slider['slider_path'] }}" @endif>
                                        <img
                                            alt="{{@$slider['alt_name']}}"
                                            height="100%"
                                            width="100%"
                                            class=""
                                            src="{{ \Illuminate\Support\Facades\Storage::url($slider['path']) }}"/>
                                        <div class="show-content" v-html="'{{ $textContent }}'">
                                        </div>
                                    </a>
                                </slide>
                            @endif
                        @endforeach
                    @endif
                </carousel-component>
            </div>
        </script>

        <script type='text/javascript'>
            (() => {
                Vue.component('slider2-component', {
                    template: '#slider2-template',
                    props: ['direction'],

                    data: function () {
                        return {
                            isMobileView: this.$root.isMobile(),
                        }
                    },

                    mounted: function () {
                        let banners = this.$el.querySelectorAll('img');
                        banners.forEach(banner => {
                            banner.style.display = 'block';
                        });
                    }
                })
            })()
        </script>
    @endpush
@endif