@once
        <style>
            .blog-sidebar {
                display: grid;
                gap: 16px;
            }

            .blog-widget {
                padding: 18px;
                background: var(--bg2);
                border: 1px solid rgba(255, 255, 255, .08);
                border-radius: 8px;
            }

            .blog-widget h3 {
                font-size: 18px;
                font-weight: 900;
                margin-bottom: 16px;
                color: var(--text);
            }

            .blog-widget__search {
                display: grid;
                grid-template-columns: 1fr 48px;
                gap: 8px;
            }

            .blog-widget__search input {
                min-height: 46px;
                border-radius: 8px;
                background: var(--bg);
                border: 1px solid rgba(255, 255, 255, .08);
                color: var(--text);
            }

            .blog-widget__search button {
                border: 0;
                border-radius: 8px;
                background: var(--primaryColor);
                color: #fff;
            }

            .blog-category-list,
            .blog-tag-list {
                display: grid;
                gap: 9px;
            }

            .blog-category-list a,
            .blog-tag-list a {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #9fb0cc;
                background: rgba(255, 255, 255, .03);
                border: 1px solid rgba(255, 255, 255, .06);
                border-radius: 8px;
                padding: 9px 11px;
            }

            .blog-category-list a.active,
            .blog-category-list a:hover,
            .blog-tag-list a.active,
            .blog-tag-list a:hover {
                color: #fff;
                border-color: rgba(73, 88, 165, .5);
                background: rgba(73, 88, 165, .18);
            }

            .blog-recent-list {
                display: grid;
                gap: 14px;
            }

            .blog-recent {
                display: grid;
                grid-template-columns: 82px 1fr;
                gap: 12px;
                align-items: center;
            }

            .blog-recent img {
                width: 82px;
                height: 56px;
                object-fit: cover;
                border-radius: 8px;
            }

            .blog-recent a {
                color: var(--text);
                line-height: 1.8;
                font-weight: 800;
            }

            .blog-recent time {
                display: block;
                color: #9fb0cc;
                font-size: 12px;
                margin-top: 2px;
            }
        </style>
@endonce

@php
    use App\Helpers\xDate;

    $sidebarFallbackImage = url('assets/images/logo.png');
@endphp

<aside class="blog-sidebar">
    <div class="blog-widget">
            <h3>{{ __('جستجو') }}</h3>
        <form class="blog-widget__search" action="{{ localized_route('blog.index') }}" method="GET">
                <input type="text" name="q" value="{{ request('q') }}" class="form-control" placeholder="{{ __('عنوان مقاله') }}">
                <button type="submit" aria-label="{{ __('جستجو') }}"><i class="far fa-search"></i></button>
        </form>
    </div>

    @if($categories->isNotEmpty())
        <div class="blog-widget">
            <h3>{{ __('دسته بندی ها') }}</h3>
            <div class="blog-category-list">
                @foreach($categories as $category)
                    <a class="{{ (string) request('category') === (string) $category->id ? 'active' : '' }}"
                       href="{{ localized_route('blog.index', ['category' => $category->id]) }}">
                        <span>{{ $category->localized_title }}</span>
                        <span>{{ $category->published_blogs_count }}</span>
                    </a>
                @endforeach
            </div>
        </div>
    @endif

    @if($recentBlogs->isNotEmpty())
        <div class="blog-widget">
            <h3>{{ __('جدیدترین مقاله ها') }}</h3>
            <div class="blog-recent-list">
                @foreach($recentBlogs as $recentBlog)
                    @php
                        $recentImage = $recentBlog->banner ? url($recentBlog->banner->file_path) : $sidebarFallbackImage;
                        $recentDate = $recentBlog->publish_time ?: $recentBlog->created_at;
                    @endphp
                    <div class="blog-recent">
                        <img src="{{ $recentImage }}" alt="{{ $recentBlog->title }}">
                        <div>
                            <a href="{{ localized_route('blog.single', ['nic_name' => $recentBlog->public_key]) }}">{{ $recentBlog->title }}</a>
                            @if($recentDate)
                                <time>{{ xDate::dateFa('~ j F Y', $recentDate->timestamp) }}</time>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    @if($popularTags->isNotEmpty())
        <div class="blog-widget">
            <h3>{{ __('تگ های پرکاربرد') }}</h3>
            <div class="blog-tag-list">
                @foreach($popularTags as $tag)
                    <a class="{{ (string) request('tag') === (string) $tag->id ? 'active' : '' }}"
                       href="{{ localized_route('blog.index', ['tag' => $tag->id]) }}">
                        <span>{{ $tag->tag }}</span>
                        <span>{{ $tag->published_blogs_count }}</span>
                    </a>
                @endforeach
            </div>
        </div>
    @endif
</aside>