@push('metadata')
@php
$page_id = 36;
$mTitle = @$author->seo_title;
$mDescr = @$author->meta_description;
$faqs = $author->faqs ?? '[]';
$mKWords = $author->meta_keywords;
$mUrl = url()->current();
$mImage = config('constants.author');
@endphp

<title>{{ @$mTitle }}</title>
<meta name="keywords" content="{{ @$mKWords }}" />
<meta name="description" content="{{ @$mDescr }}" />
<meta property=og:locale content="{{ app()->getLocale() }}" />
<meta property=og:type content="{{config('constants.organisation_type_news')}}" />
<meta property="og:site_name" content="Crypto Presale" />
<meta property="og:title" content="{{ @$mTitle }}" />
<meta property="og:description" content="{{ @$mDescr }}" />
<meta property="og:url" content="{{ @$mUrl }}" />
<meta property="og:image" content="{{ @$mImage }}" />
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="628">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{{ @$mTitle }}" />
<meta name="twitter:description" content="{{ @$mDescr }}" />
<meta name="twitter:url" content="{{ @$mUrl }}" />
<meta name="twitter:image" content="{{ @$mImage }}" />
<meta name="twitter:site" content="{{config('constants.twitter_url')}}" />
<meta name="twitter:creator" content="{{config('constants.twitter_url')}}" />
@endpush

@push('styles')
<style>
    .linkedin {
        color: #0077B5;
    }

    .bio span,
    .bio span p,
    .bio span span {
        font-size: 14px !important;
        margin-bottom: 0 !important;
    }

    .author-posts img {
        width: 306px;
        height: 170px;
        aspect-ratio: 306/170;
    }
</style>
@endpush

<div>
    <section class="web-color py-2 breadcrumb">
        <div class="container">
            <div class="row">
                <div class="d-flex gap-2 p-0 m-0 list-unstyled justify-content-center text-white">
                    <ul class="d-flex p-0 m-0 list-unstyled">
                        <li class="position-relative"><a href="{{ URL::to('/') }}" title="Home"
                                class="text-white text-decoration-none">Home</a></li>
                        <li class="position-relative"><a href="{{ URL::to('/crypto-author') }}" title="Crypto Authors"
                                class="text-white text-decoration-none">Crypto Authors</a>
                        </li>
                        <li class="position-relative"> {{$author['dispaly_name'] ?: 'Crypto Author' }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-xl-12 my-3">
                    <div class="shadow border p-4 rounded-4">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center gap-3 flex-wrap">
                                <div>
                                    <img alt="{{ $author['display_name'] ?? 'Author' }}"
                                        src="{{ $author['image'] ?? 'https://secure.gravatar.com/avatar/3fce5e178a3f83f5655e52e136018efc8540b10372de35962b0130dd3bce4d57?s=100&d=mm&r=g' }}"
                                        srcset="{{ $author['image'] ?? 'https://secure.gravatar.com/avatar/3fce5e178a3f83f5655e52e136018efc8540b10372de35962b0130dd3bce4d57?s=200&d=mm&r=g 2x'}}"
                                        class="avatar avatar-100 rounded-circle" height="72" width="72"
                                        decoding="async" loading="lazy"
                                        onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';" />
                                </div>
                                <div class="contentdetails">
                                    <h1 class="profile-name text-black fw-bold mb-0 fs-4">
                                        {{ $author['dispaly_name'] }}
                                    </h1>
                                    <span class="text-secondary fs-15">{{$author['personal_profile'] }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="bio mb-3">
                            <span class="fs-14">{!! $author['about_us'] !!}</span>
                        </div>

                        @if (!empty($author['user']['twitter_url'] || $author['user']['linkedin_url']))
                            <div class="d-flex gap-3 my-3 flex-wrap">
                                @if(!empty($author['user']['twitter_url']))    
                                    <div class="border rounded-3 py-2 px-3">
                                        <a href="{{ CommonHelper::formatTwitterUrl($author['user']['twitter_url']) }}" class="text-black"
                                            title="twitter_url" target="_blank" rel="noopener nofollow noreferrer">
                                            <div class="d-flex align-items-center gap-3">
                                                <span class="fs-14">Follow on</span>
                                                <i class="fa-brands fa-x-twitter"></i>
                                            </div>
                                        </a>
                                    </div>
                                @endif

                                @if(!empty($author['user']['linkedin_url']))
                                    <div class="border rounded-3 py-2 px-3">
                                        <a href="{{ CommonHelper::formatLinkedinUrl($author['user']['linkedin_url']) }}" class="text-black" title="linkedin_url" target="_blank"
                                            rel="noopener nofollow noreferrer">
                                            <div class="d-flex align-items-center gap-3">
                                                <span class="fs-14">Connect on</span>
                                                <i class="fa-brands fa-linkedin-in linkedin"></i>
                                            </div>
                                        </a>
                                    </div>
                                @endif
                            </div>
                        @endif

                        <div>
                            <div class="pb-1 border-bottom">
                                <span class="fs-13 text-uppercase text-secondary fw-semibold ls-2 w-100">author stats</span>
                            </div>
                            <div class="row justify-content-between align-items-center mt-2">
                                <div class="col-lg-3 col-sm-6">
                                    <div class="d-flex gap-3 align-items-center fs-12 w-100">
                                        <div class="d-flex gap-2 align-items-center text-secondary">
                                            <i class="fa-regular fa-newspaper"></i>
                                            Total Articles
                                        </div>
                                        <span class="fw-bold">{{ $totalNewsCount }}+</span>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-sm-6">
                                    <div class="d-flex gap-3 align-items-center fs-12 w-100 mt-2 mt-sm-0">
                                        <div class="d-flex gap-2 align-items-center text-secondary">
                                            <i class="fa-regular fa-calendar"></i>
                                            Since
                                        </div>
                                        <span class="fw-bold">
                                            {{ \Carbon\Carbon::parse($author['created_at'])->format('M Y') }}
                                        </span>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-sm-6">
                                    <div class="d-flex gap-3 align-items-center fs-12 w-100 mt-2 mt-lg-0">
                                        <div class="d-flex gap-2 align-items-center text-secondary">
                                            <i class="fa-regular fa-clock"></i>
                                            Last Active
                                        </div>
                                        <span class="fw-bold">{{ \Carbon\Carbon::parse($news[0]['created_at'])->format('M d, Y') }}</span>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6">
                                    <div class="d-flex gap-3 align-items-center fs-12 w-100 mt-2 mt-lg-0">
                                        <div class="d-flex gap-2 align-items-center text-secondary">
                                            <i class="fa-regular fa-star"></i>
                                            Expertise
                                        </div>
                                        @foreach(array_filter(explode(',', $author->experties)) as $expertise)
                                            @php
                                                $clean = preg_replace('/\s+/', ' ', trim($expertise));
                                            @endphp

                                            @if($clean)
                                                <span class="fs-12 fw-bold">
                                                    {{ $clean }}
                                                </span>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <hr class="border-top border-muted opacity-50">
        </div>
    </section>

    <section>
        <div class="container mt-1 mb-3">
            <div class="row">
                <div class="col-xl-12 mt-2">
                    <div class="py-2">
                        <span class="heading-border h4 mb-0 pb-1">Articles By Author</span>
                    </div>
                    <div class="row author-posts">
                        @forelse($news as $newsItem)
                        <div class="col-xl-3 col-md-4 col-sm-6 my-2 news-box">
                            <div class="card bg-white  h-10  border-0 d-flex align-items-start justify-content-between border-hover p-0">
                                <a href="{{ URL::to($newsItem['alias']) }}" title="{{ $newsItem['title'] }}">
                                    <img src="{{ $newsItem['image'] }}" class="w-100 h-auto rounded-2"
                                        alt="{{ $newsItem['img_alt_title'] ?: $newsItem['title'] }}" loading="lazy"
                                        width="306" height="170" loading="lazy"
                                        onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                                </a>
                                <div class="card-body py-2 px-1">
                                    <a href="{{ URL::to($newsItem['alias']) }}"
                                        class="text-paragraph fw-semibold text-decoration-none two-line-text "
                                        title="{{ $newsItem['title'] }}">
                                        {{ $newsItem['title'] }} </a>
                                </div>

                                <div
                                    class="card-footer bg-transparent border-top-0 d-flex justify-content-between align-items-center flex-wrap px-0 px-sm-2 py-0 w-100">
                                    <div class="d-flex gap-1">
                                        <a href=""
                                            class="text-paragraph fw-semibold text-decoration-none text-capitalize fs-12 border-end pe-1 one-line-text"
                                            title="By: {{ $newsItem['author_name'] }}">
                                            {{ Str::limit($newsItem['postAuthor']['dispaly_name'] ?? 'Admin', 8) }}
                                        </a>
                                        <span class="fs-12 one-line-text d-inline-block">
                                            {{ \Carbon\Carbon::parse($newsItem['publishedAt'])->diffForHumans() }}
                                        </span>
                                    </div>
                                    <div>
                                        <div class="d-flex align-items-center gap-1">
                                            <div class="like-wrapper">
                                                <x-like-card :id="$newsItem['id'] ?? ''" :type="'news'"
                                                    :likeCount="$newsItem['likes_counts'] ?? 0" />
                                            </div>
                                            <button
                                                class="text-dark text-decoration-none lh-1 share-btn border-0 bg-transparent p-0"
                                                data-url="{{ URL($newsItem['alias']) }}" data-bs-toggle="modal"
                                                data-bs-target="#shareModal" title="Share"
                                                wire:click="setShareUrl('{{ URL($newsItem['alias']) }}')">
                                                <i class="fa-solid fa-share"></i>
                                                <span class="d-none">Share Button</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="col-12 text-center py-3">
                            <p class="text-muted">No News of authors found.</p>
                        </div>
                        @endforelse
                    </div>
                   {{-- @if($hasMore)
                    <div class="text-center my-3">
                        <button wire:click="loadMoreNews" wire:loading.attr="disabled"
                            class="btn btn-primary load-more">
                            Load More
                        </button>
                    </div>
                    @endif --}}

                    @if($news->hasPages())
                        <div class="mt-4">
                            {{ $news->links('vendor.pagination.bootstrap-5') }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="py-2">
                        <span class="heading-border h4 mb-0 pb-1">Other authors</span>
                    </div>
                </div>
                @if (!empty($otherAuthors) && $otherAuthors->count()>0)
                @foreach ($otherAuthors as $authorData)
                <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 mt-3">
                    <a href="{{ URL::to('crypto-author/'.$authorData['slug']) }}" title="{{ $authorData['dispaly_name'] }}">
                        <div class="border rounded-3 p-3 text-center">
                            <img src="{{ $authorData['image'] ?? 'https://secure.gravatar.com/avatar/3fce5e178a3f83f5655e52e136018efc8540b10372de35962b0130dd3bce4d57?s=100&d=mm&r=g' }}"
                                width="72" height="72" class="rounded-circle border border-muted mb-2" loading="lazy"
                                alt="{{ $authorData['dispaly_name'] }}">
                            <span class="fs-5 fw-semibold text-black d-block text-capitalize">{{ $authorData['dispaly_name'] }}</span>
                            <span class="fs-13 text-secondary d-block">{{ $authorData['work_profile'] }}</span>
                        </div>
                    </a>
                </div>
                @endforeach
                @else
                <div class="col-12 text-center my-3">No Authors found</div>
                @endif
            </div>
        </div>
    </section>

    <section>
        <div class="container py-3">
            <div class="row">
                <div class="col-xl-12">
                    <div class="contentview contentconditon">
                        {!! $author->page_content !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    @include('livewire.common.share-modal')
    {{-- Share Modal --}}

</div>