@push('meta_data')
    <title>{{ $author->seo_title ?? config('app.name') }}</title>
    <meta name="description" content="{{ $author->meta_description ?? '' }}">
    <meta name="keywords" content="{{ $author->meta_keywords ?? '' }}">

    {{-- Open Graph --}}
    <meta property="og:title" content="{{ $author->seo_title ?? '' }}">
    <meta property="og:description" content="{{ $author->meta_description ?? '' }}">
    {{-- <meta property="og:image" content="{{ $seo->og_image ?? asset('default-og.png') }}"> --}}
    <meta property="og:type" content="website">
@endpush

<div>
    <!-- Brdcrumb -->
    <section class="brdcrumb">
        <div class="container">
            <ul class="mb-0">
                <li><a href="index.html" title="Home">Home</a></li>
                <li class="">Authors</li>
                <li class="">Author Name</li>
            </ul>
        </div>
    </section>
    <!-- Brdcrumb -->

    <!-- Page Content  -->

    <section>
        <div class="container">
            <div class="row mt-4">
                <div class="col-12">
                    <div class="details">
                        <div class="row align-items-center">
                            <div class="col-xl-3 col-lg-3 col-md-3 text-center">

                                <div>
                                    <img src="{{ $author->image ?? asset('default-ico.png') }}" loading="lazy" class="img-fluid author"
                                        alt="{{ $author->dispaly_name }}" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                                </div>
                                <div class="row">
                                    <span class="fs-2 fw-bold">{{ $author->dispaly_name }}</span>
                                    <span class="fs-14 fw-semibold text-secondary">Work Profile</span>
                                </div>

                            </div>
                            <div class="col-xl-9 col-lg-9 col-md-9 information">
                                <div class="row gap-1 pe-4">
                                    <span class="fw-bold">Author's Personal Details</span>
                                    <hr class="m-0">
                                    <span class="fs-14">Profession :
                                        <strong>{{ $author->work_profile }}</strong></span>
                                    <span class="fs-14">Interests / Hobbies :
                                        <strong>{{ $author->hobbies }}</strong></span>
                                </div>
                                <div class="row my-3 gap-1 pe-4">
                                    <span class="fw-bold">Projects Associated With</span>
                                    <hr class="m-0">
                                    <span class="fs-14">{{ $author->project_associated_with }}</span>
                                </div>
                                <div class="row gap-1 pe-4">
                                    <span class="fw-bold">About Author</span>
                                    <hr class="m-0">
                                    <span class="fs-14">{{ $author->about_us }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="mt-5">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <span class="fs-1 fw-semibold">Articles by Author</span>
                    <hr class="my-1">
                </div>
                <div class="row  mt-3">
                    @forelse($news as $item)
                        <div class="col-xl-4 col-lg-6 p-1 mt-1">
                            <div class="row g-0 card-group box-shadow-md rounded-3 overflow-hidden">
                                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-5 px-0">
                                    <div class="position-relative">
                                        <a href="{{ '/' . $item->alias }}" title="{{ $item->title }}"
                                            class="text-decoration-none">
                                            <img src="{{ $item->image }}" loading="lazy" alt="{{ $item->image }}"
                                                class="object-fit-cover w-100 h-100" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';" />
                                        </a>

                                        <div class="overlay-buttons">

                                             <x-like-card :id="@$item->id" :type="'news'" :liked="@$item->liked" :likescounts="@$item->likes_counts" :likd="1"
                                                :favorite="@$favorite" />

                                            <button type="button" class="news-icon-btn" title="Share"
                                                data-bs-toggle="modal" data-bs-target="#shareModal"
                                                wire:click="setShareUrl('{{ URL::to('/' . $item->alias) }}')">
                                                <i class="fa-solid fa-share small"></i>
                                            </button>
                                        </div>

                                    </div>
                                </div>

                                <div
                                    class="col-xxl-8 col-xl-8 col-lg-8 col-md-7 px-0 mb-0 card flex-auto bg-transparent border-0">
                                    <div class="card-body text-decoration-none py-md-2">
                                        <a href="{{ '/' . $item->alias }}" title="{{ $item->title }}"
                                            class="text-decoration-none text-dark">
                                            <span
                                                class="fs-5 fw-semibold two-line-text h6 mb-0">{{ $item->title }}</span>
                                        </a>
                                    </div>

                                    <div class="card-footer  bg-transparent pt-0 border-0">
                                        <div
                                            class="d-flex justify-content-between align-items-center flex-wrap mb-2 mb-sm-0">
                                            <a href="{{ url('author-details/' . $author->slug) }}" title="author"
                                                class="text-body-secondary text-decoration-none fs-12">
                                                <i class="fa-solid fa-circle-user me-2"></i><span
                                                    class="fs-12">{{ $author->dispaly_name }}</span>
                                            </a>

                                            <span class="text-body-secondary fs-12"><i
                                                    class="fa-solid fa-calendar me-2"></i>
                                                {{ \Carbon\Carbon::parse($item->created_at)->format('d/m/Y') }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <p>No news articles found for this author.</p>
                    @endforelse
                    <!-- Load More Button -->
                    @if ($news->count() < $totalNews)
                        <div class="text-center mt-3">
                            <button type="button" class="purple-btn" title="Load More" wire:click="loadMore">Load
                                More</button>
                        </div>
                    @endif

                </div>
            </div>
        </div>
    </section>



    <!-- faqs -->
    @if (!empty($author->faqs))
        <section class="py-3">
            <div class="container">
                <div class="row">
                    <div class="col-xl-10 mx-auto text-center">
                        <span class="d-block h2 mb-2 fw-bold text-center">Frequently Asked Questions</span>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xl-5 text-center">
                        <div>
                            <img src="{{ asset('assets/images/home-faq.webp') }}" alt="faq" class="img-fluid"
                                width="300" loading="lazy" height="auto" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';" />
                        </div>
                        <div class="row">
                            <div class="col-xl-10 mx-auto mt-3">
                                <div class="bdr-purple p-2 text-center  rounded-3">
                                    <span class="d-block fw-bold ">Have any further questions?</span>
                                    <a href="{{ url('contact') }}" title="contact us"
                                        class="purple-btn small-btn rounded-2 mt-2">Contact us</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-7 mt-2">
                        <div class="accordion-container">
                            <div class="accordion" id="purpleAccordion">
                                @foreach (json_decode($author->faqs) as $index => $faq)
                                    <div class="accordion-item">
                                        <span class="accordion-header" id="heading{{ $index }}">
                                            <button class="accordion-button {{ $index != 0 ? 'collapsed' : '' }}"
                                                type="button" data-bs-toggle="collapse"
                                                data-bs-target="#collapse{{ $index }}"
                                                aria-expanded="{{ $index == 0 ? 'true' : 'false' }}"
                                                aria-controls="collapse{{ $index }}">
                                                {{ $faq->question ?? '' }}
                                            </button>
                                        </span>
                                        <div id="collapse{{ $index }}"
                                            class="accordion-collapse collapse {{ $index == 0 ? 'show' : '' }}"
                                            aria-labelledby="heading{{ $index }}"
                                            data-bs-parent="#purpleAccordion">
                                            <div class="accordion-body">
                                                {{ $faq->answer ?? '' }}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <!-- Faqs -->

    <!-- Content -->
    <section>
        <div class="container">
            <div class="row">
                <div class="col-12 top-border bg-card-gradient">
                    <div class="details-page py-3">
                        {!! CommonHelper::addNoFollowToExternalLinks($author->description) !!}
                    </div>
                </div>
            </div>
    </section>
</div>