<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 mb-30">
    <div class="sidebar custom-sidebar">
        <div class="news-tab mb-30">
            <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="latest-tab" data-bs-toggle="tab" data-bs-target="#latest"
                        type="button" role="tab" aria-controls="latest" aria-selected="true">
                        @lang('Latest')
                    </button>
                    <button class="nav-link" id="read-tab" data-bs-toggle="tab" data-bs-target="#read" type="button"
                        role="tab" aria-controls="read" aria-selected="false">
                        @lang('Must Read')
                    </button>
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="latest">
                    <div class="widget">
                        <ul class="small-news-list">
                            @forelse($bannerLatestNews as $latestNewsItem)
                                <li class="small-single-news">
                                    <div class="thumb">
                                        <a href="{{ route('news.details', ['category' =>$latestNewsItem->category->slug, 'news' => $latestNewsItem->id]) }}">
                                            <img src="{{ getImage(getFilePath('news') . '/' . $latestNewsItem->image, getFileSize('news')) }}" alt="item">
                                        </a>
                                    </div>
                                    <div class="content">
                                        <h5 class="title">
                                            <a href="{{ route('news.details', ['category' =>$latestNewsItem->category->slug, 'news' => $latestNewsItem->id]) }}">
                                                {{ __(@$latestNewsItem->title) }}
                                            </a>
                                            <div class="news-time py-1 fs-9">
                                                <i class="fa-regular fa-clock me-1"></i> {{bn_number(diffForHumans($latestNewsItem->created_at)) }}
                                            </div>
                                        </h5>
                                    </div>
                                </li>
                            @empty
                            @endforelse
                        </ul>
                    </div>
                </div>
                <div class="tab-pane fade" id="read">
                    <div class="widget">
                        <ul class="small-news-list">
                            @forelse($bannerMustRead as $bannerMustReadItem)
                                <li class="small-single-news">
                                    <div class="thumb">
                                        <img src="{{ getImage(getFilePath('news') . '/' . $bannerMustReadItem->image, getFileSize('news')) }}"
                                            alt="item">
                                    </div>
                                    <div class="content">
                                        <h5 class="title">
                                            <a href="{{ route('news.details', ['category' =>$bannerMustReadItem->category->slug, 'news' => $bannerMustReadItem->id]) }}">
                                                {{ __(@$bannerMustReadItem->title) }}
                                            </a>
                                        </h5>
                                    </div>
                                </li>
                            @empty
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="widget mb-30">
            <h3 class="widget-title">@lang('News Live')</h3>
            <div class="live-thumb">
                <iframe width="100%" height="200px" src="{{ gs('live_news_link') }}" frameborder="0"
                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen></iframe>
            </div>
        </div>
        @if ($bannerLastTrending)
            <div class="widget">
                <h3 class="widget-title">@lang('Trending')</h3>
                <div class="trending-item">
                    <div class="trending-thumb">
                        <a href="{{ route('news.details', ['category' =>$bannerLastTrending->category->slug, 'news' => $bannerLastTrending->id]) }}">
                            <img src="{{ getImage(getFilePath('news') . '/' . $bannerLastTrending->image, getFileSize('news')) }}" alt="news-banner">
                        </a>
                    </div>
                    <div class="trending-content">
                        <h4 class="title">
                            <a href="{{ route('news.details',  ['category' =>$bannerLastTrending->category->slug, 'news' => $bannerLastTrending->id]) }}">
                                {{ strLimit(@$bannerLastTrending->title, 100) }}
                            </a>
                        </h4>
                        <p>{{ strLimit(@$bannerLastTrending->short_description, 300) }}</p>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>