{{-- Comment Item with nested replies --}}
<div class="comment-item {{ $comment->status }}" data-id="{{ $comment->id }}" data-level="{{ $level }}">
    <div class="comment-main">
        {{-- Checkbox --}}
        <div class="comment-select">
            <input type="checkbox" class="comment-checkbox" value="{{ $comment->id }}" onchange="updateSelection()">
        </div>

        {{-- Avatar --}}
        <div class="comment-avatar">
            <span class="avatar-initials">{{ $comment->author_initials }}</span>
        </div>

        {{-- Content --}}
        <div class="comment-content">
            <div class="comment-header">
                <div class="comment-author">
                    <span class="author-name">{{ $comment->author_name }}</span>
                    @if($comment->user_id)
                        <span class="author-badge registered">
                            <i class="fas fa-user-check"></i>
                        </span>
                    @endif
                    <span class="comment-email">{{ $comment->author_email }}</span>
                </div>
                <div class="comment-meta">
                    @if($comment->rating)
                        <div class="comment-rating">
                            @for($i = 1; $i <= 5; $i++)
                                <i class="fas fa-star {{ $i <= $comment->rating ? 'filled' : '' }}"></i>
                            @endfor
                        </div>
                    @endif
                    <span class="comment-status status-{{ $comment->status }}">
                        {{ __('comments.' . $comment->status) }}
                    </span>
                    <span class="comment-date" title="{{ $comment->created_at->format('Y-m-d H:i:s') }}">
                        <i class="fas fa-clock"></i>
                        {{ $comment->created_at->diffForHumans() }}
                    </span>
                </div>
            </div>

            <div class="comment-body">
                {!! nl2br(e($comment->content)) !!}
            </div>

            <div class="comment-footer">
                <div class="comment-actions">
                    @if($comment->status !== 'rejected')
                        <button type="button" class="btn-action btn-reject" onclick="rejectComment({{ $comment->id }})" title="{{ __('comments.reject') }}">
                            <i class="fas fa-times"></i>
                        </button>
                    @endif
                    <button type="button" class="btn-action btn-reply" onclick="openReplyModal({{ $comment->id }}, '{{ addslashes($comment->author_name) }}')" title="{{ __('comments.reply') }}">
                        <i class="fas fa-reply"></i>
                    </button>
                    <button type="button" class="btn-action btn-spam" onclick="markAsSpam({{ $comment->id }})" title="{{ __('comments.mark_spam') }}">
                        <i class="fas fa-ban"></i>
                    </button>
                    <button type="button" class="btn-action btn-delete" onclick="deleteComment({{ $comment->id }})" title="{{ __('comments.delete') }}">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>

                @if($comment->hasReplies())
                    <button type="button" class="btn-toggle-replies" onclick="toggleReplies(this)">
                        <i class="fas fa-chevron-down"></i>
                        {{ $comment->replies->count() }} {{ __('comments.replies') }}
                    </button>
                @endif
            </div>

            @if($comment->approved_at)
                <div class="comment-approved-info">
                    <small class="text-muted">
                        <i class="fas fa-check-circle text-success"></i>
                        {{ __('comments.approved_by') }} {{ $comment->approver?->name ?? 'System' }}
                        {{ $comment->approved_at->diffForHumans() }}
                    </small>
                </div>
            @endif
        </div>
    </div>

    {{-- Replies --}}
    @if($comment->replies->count() > 0)
        <div class="comment-replies">
            @foreach($comment->replies as $reply)
                <x-comments::item :comment="$reply" :level="$level + 1" />
            @endforeach
        </div>
    @endif
</div>

