@extends('layouts.site')

@section('title', 'Blog')

@section('content')
    <div class="flex flex-col md:flex-row gap-8">
        <div class="md:w-3/4">
            <h1 class="text-3xl font-bold mb-8">Latest Posts</h1>
            
            @forelse ($posts as $post)
                <article class="mb-12 pb-8 border-b border-gray-200">
                    <div class="mb-4">
                        <a href="{{ route('blog.category', $post->category) }}" class="text-indigo-600 text-sm font-medium">
                            {{ $post->category->name }}
                        </a>
                        <span class="mx-2 text-gray-400">•</span>
                        <time datetime="{{ $post->published_at }}" class="text-gray-500 text-sm">
                            {{ $post->published_at->format('M d, Y') }}
                        </time>
                    </div>
                    
                    <h2 class="text-2xl font-bold mb-3">
                        <a href="{{ route('blog.show', $post) }}" class="hover:text-indigo-600">
                            {{ $post->title }}
                        </a>
                    </h2>
                    
                    <p class="text-gray-600 mb-4">{{ $post->excerpt }}</p>
                    
                    <div class="flex items-center">
                        <img src="{{ $post->author->photo }}" alt="{{ $post->author->name }}" class="w-10 h-10 rounded-full mr-3">
                        <div>
                            <a href="{{ route('blog.author', $post->author) }}" class="font-medium hover:text-indigo-600">
                                {{ $post->author->name }}
                            </a>
                        </div>
                    </div>
                </article>
            @empty
                <p class="text-gray-600">No posts found.</p>
            @endforelse

            {{ $posts->links() }}
        </div>
        
        <div class="md:w-1/4">
            <div class="bg-white p-6 rounded-lg shadow-sm mb-6">
                <h3 class="font-bold text-lg mb-4">Categories</h3>
                <ul class="space-y-2">
                    @foreach($categories as $category)
                        <li>
                            <a href="{{ route('blog.category', $category) }}" class="hover:text-indigo-600">
                                {{ $category->name }} ({{ $category->posts_count }})
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
            
            <div class="bg-white p-6 rounded-lg shadow-sm">
                <h3 class="font-bold text-lg mb-4">Authors</h3>
                <ul class="space-y-4">
                    @foreach($authors as $author)
                        <li class="flex items-center">
                            <img src="{{ $author->photo }}" alt="{{ $author->name }}" class="w-8 h-8 rounded-full mr-3">
                            <a href="{{ route('blog.author', $author) }}" class="hover:text-indigo-600">
                                {{ $author->name }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
@endsection