@foreach ($comments as $comment)
    <div id="comment-{{ $comment->id }}" class="display-comment mb-4{{ $comment->parent_id != null ? ' mx-4 px-3' : '' }}" data-parent="{{ $comment->id }}">
        <div class="form-append border-bottom mb-4" data-parent="{{ $comment->id }}">
            <div class="d-flex">
                <div class="cm-col-avatar mt-1 me-2">
                    @svg('assets/images/icons/user.svg', 'text-gray')
                </div>
                <div>
                    <div class="d-flex align-items-center mb-1">
                        <div class="fs-8 fw-bold">{{ $comment->author_name }}</div>
                        {{-- <div class="comment-like position-relative ms-3" role="button" data-type="like">
                            @svg('assets/images/icons/like.svg')
                            @if ($comment->like_count > 0)
                                <span class="position-absolute top-0 start-0 translate-middle badge rounded-pill bg-gray">
                                    {{ $comment->like_count }}
                                    <span class="visually-hidden">post like</span>
                                </span>
                            @endif
                        </div> --}}
                        <div class="comment-show-replay ms-3" role="button" data-parent="{{ $comment->id }}">
                            @svg('assets/images/icons/reply.svg')
                        </div>
                    </div>
                    <div class="mb-2 fs-9">
                        {{ $comment->created_at }}
                    </div>
                    <div class="mb-4 fs-7">{!! nl2br($comment->content) !!}</div>
                </div>
            </div>
        </div>
        @include('front.items.comments-display', ['comments' => $comment->approvedReplies])
    </div>
@endforeach