@if ($blog_comments && $blog_comments->count() > 0)
    <div class="comments-wrap" id="comments">
        <h3 class="comments-wrap-title">
            {{ $blog_count }}
            {{ $blog_count > 1 ? __('translate.Comments') : __('translate.Comment') }}
        </h3>
        <div class="latest-comments">
            <ul class="list-wrap">
                @foreach ($blog_comments as $comment)
                    <li>
                        <div class="comments-box">
                            <div class="comments-avatar">
                                <a href="{{ route('blog.author', $comment->user_id) }}">
                                    <img src="{{ asset($comment->user?->getFirstMediaUrl('avatar') ?? 'frontend/assets/img/images/avatar.png') }}"
                                        alt="{{ $comment->user?->name ?? '' }}">
                                </a>
                            </div>
                            <div class="comments-text">
                                <div class="avatar-name gap-3">
                                    <a href="{{ route('blog.author', $comment->user_id) }}">
                                        <h6 class="name">{{ $comment?->user?->name ?? '' }}</h6>
                                    </a>
                                    <span class="date">{{ $comment->created_at->format('d M Y') }}</span>
                                </div>
                                <p>
                                    {{ $comment->content }}
                                </p>
                            </div>
                        </div>
                        @if ($comment->children && $comment->children->count() > 0)
                            <ul class="children">
                                @foreach ($comment->children as $child)
                                    <li>
                                        <div class="comments-box">
                                            <div class="comments-avatar">
                                                <a href="{{ route('blog.author', $child->user_id) }}">
                                                    <img src="{{ asset($child->user?->getFirstMediaUrl('avatar') ?? 'frontend/assets/img/images/avatar.png') }}"
                                                        alt="{{ $child->user?->name ?? '' }}">
                                                </a>
                                            </div>
                                            <div class="comments-text">
                                                <div class="avatar-name gap-3">
                                                    <a href="{{ route('blog.author', $child->user_id) }}">
                                                        <h6 class="name">{{ $child?->user?->name ?? '' }}</h6>
                                                    </a>
                                                    <span
                                                        class="date">{{ $child->created_at->format('d M Y') }}</span>
                                                </div>
                                                <p>
                                                    {{ $child->content }}
                                                </p>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </li>
                @endforeach
            </ul>
        </div>
        @include('frontend::components.custom-pagination', ['items' => $blog_comments])
    </div>
@endif

@push('style_section')
    <style>
        .comments-avatar img {
            width: 115px;
            height: 115px;
        }

        .comments-text .avatar-name .name {
            margin-right: 20px;
        }
    </style>
@endpush