<x-app-layout>
    <div class="mx-auto max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between">
            <h1 class="text-3xl font-black text-slate-950 dark:text-white">My Community Posts</h1>
            <a href="{{ route('community.posts.create') }}" class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-black text-white">New Post</a>
        </div>

        <div class="mt-6 space-y-4">
            @foreach ($posts as $post)
                <div class="rounded-lg border border-blue-100 bg-white p-5 dark:border-blue-900/50 dark:bg-slate-900">
                    <div class="flex flex-wrap items-center justify-between gap-3">
                        <div>
                            <p class="text-xs font-bold uppercase text-blue-600 dark:text-blue-300">{{ $post->status }} {{ $post->is_hidden ? '/ Hidden' : '' }}</p>
                            <h2 class="mt-1 text-xl font-black text-slate-950 dark:text-white">{{ $post->title }}</h2>
                            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ $post->comments_count }} comments &bull; {{ $post->likes_count }} likes</p>
                        </div>
                        <div class="flex gap-2">
                            <a href="{{ route('community.posts.show', $post) }}" class="rounded-lg border border-blue-100 px-3 py-2 text-sm font-bold text-blue-700 dark:border-blue-900 dark:text-blue-300">View</a>
                            <a href="{{ route('community.posts.edit', $post) }}" class="rounded-lg border border-blue-100 px-3 py-2 text-sm font-bold text-blue-700 dark:border-blue-900 dark:text-blue-300">Edit</a>
                            <form method="POST" action="{{ route('community.posts.destroy', $post) }}" onsubmit="return confirm('Delete this community post?');">
                                @csrf
                                @method('DELETE')
                                <button class="rounded-lg border border-red-200 px-3 py-2 text-sm font-bold text-red-600 dark:border-red-900/60">Delete</button>
                            </form>
                        </div>
                    </div>
                    @include('community.partials.image-grid', ['images' => $post->images])
                </div>
            @endforeach
        </div>
        <div class="mt-6">{{ $posts->links() }}</div>
    </div>
</x-app-layout>
