@extends('layouts.blog')

@section('title', $author->name)

@section('content')
    <div class="flex flex-col md:flex-row items-start md:items-center gap-6 mb-8">
        <img src="{{ $author->photo }}" alt="{{ $author->name }}" class="w-24 h-24 rounded-full">
        <div>
            <h1 class="text-3xl font-bold mb-2">{{ $author->name }}</h1>
            @if($author->bio)
                <p class="text-gray-600 mb-3">{{ $author->bio }}</p>
            @endif
            <div class="flex space-x-4">
                @if($author->twitter_handle)
                    <a href="https://twitter.com/{{ $author->twitter_handle }}" target="_blank" class="text-gray-500 hover:text-indigo-600">
                        <i class="fab fa-twitter"></i> Twitter
                    </a>
                @endif
                @if($author->github_handle)
                    <a href="https://github.com/{{ $author->github_handle }}" target="_blank" class="text-gray-500 hover:text-indigo-600">
                        <i class="fab fa-github"></i> GitHub
                    </a>
                @endif
            </div>
        </div>
    </div>
    
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        @forelse ($posts as $post)
            <article class="bg-white rounded-lg shadow-sm overflow-hidden">
                @if($post->banner_url)
                    <a href="{{ route('blog.show', $post) }}">
                        <img src="{{ $post->banner_url }}" alt="{{ $post->title }}" class="w-full h-48 object-cover">
                    </a>
                @endif
                <div class="p-6">
                    <div class="mb-3">
                        <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-xl font-bold mb-3">
                        <a href="{{ route('blog.show', $post) }}" class="hover:text-indigo-600">
                            {{ $post->title }}
                        </a>
                    </h2>
                    <p class="text-gray-600">{{ $post->excerpt }}</p>
                </div>
            </article>
        @empty
            <p class="text-gray-600">No posts found for this author.</p>
        @endforelse
    </div>
    
    {{ $posts->links() }}
@endsection