<div class="modal fade" id="confirmDeleteModal{{ $commentId }}" tabindex="-1" aria-labelledby="confirmDeleteModalLabel{{ $commentId }}" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content" style="background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px;">
            <div class="modal-header" style="border-bottom: 1px solid var(--border-color); padding: 20px;">
                <h5 class="modal-title" id="confirmDeleteModalLabel{{ $commentId }}" style="color: var(--text-primary); font-weight: 600;">
                    <i class="bi bi-exclamation-triangle-fill" style="color: var(--brand-red); margin-right: 8px;"></i>
                    Delete Comment
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="padding: 20px;">
                <p style="color: var(--text-primary); margin-bottom: 16px; line-height: 1.5;">
                    Are you sure you want to delete this comment? This action cannot be undone.
                </p>
                <div class="comment-preview" style="background: var(--bg-primary); border-radius: 8px; padding: 12px; font-size: 14px; line-height: 1.4;">
                    {{ Str::limit($body, 100) }}
                </div>
            </div>
            <div class="modal-footer" style="border-top: 1px solid var(--border-color); padding: 16px 20px; gap: 8px;">
                <button type="button" class="action-btn" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button" class="action-btn action-btn-primary" onclick="deleteCommentWithModal({{ $commentId }})">
                    <i class="bi bi-trash"></i> <span>Delete</span>
                </button>
            </div>
        </div>
    </div>
</div>
