<div>
    <div class="flex" id="comment-{{ $comment->id }}">
        <div class="flex-shrink-0 mr-4">
            @if($comment->isDeletedByModerator())
            <img class="h-10 w-10 rounded-full" src="{{ asset('images/default-avatar.webp') }}" alt="Deleted comment">
            @else
            <img class="h-10 w-10 rounded-full" src="{{ $comment->user->getAvatar() }}" alt="{{ $comment->user->name }}">
            @endif
        </div>
        <div class="flex-grow">
            <div class="flex gap-2">
                @if($comment->isDeletedByModerator())
                    @if (Auth::check() && (Auth::user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR) || Auth::user()->hasRole(\App\Enums\UserRole::MODERATOR)))
                    <p class="font-medium text-gray-900 dark:text-gray-100">Deleted ({{ $comment->user->name }})</p>
                    @else
                    <p class="font-medium text-gray-900 dark:text-gray-100">Deleted</p>
                    @endif
                @else
                <p class="font-medium text-gray-900 dark:text-gray-100">{{ $comment->user->name }}</p>
                @endif
                @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::MODERATOR))
                <a data-te-toggle="tooltip" title="Admin" class="text-rose-600">Moderator</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">
                @if($comment->isDeletedByModerator())
                    <div class="text-gray-700 dark:text-gray-200">Deleted by moderation.</div>
                    @if (Auth::check() && (Auth::user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR) || Auth::user()->hasRole(\App\Enums\UserRole::MODERATOR)))
                    <div class="text-gray-700 dark:text-gray-300 pt-1">Original comment: {!! $comment->presenter()->markdownBody() !!}</div>
                    @endif
                @else
                    @if ($isEditing)
                        <form wire:submit.prevent="editComment">
                            <div>
                                <label for="comment" class="sr-only">Comment body</label>
                                <textarea id="comment" name="comment" rows="3"
                                        class="bg-white dark:bg-neutral-700 shadow-sm block w-full focus:ring-rose-500 focus:border-rose-500 border-gray-300 dark:border-gray-400/40 text-gray-900 dark:text-gray-200 placeholder:text-gray-400 rounded-md
                                            @error('editState.body') border-red-500 @enderror"
                                        placeholder="Write something" wire:model.defer="editState.body"></textarea>
                                @error('editState.body')
                                <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="mt-3 flex items-center justify-between">
                                <button type="submit"
                                        class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-rose-500">
                                    Edit
                                </button>
                            </div>
                        </form>
                    @else
                        <div class="text-gray-700 dark:text-gray-200">{!! $comment->presenter()->markdownBody() !!}</div>
                    @endif
                @endif
            </div>
            <div class="mt-2 space-x-2 flex flex-row">
                <span class="text-gray-500 dark:text-gray-300">
                    {{ $comment->presenter()->relativeCreatedAt() }}
                </span>

                @guest
                    <span data-te-toggle="tooltip" title="Please login to like the episode" class="text-gray-800 cursor-pointer dark:text-gray-200">
                        <i class="fa-regular fa-heart"></i> {{ $comment->likeCount() }}
                    </span>
                @endguest

                @auth
                    <!-- Like Button -->
                    <button class="text-gray-800 dark:text-gray-200 leading-tight cursor-pointer whitespace-nowrap" wire:click="like">
                        @if ($liked)
                        <i class="fa-solid fa-heart text-rose-600"></i> {{ $likeCount }}
                        @else
                        <i class="fa-solid fa-heart"></i> {{ $likeCount }}
                        @endif
                    </button>
                @endauth

                @auth
                    @if ($comment->depth() < 2)
                        <button wire:click="$toggle('isReplying')" type="button" class="text-gray-900 dark:text-gray-100 font-medium">
                            Reply
                        </button>
                    @endif

                    @can ('update', $comment)
                        <button wire:click="$toggle('isEditing')" type="button" class="text-gray-900 dark:text-gray-100 font-medium">
                            Edit
                        </button>
                    @endcan

                    @can ('destroy', $comment)
                        <button x-data="{
                            confirmCommentDeletion () {
                                if (window.confirm('Are you sure you want to delete this comment?')) {
                                    @this.call('deleteComment');
                                }
                            }
                        }"
                            @click="confirmCommentDeletion"
                            type="button"
                            class="text-gray-900 dark:text-gray-100 font-medium"
                        >
                            Delete
                        </button>
                    @endcan
                    
                    @can ('restore', $comment)
                        <button
                            wire:click="restoreComment"
                            type="button"
                            class="text-gray-900 dark:text-gray-100 font-medium"
                        >
                            Restore
                        </button>
                    @endcan
                @endauth
            </div>
        </div>
    </div>

    <div class="ml-14 mt-6">
        @if ($isReplying)
            <form wire:submit.prevent="postReply" class="my-4">
                <div>
                    <label for="comment" class="sr-only">Reply body</label>
                    <textarea id="comment" name="comment" rows="3"
                              class="bg-white dark:bg-neutral-700 shadow-sm block w-full focus:ring-rose-500 focus:border-rose-500 border-gray-300 dark:border-gray-400/40 text-gray-900 dark:text-gray-200 placeholder:text-gray-400 rounded-md
                                        @error('replyState.body') border-red-500 @enderror"
                              placeholder="Write something" wire:model.defer="replyState.body"></textarea>
                    @error('replyState.body')
                    <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>
                <div class="mt-3 flex items-center justify-between">
                    <button type="submit"
                            class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-rose-500">
                        Comment
                    </button>
                </div>
            </form>
        @endif

        @foreach ($comment->children as $child)
            <livewire:comment :comment="$child" :key="$child->id"/>
        @endforeach
    </div>
</div>