@push('metadata')
@php
$page_id = 13;
$mTitle = @$seoData['seo_title'];
$mDescr = @$seoData['meta_description'];
$breadcrum = @$seoData['breadcrumb'];
$faqs = $seoData['faq'] ?? '[]';
$mKWords = $seoData['meta_keywords'];
$mUrl = url()->current();
$baseUrl = url('/crypto-author/');
$mImage = config('constants.author');

$authorItemList = collect($dataList ?? [])->map(function ($author) {
        return [
            'name' => $author['dispaly_name'] ?? $author['display_name'] ?? 'Crypto Author',
            'url' => url('crypto-author/' . ($author['slug'] ?? '')),
            'slug' => $author['slug'] ?? '',
        ];
    })->values()->toArray();
@endphp
<title>{{ @$mTitle }}</title>
<meta name="description" content="{{ @$mDescr }}" />
<meta property=og:locale content="en_US" />
<meta property=og:type content="{{config('constants.organisation_type_website')}}" />
<meta property="og:site_name" content="Crypto Display" />
<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('head_scripts')
{!! SchemaHelper::webpageSchema($mTitle ?? null, $mDescr ?? null) !!}
{!! SchemaHelper::collectionPageSchema($breadcrum, $mTitle, $mDescr) !!}
{!! SchemaHelper::itemListSchema($mTitle ?? null,$mUrl ?? null,$baseUrl ?? null,$authorItemList,1,'') !!}
{!! SchemaHelper::getBreadcrumbSchema([
['name' => 'Home', 'url' => url('/')],
['name' =>$seoData['breadcrumb'], 'url' => URL::to('crypto-author')],
]) !!}
{!! SchemaHelper::getImageObjectSchema(CommonHelper::s3ImageOrDefault($mImage), $mTitle, 1200, 628) !!}
@if(!empty($seoData['faq']))
{!! SchemaHelper::getFaqSchema($seoData['faq']) !!}
@endif
@endpush
@push('pageId')
<script>
    window.pageId = "{{ $seoData['id'] ?? '' }}";
</script>
@endpush

@push('styles')
<style>
    .author-links {
        width: 26px !important;
        height: 26px !important;
    }
</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"> {{$seoData['breadcrumb'] ?: 'Crypto Author' }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container my-3">
            <div class="row">
                <div class="col-md-12">
                    <div class="gradientbg p-4 rounded-3">
                        <div class="ico_mainheading headingfont headingfont text-center">
                            {!! $seoData['top_page_content'] !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container my-3">
            <div class="row">
                @foreach ($dataList as $author)
                <div class="col-xl-4 col-md-6 mb-3">
                    <div class="border shadow-sm py-3 px-4 rounded-4">
                        <div class="d-flex gap-3 align-items-center">
                            <img alt="{{ $author['dispaly_name'] ?? 'Author' }}" loading="lazy" src="{{ $author['image'] ?? 'https://secure.gravatar.com/avatar/3fce5e178a3f83f5655e52e136018efc8540b10372de35962b0130dd3bce4d57?s=100&d=mm&r=g' }}"
                                class="avatar avatar-100 photo rounded-circle bg-white" height="80" width="80" decoding="async"
                                onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';" />
                            <div>
                                <span class="h5 fw-semibold d-block mb-1"> {{ $author['dispaly_name'] }} </span>
                                <small class="fs-13 mb-2 text-secondary one-line-text">{{ $author['personal_profile'] }}</small>
                                <div class="d-flex gap-2">
                                    @if (!empty($author['user']['twitter_url']))
                                        <a href="{{ CommonHelper::formatTwitterUrl($author['user']['twitter_url']) }}" 
                                        target="_blank" 
                                        rel="nofollow noopener noreferrer"
                                        class="d-flex align-items-center justify-content-center rounded-circle bg-darkview author-links">
                                            <i class="fa-brands fa-x-twitter fs-13"></i>
                                        </a>
                                    @endif

                                    @if (!empty($author['user']['linkedin_url']))
                                        <a href="{{ CommonHelper::formatLinkedinUrl($author['user']['linkedin_url']) }}" 
                                        target="_blank" 
                                        rel="nofollow noopener noreferrer"
                                        class="d-flex align-items-center justify-content-center rounded-circle bg-darkview author-links">
                                        
                                            <i class="fa-brands fa-linkedin-in fs-13"></i>
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="my-3 border border-muted rounded-4 py-2 px-3 lightredbg">
                            <div class="d-flex align-items-center justify-content-around">
                                <div class="text-center">
                                    <span class="fs-6 d-block fw-bold">{{ $author['total_news'] }}+</span>
                                    <span class="fs-13 text-muted">Articles</span>
                                </div>

                                @php
                                    $createdAt = \Carbon\Carbon::parse($author['created_at']);

                                    $months = floor($createdAt->floatDiffInMonths(now()));

                                    $years = floor($months / 12);

                                    $experience = $years > 0
                                        ? $years
                                        : $months;

                                    $experienceLabel = $years > 0
                                        ? ($years > 1 ? 'Years' : 'Year')
                                        : ($months > 1 ? 'Months' : 'Month');
                                @endphp
                                <div class="text-center">
                                    <span class="fs-6 d-block fw-bold">{{ $experience }}+</span>
                                    <span class="fs-13 text-muted">{{ $experienceLabel }} Experience</span>
                                </div>
                            </div>
                        </div>
                        <div class="text-end">
                            <a href="{{ URL::to('crypto-author/'.$author['slug']) }}" class="btn border-web darkredcolor btn-link fw-semibold fs-14 mt-1 text-decoration-none" title="{{ $author['dispaly_name'] }}">
                                View Profile <i class="fa-solid fa-arrow-right-long ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                @endforeach

            </div>
        </div>
    </section>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="contentview contentconditon">
                        {!! $seoData['description'] ?? '' !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <livewire:faq-section pageType="crypto-author" />
</div>