<div>
    <div class="relative pt-5 text-gray-900 dark:text-white xl:max-w-[95%] 2xl:max-w-[90%]" wire:keydown.right.window="nextPage" wire:keydown.left.window="previousPage">
        <div class="flex items-center justify-center">
            <div class="relative overflow-x-auto rounded-lg w-3/6">
                <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-white">
                    <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-pink-700 dark:text-neutral-200 ">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-center">
                                User
                                <input 
                                    wire:model.live.debounce.600ms="userSearch" 
                                    type="search" 
                                    id="live-search" 
                                    class="w-32 h-7 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900" 
                                    placeholder="Search..."
                                >
                            </th>
                            <th scope="col" class="px-6 py-3">
                                Comment
                                <input 
                                    wire:model.live.debounce.600ms="search" 
                                    type="search" 
                                    id="live-search" 
                                    class="ml-2 w-32 h-7 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900" 
                                    placeholder="Search..."
                                >
                            </th>
                            <th scope="col" class="px-6 py-3">
                            </th>
                            <th scope="col" class="px-6 py-3">
                                Actions
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($comments as $comment)
                        <tr wire:key="comment-{{ $comment->id }}" class="bg-white border-t dark:bg-neutral-800 dark:border-pink-700">
                            <td class="px-6 py-4">
                                {{ $comment->user->name }}
                            </td>
                            <th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white max-w-lg">
                                {{ $comment->body }}
                            </th>
                            <th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white max-w-lg">
                                {{ $comment->created_at }}
                            </th>
                            <td class="px-6 py-4">
                                <button wire:click="deleteComment({{$comment->id}})" type="button" class="inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 mt-2">
                                    Delete
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        {{ $comments->links('pagination::tailwind') }}
    </div>
</div>
