<div class="space-y-6">
    <div>
        <flux:heading size="xl">Admin overview</flux:heading>
        <flux:text class="mt-1 text-zinc-600 dark:text-zinc-400">Blog and trust directory at a glance.</flux:text>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <flux:card class="p-4">
            <flux:text class="text-sm text-zinc-500">Published posts</flux:text>
            <flux:heading size="xl">{{ number_format($this->stats['published_posts']) }}</flux:heading>
        </flux:card>
        <flux:card class="p-4">
            <flux:text class="text-sm text-zinc-500">Draft posts</flux:text>
            <flux:heading size="xl">{{ number_format($this->stats['draft_posts']) }}</flux:heading>
        </flux:card>
        <flux:card class="p-4">
            <flux:text class="text-sm text-zinc-500">Reviewed websites</flux:text>
            <flux:heading size="xl">{{ number_format($this->stats['reviewed_websites']) }}</flux:heading>
        </flux:card>
        <flux:card class="p-4">
            <flux:text class="text-sm text-zinc-500">New users today</flux:text>
            <flux:heading size="xl">{{ number_format($this->stats['new_users_today']) }}</flux:heading>
        </flux:card>
    </div>

    <flux:card class="p-4">
        <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
            <flux:heading size="lg">Recent blog posts</flux:heading>
            <flux:button href="{{ route('admin.blog.posts.index') }}" variant="ghost" size="sm" wire:navigate>View all</flux:button>
        </div>
        <div class="space-y-2">
            @forelse ($this->recentPosts as $post)
                <div class="flex flex-wrap items-center justify-between gap-2 rounded-lg bg-zinc-50 dark:bg-zinc-800 px-3 py-2">
                    <flux:text class="font-medium">{{ $post->title }}</flux:text>
                    <div class="flex items-center gap-2">
                        <flux:badge color="{{ $post->status === 'published' ? 'lime' : 'zinc' }}">{{ ucfirst($post->status) }}</flux:badge>
                        @if ($post->category)
                            <flux:text class="text-xs text-zinc-500">{{ $post->category->name }}</flux:text>
                        @endif
                    </div>
                </div>
            @empty
                <flux:text class="text-zinc-500">No posts yet. Create one under Blog management.</flux:text>
            @endforelse
        </div>
    </flux:card>
</div>
