@extends('front.layouts.master-auth')
@section('css')
<style>
    .author-header-section {
        /* background: #f8f9fa;
        padding: 30px;
        border-radius: 10px; */
        margin-top: 10px;
    }

    .author-header-section .author-info-card {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .addOffer-page-title{
        margin:0;
    }

    .author-header-section .author-avatar {
        flex-shrink: 0;
    }

    .author-header-section .author-avatar img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        /* border: 3px solid #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
    }

    .author-header-section .author-details {
        flex: 1;
    }

    .author-header-section .author-name {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 5px;
        color: #1a1a2e;
    }

    .author-header-section .author-title {
        font-size: 16px;
        color: #666;
        margin-bottom: 10px;
    }

    .author-header-section .author-bio {
        font-size: 14px;
        color: #555;
        line-height: 1.6;
        margin: 0;
    }

    .articles-count {
        font-size: 18px;
        color: #888;
        font-weight: normal;
    }

    .no-results-message {
        font-size: 18px;
        color: #888;
    }

    @media (max-width: 768px) {
        .author-header-section .author-info-card {
            flex-direction: column;
            text-align: center;
        }

        .author-header-section .author-name {
            font-size: 24px;
        }
    }
</style>
@endsection
@section('content')

    <!-- Start Page Content -->
    <section class="page-content blog-author-page">
        <div class="container">
            {{-- Author Header --}}
            <div class="author-header-section mb-4">
                <div class="author-info-card">
                    <div class="author-avatar">
                        <img src="{{ $author->image }}" alt="{{ $author->name }}" decoding="async" width="80" height="80">
                    </div>
                    <div class="author-details">
                        <h1 class="author-name">{{ $author->name }}</h1>
                        @if($author->title)
                        <p class="author-title">{{ $author->title }}</p>
                        @endif
                        @if($author->detail)
                        <p class="author-bio">{{ $author->detail }}</p>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Page Title --}}
            <div class="addOffer-page-title">
                <h2 class="addOffer-name">
                    @lang('Articles by') {{ $author->name }}
                    <span class="articles-count">({{ $blogs->total() }} @lang('Article'))</span>
                </h2>
            </div>

            {{-- Blog Grid --}}
            @if(count($blogs) > 0)
            <div class="projectoffers-cont">
                <div class="blog-grid" style="margin-top: 10px;">
                    @foreach($blogs as $blog)
                        @include('front.blog._blog_card', ['blog' => $blog])
                    @endforeach
                </div>
            </div>

            {{-- Pagination --}}
            @if($blogs->hasPages())
            <div class="pagination-wrapper mt-4">
                {{ $blogs->withQueryString()->links('front.pagination') }}
            </div>
            @endif
            @else
            <div class="no-results-message text-center py-5">
                <p>@lang('No articles found for this author.')</p>
            </div>
            @endif
        </div>
    </section>

    <!-- End Page Content -->

@endsection