<section>
    <div id="comments" class="overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-sm dark:border-neutral-800 dark:bg-neutral-900">

        {{-- Header --}}
        <div class="border-b border-neutral-200 px-6 py-5 dark:border-neutral-800">
            <h2 class="text-xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-100">
                Comments
            </h2>
        </div>

        {{-- Comment Form --}}
        <div class="border-b border-neutral-200 bg-neutral-50/80 px-6 py-6 dark:border-neutral-800 dark:bg-neutral-950/40">
            @auth
                <div class="flex gap-4">
                    <img
                        class="h-11 w-11 rounded-full object-cover ring-2 ring-white dark:ring-neutral-800"
                        src="{{ auth()->user()->getAvatar() }}"
                        alt="{{ auth()->user()->name }}"
                    >

                    <div class="flex-1">
                        <form wire:submit.prevent="postComment" class="space-y-4">

                            <div>
                                <label for="comment" class="sr-only">
                                    Comment body
                                </label>

                                <textarea
                                    id="comment"
                                    rows="4"
                                    wire:model.defer="newCommentState.body"
                                    placeholder="Write a comment..."
                                    class="w-full rounded-2xl border border-neutral-300 bg-white px-4 py-3 text-sm text-neutral-900 placeholder:text-neutral-400 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-900 dark:text-neutral-100 dark:placeholder:text-neutral-500 dark:focus:border-rose-500 @error('newCommentState.body') border-red-500 @enderror"
                                ></textarea>

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

                            <div class="flex justify-end">
                                <button
                                    type="submit"
                                    class="inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-rose-700 focus:outline-none focus:ring-4 focus:ring-rose-500/30"
                                >
                                    Post Comment
                                </button>
                            </div>

                        </form>
                    </div>
                </div>
            @endauth

            @guest
                <div class="rounded-xl border border-dashed border-neutral-300 p-6 text-center dark:border-neutral-700">
                    <p class="text-sm text-neutral-600 dark:text-neutral-400">
                        Log in to join the discussion.
                    </p>
                </div>
            @endguest

        </div>

        {{-- Comments --}}
        <div class="px-6 py-6">
            @if ($comments->isNotEmpty())

                <div class="space-y-6">
                    @foreach($comments as $comment)
                        <livewire:comment :comment="$comment" :key="$comment->id"/>
                    @endforeach
                </div>

                <div class="mt-8">
                    {{ $comments->links('pagination::tailwind') }}
                </div>

            @else

                <div class="rounded-2xl border border-dashed border-neutral-300 py-12 text-center dark:border-neutral-700">
                    <p class="text-neutral-500 dark:text-neutral-400">
                        No comments yet.
                    </p>
                </div>

            @endif
        </div>
    </div>
</section>