@extends('layouts.blog')

@section('title', $post->title)

@section('content')
    <article class="max-w-3xl mx-auto">
        <div class="mb-6">
            <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>
        
        <h1 class="text-4xl font-bold mb-6">{{ $post->title }}</h1>
        
        <div class="flex items-center mb-8">
            <img src="{{ $post->author->photo }}" alt="{{ $post->author->name }}" class="w-12 h-12 rounded-full mr-4">
            <div>
                <a href="{{ route('blog.author', $post->author) }}" class="font-medium hover:text-indigo-600 block">
                    {{ $post->author->name }}
                </a>
                <div class="flex space-x-4 mt-1">
                    @if($post->author->twitter_handle)
                        <a href="https://twitter.com/{{ $post->author->twitter_handle }}" target="_blank" class="text-gray-500 hover:text-indigo-600">
                            <i class="fab fa-twitter"></i>
                        </a>
                    @endif
                    @if($post->author->github_handle)
                        <a href="https://github.com/{{ $post->author->github_handle }}" target="_blank" class="text-gray-500 hover:text-indigo-600">
                            <i class="fab fa-github"></i>
                        </a>
                    @endif
                </div>
            </div>
        </div>
        
        @if($post->banner_url)
            <img src="{{ $post->banner_url }}" alt="{{ $post->title }}" class="w-full h-auto rounded-lg mb-8">
        @endif
        
        <div class="prose max-w-none">
            {!! $post->content !!}
        </div>
    </article>
    
    @if($relatedPosts->count())
        <section class="mt-16">
            <h2 class="text-2xl font-bold mb-6">Related Posts</h2>
            <div class="grid md:grid-cols-3 gap-6">
                @foreach($relatedPosts as $post)
                    <div 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">
                            <a href="{{ route('blog.category', $post->category) }}" class="text-indigo-600 text-sm font-medium">
                                {{ $post->category->name }}
                            </a>
                            <h3 class="text-xl font-bold mt-2 mb-3">
                                <a href="{{ route('blog.show', $post) }}" class="hover:text-indigo-600">
                                    {{ $post->title }}
                                </a>
                            </h3>
                            <p class="text-gray-600 text-sm">{{ $post->excerpt }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>
    @endif
@endsection