<x-app-layout>
    <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-black text-slate-950 dark:text-white">Reported Community Content</h1>

        <div class="mt-6 space-y-4">
            @foreach ($reports as $report)
                <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-start justify-between gap-3">
                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-black text-slate-950 dark:text-white">{{ $report->reason }} &bull; {{ $report->status }}</p>
                            <p class="mt-1 text-sm text-slate-600 dark:text-slate-300">Reporter: {{ $report->reporter->name }}</p>
                            <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">{{ $report->details ?: 'No extra details.' }}</p>

                            @if ($report->post)
                                <a href="{{ route('community.posts.show', $report->post) }}" class="mt-3 inline-flex text-sm font-bold text-blue-700 dark:text-blue-300">View reported post</a>
                                @include('community.partials.image-grid', [
                                    'images' => $report->post->images,
                                    'post' => $report->post,
                                    'deleteRouteName' => 'admin.community.posts.images.destroy',
                                    'deletable' => true,
                                ])
                            @endif

                            @if ($report->comment)
                                <form method="POST" action="{{ route('admin.community.comments.destroy', $report->comment) }}" class="mt-3" onsubmit="return confirm('Delete this reported comment?');">
                                    @csrf
                                    @method('DELETE')
                                    <button class="text-sm font-black text-red-600 dark:text-red-300">Delete reported comment</button>
                                </form>
                            @endif
                        </div>

                        <form method="POST" action="{{ route('admin.community.reports.update', $report) }}" class="flex gap-2">
                            @csrf
                            @method('PATCH')
                            <select name="status" class="rounded-lg border-blue-100 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
                                @foreach (['open','reviewed','dismissed'] as $status)
                                    <option @selected($report->status === $status)>{{ $status }}</option>
                                @endforeach
                            </select>
                            <button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-black text-white">Update</button>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="mt-6">{{ $reports->links() }}</div>
    </div>
</x-app-layout>
