@if ($comments->isNotEmpty())
    <div
        class="mb-5 block rounded-lg bg-white px-4 py-2 dark:bg-slate-800 dark:text-slate-200">
        <div class="relative mb-2 flex items-center gap-2 pb-2">
            <span class="relative flex h-2 w-2">
                <span
                    class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary-400 opacity-75"></span>
                <span class="relative inline-flex h-2 w-2 rounded-full bg-primary-500"></span>
            </span>
            <div class="text-base font-medium">
                {{ __('Latest comments') }}
            </div>
        </div>
        <div class="space-y-5">
            @foreach ($comments as $comment)
                <div class="flex flex-col">
                    <div class="flex flex-wrap items-center gap-2">
                        @isset($comment->user)
                            <a href="{{ route('user.show', ['user' => $comment->user->username]) }}"
                                class="flex items-center gap-2">
                                <img src="{{ $comment->user->getAvatar() }}" class="h-6 w-6 rounded-full bg-slate-50"
                                    alt="{{ $comment->user->name ? $comment->user->name : $comment->user->username }}" />
                                <div
                                    class="line-clamp-1 text-sm font-semibold transition duration-150 ease-linear hover:text-primary-500">
                                    {{ $comment->user->name ? $comment->user->name : $comment->user->username }}
                                </div>
                            </a>
                        @else
                            <img src="{{ asset('images/default-avatar.png') }}" class="h-6 w-6 shrink-0 rounded-full" />
                            <div class="text-sm font-semibold dark:text-slate-200">
                                {{ __('Account deleted') }}
                            </div>
                        @endisset
                        <time datetime="{{ $comment->created_at }}"
                            class="text-xs text-gray-600 dark:text-slate-400">{{ $comment->created_at->diffForHumans() }}</time>
                    </div>
                    <div class="my-1.5 rounded-lg bg-gray-50 px-3 py-2 dark:bg-slate-700">
                        <span class="line-clamp-3 break-all">{{ $comment->comment }}</span>
                    </div>
                    <a href="{{ route('story.show', ['story' => $comment->story->slug]) }}"
                        class="flex items-center gap-1 pl-1 text-sm font-semibold">
                        <x-icons.arrows.arrow-return-right class="h-4 w-4 shrink-0 text-gray-400" />
                        <span
                            class="line-clamp-1 transition duration-150 ease-linear hover:text-primary-500">{{ $comment->story->title }}</span>
                    </a>
                </div>
            @endforeach
        </div>
    </div>
@endif