@if (!empty($banners))
    <section class="banner">
        <section class="swiper-container banner__home">
            <div class="swiper-wrapper">
                @foreach ($banners as $banner)
                    <div class="swiper-slide">
                        <div class="main__banner">
                            @if ($banner['select_banner_type'] === 'image')
                                @php
                                    $bannerImage = ($isMobile && isset($banner['banner_mobile'])) ? $banner['banner_mobile'] : $banner['banner_desktop'];
                                @endphp
                                <img src="{{ asset("storage/{$bannerImage}") }}" alt="{{ $siteTitle }}">
                            @else
                                <video autoplay muted>
                                    <source src="{{ asset("storage/{$banner['video_file']}") }}" />
                                </video>
                            @endif

                            <div class="container">
                                <div class="banner__block">
                                    <p>{{ $banner['tag'] ?? '' }}</p>

                                    @if ( !empty($banner['title']))
                                        <h4>
                                            {{ Str::beforeLast($banner['title'], ' ') }}
                                            <span>{{ Str::afterLast($banner['title'], ' ') }}</span>
                                        </h4>
                                    @endif

                                    @if (!empty($banner['link_btn']))
                                        <a href="{{ $banner['link_btn'] }}" target="{{ $banner['target_btn'] }}" rel="noopener noreferer">
                                            {{ $banner['title_btn'] }}
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>

        <div class="swiper-pagination home-pagination"></div>
    </section>
@endif