<div>
    <div class="flex">
        <div class="flex-shrink-0 mr-4">
            <img class="h-10 w-10 rounded-full" src="{{ $comment->user->getAvatar() }}" alt="{{ $comment->user->name }}">
        </div>
        <div class="flex-grow">
            <div class="flex gap-2">
                <p class="font-medium text-gray-900 dark:text-gray-100">{{ $comment->user->name }}</p>
                @if($comment->user->hasRole(\App\Enums\UserRole::ADMINISTRATOR))
                <a data-te-toggle="tooltip" title="Admin"><i class="fa-solid fa-crown text-yellow-600"></i></a>
                @endif
                @if($comment->user->hasRole(\App\Enums\UserRole::SUPPORTER))
                <a data-te-toggle="tooltip" title="Badge of appreciation for the horny people supporting us! :3"><i class="fa-solid fa-hand-holding-heart text-rose-600"></i></a>
                @endif
            </div>
            <div class="mt-1 flex-grow w-full">
                <div class="text-gray-700 dark:text-gray-200">{!! $comment->presenter()->markdownBody() !!}</div>
            </div>
            <div class="mt-2 space-x-2">
                <span class="text-gray-500 dark:text-gray-300 font-medium">
                    {{ $comment->presenter()->relativeCreatedAt() }}
                </span>
            </div>
        </div>
    </div>
</div>