<div id="comment-{{ $comment->id }}">

    <div class="group flex gap-4">

        {{-- Avatar --}}
        <div class="shrink-0">
            @if($comment->isDeletedByModerator())
                <img
                    class="h-10 w-10 rounded-full object-cover opacity-60"
                    src="{{ asset('images/default-avatar.webp') }}"
                    alt="Deleted comment"
                >
            @else
                <img
                    class="h-10 w-10 rounded-full object-cover ring-2 ring-white dark:ring-neutral-800"
                    src="{{ $comment->user->getAvatar() }}"
                    alt="{{ $comment->user->name }}"
                >
            @endif
        </div>

        {{-- Content --}}
        <div class="min-w-0 flex-1">

            <div class="rounded-2xl border border-neutral-200 bg-white px-5 py-4 shadow-sm transition group-hover:border-neutral-300 dark:border-neutral-800 dark:bg-neutral-800 dark:group-hover:border-neutral-700">

                {{-- Header --}}
                <div class="mb-3 flex flex-wrap items-center gap-2">

                    @if($comment->isDeletedByModerator())

                        <span class="font-semibold text-neutral-900 dark:text-neutral-100">
                            @if (Auth::check() && (Auth::user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR) || Auth::user()->hasRole(\App\Enums\UserRole::MODERATOR)))
                                Deleted ({{ $comment->user->name }})
                            @else
                                Deleted
                            @endif
                        </span>

                    @else

                        <span class="font-semibold text-neutral-900 dark:text-neutral-100">
                            {{ $comment->user->name }}
                        </span>

                    @endif

                    {{-- Badges --}}
                    @if($comment->user->hasRole(\App\Enums\UserRole::ADMINISTRATOR))
                        <span class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-700 dark:bg-yellow-500/10 dark:text-yellow-400">
                            <i class="fa-solid fa-crown mr-1"></i>
                            Admin
                        </span>
                    @endif

                    @if($comment->user->hasRole(\App\Enums\UserRole::MODERATOR))
                        <span class="inline-flex items-center rounded-full bg-rose-100 px-2 py-0.5 text-xs font-medium text-rose-700 dark:bg-rose-500/10 dark:text-rose-400">
                            Moderator
                        </span>
                    @endif

                    @if($comment->user->hasRole(\App\Enums\UserRole::SUPPORTER))
                        <span class="inline-flex items-center rounded-full bg-pink-100 px-2 py-0.5 text-xs font-medium text-pink-700 dark:bg-pink-500/10 dark:text-pink-400">
                            <i class="fa-solid fa-heart mr-1"></i>
                            Supporter
                        </span>
                    @endif

                </div>

                {{-- Body --}}
                <div class="prose prose-sm max-w-none dark:prose-invert">

                    @if($comment->isDeletedByModerator())

                        <p class="italic text-neutral-500 dark:text-neutral-400">
                            Deleted by moderation.
                        </p>

                        @if (Auth::check() && (Auth::user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR) || Auth::user()->hasRole(\App\Enums\UserRole::MODERATOR)))
                            <div class="mt-3 rounded-xl bg-neutral-100 p-3 text-sm dark:bg-neutral-800">
                                {!! $comment->presenter()->markdownBody() !!}
                            </div>
                        @endif

                    @else

                        @if ($isEditing)

                            <form wire:submit.prevent="editComment" class="space-y-4">

                                <textarea
                                    rows="4"
                                    wire:model.defer="editState.body"
                                    class="w-full rounded-2xl border border-neutral-300 bg-white px-4 py-3 text-sm text-neutral-900 shadow-sm transition focus:border-rose-500 focus:outline-none focus:ring-4 focus:ring-rose-500/10 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100 @error('editState.body') border-red-500 @enderror"
                                ></textarea>

                                @error('editState.body')
                                    <p class="text-sm text-red-500">
                                        {{ $message }}
                                    </p>
                                @enderror

                                <div class="flex justify-end">
                                    <button
                                        type="submit"
                                        class="rounded-xl bg-rose-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-rose-700"
                                    >
                                        Save Changes
                                    </button>
                                </div>

                            </form>

                        @else
                            <div class="text-gray-700 dark:text-gray-200">
                            {!! $comment->presenter()->markdownBody() !!}
                            </div>
                        @endif

                    @endif

                </div>

                {{-- Footer --}}
                <div class="mt-4 flex flex-wrap items-center gap-4 text-sm">

                    <span class="text-neutral-500 dark:text-neutral-400">
                        {{ $comment->presenter()->relativeCreatedAt() }}
                    </span>

                    {{-- Like --}}
                    @guest
                        <span class="flex items-center gap-1 text-neutral-500 dark:text-neutral-400">
                            <i class="fa-regular fa-heart"></i>
                            {{ $comment->likeCount() }}
                        </span>
                    @endguest

                    @auth
                        <button
                            wire:click="like"
                            class="flex items-center gap-1 text-neutral-500 transition hover:text-rose-600 dark:text-neutral-400 dark:hover:text-rose-400"
                        >
                            @if ($liked)
                                <i class="fa-solid fa-heart text-rose-600"></i>
                            @else
                                <i class="fa-regular fa-heart"></i>
                            @endif

                            {{ $likeCount }}
                        </button>
                    @endauth

                    {{-- Actions --}}
                    @auth

                        @if ($comment->depth() < 2)
                            <button
                                wire:click="$toggle('isReplying')"
                                class="font-medium text-neutral-600 transition hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
                            >
                                Reply
                            </button>
                        @endif

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

                        @can ('destroy', $comment)
                            <button
                                x-data="{
                                    confirmCommentDeletion () {
                                        if (window.confirm('Delete this comment?')) {
                                            @this.call('deleteComment');
                                        }
                                    }
                                }"
                                @click="confirmCommentDeletion"
                                class="font-medium text-red-500 transition hover:text-red-600"
                            >
                                Delete
                            </button>
                        @endcan

                        @can ('restore', $comment)
                            <button
                                wire:click="restoreComment"
                                class="font-medium text-emerald-600 transition hover:text-emerald-700"
                            >
                                Restore
                            </button>
                        @endcan

                    @endauth

                </div>

            </div>

            {{-- Reply Form --}}
            @if ($isReplying)

                <div class="mt-4 ml-2">
                    <form wire:submit.prevent="postReply" class="space-y-4">

                        <textarea
                            rows="3"
                            wire:model.defer="replyState.body"
                            placeholder="Write a reply..."
                            class="w-full rounded-2xl border border-neutral-300 bg-white px-4 py-3 text-sm text-neutral-900 shadow-sm transition focus:border-rose-500 focus:outline-none focus:ring-4 focus:ring-rose-500/10 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100 @error('replyState.body') border-red-500 @enderror"
                        ></textarea>

                        @error('replyState.body')
                            <p class="text-sm text-red-500">
                                {{ $message }}
                            </p>
                        @enderror

                        <div class="flex justify-end">
                            <button
                                type="submit"
                                class="rounded-xl bg-rose-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-rose-700"
                            >
                                Reply
                            </button>
                        </div>

                    </form>
                </div>

            @endif

            {{-- Replies --}}
            @if ($comment->children->count())
                <div class="mt-2 space-y-2 border-l-2 border-neutral-200 pl-6 dark:border-neutral-700">
                    @foreach ($comment->children as $child)
                        <livewire:comment :comment="$child" :key="$child->id"/>
                    @endforeach
                </div>
            @endif

        </div>

    </div>

</div>