@php
    $count = count($banners ?? []);
@endphp

@if($count >= 1)
    <div class="row no-gutters">
        <div class="col-12 col-sm-12 col-md-12">

            <div id="carouselExampleIndicators-desktop" class="carousel slide desktop" data-ride="carousel">

                @if ($count > 1)
                <ol class="carousel-indicators">
                    @foreach($banners as $i => $banner)
                        <li data-target="#carouselExampleIndicators-desktop" data-slide-to="{{ $i }}"></li>
                    @endforeach
                </ol>
                @endif

                <div class="carousel-inner">
                    @foreach($banners as $i => $banner)
                        @if( $banner['desktop_image_url'] != '' || $banner['desktop_image_url'] != NULL)
                            <div class="carousel-item @if($i==0) active @endif">
                                <img class="w-100" src="{{ asset($banner['desktop_image_url']) }}"
                                    alt="Promotion">
                            </div>
                        @endif
                    @endforeach
                </div>

                @if($count > 1)
                    <a class="carousel-control-prev" href="#carouselExampleIndicators-desktop" role="button"
                        data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">{{ __('label.slider_previous') }}</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators-desktop" role="button"
                        data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">{{ __('label.slider_next') }}</span>
                    </a>
                @endif
            </div>


            <div id="carouselExampleIndicators-mobile" class="carousel slide mobile" data-ride="carousel">

                @if ($count > 1)
                <ol class="carousel-indicators">
                    @foreach($banners as $i => $banner)
                        <li data-target="#carouselExampleIndicators-mobile" data-slide-to="{{ $i }}"></li>
                    @endforeach
                </ol>
                @endif

                <div class="carousel-inner">
                    @foreach($banners as $i => $banner)
                        @if( $banner['mobile_image_url'] != '' || $banner['mobile_image_url'] != NULL)
                            <div class="carousel-item @if($i==0) active @endif">
                                <img class="w-100" src="{{ asset($banner['mobile_image_url']) }}"
                                    alt="Promotion">
                            </div>
                        @endif
                    @endforeach
                </div>

                @if($count > 1)
                    <a class="carousel-control-prev" href="#carouselExampleIndicators-mobile" role="button"
                        data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">{{ __('label.slider_previous') }}</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators-mobile" role="button"
                        data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">{{ __('label.slider_next') }}</span>
                    </a>
                @endif
            </div>

        </div>
    </div>
@endif