@extends('layouts.public')
@section('title', $author->name)
@section('content')
<section class="hero" style="padding: 4rem 0;">
    <div class="container text-center">
        <img src="{{ $author->avatarUrl() }}" class="rounded-circle mb-3" style="width:140px;height:140px;object-fit:cover;border:4px solid var(--accent);">
        <h1>{{ $author->name }}</h1>
        <p class="lead">@{{ $author->username }}</p>
        @if($author->bio)<p style="max-width:600px;margin:0 auto;color:rgba(248,245,238,0.85);">{{ $author->bio }}</p>@endif
        <div class="mt-3">
            @if($author->website)<a href="{{ $author->website }}" target="_blank" style="color:var(--accent);" class="me-2">Website</a>@endif
            @if($author->twitter)<a href="https://twitter.com/{{ $author->twitter }}" target="_blank" style="color:var(--accent);" class="me-2">Twitter</a>@endif
            @if($author->facebook)<a href="https://facebook.com/{{ $author->facebook }}" target="_blank" style="color:var(--accent);" class="me-2">Facebook</a>@endif
            @if($author->linkedin)<a href="https://linkedin.com/in/{{ $author->linkedin }}" target="_blank" style="color:var(--accent);">LinkedIn</a>@endif
        </div>
    </div>
</section>

<div class="container py-5">
    <h3 class="mb-4">Posts by {{ $author->name }} <small class="text-muted">({{ $blogs->total() }})</small></h3>
    <div class="row g-4">
        @forelse($blogs as $blog)
        <div class="col-md-6 col-lg-4">
            <article class="blog-card">
                <a href="{{ route('blogs.show', $blog->slug) }}"><img src="{{ $blog->featuredImageUrl() }}" class="blog-card-img"></a>
                <div class="blog-card-body">
                    @if($blog->category)<span class="blog-card-category">{{ $blog->category->name }}</span>@endif
                    <h3><a href="{{ route('blogs.show', $blog->slug) }}">{{ $blog->title }}</a></h3>
                    <div class="blog-card-meta"><span>{{ $blog->published_at?->format('M d, Y') }}</span><span>{{ $blog->readingTime() }} min</span></div>
                </div>
            </article>
        </div>
        @empty
        <div class="col-12 text-muted text-center py-5">No posts yet.</div>
        @endforelse
    </div>
    <div class="mt-4">{{ $blogs->links() }}</div>
</div>
@endsection