@push('metadata')
@php
$pageId = $seoData['id'];
$mTitle = @$seoData['seo_title'];
$mDescr = @$seoData['meta_description'];
$faqs = $seoData['faq'] ?? '[]';
$mKWords = $seoData['meta_keywords'];
$mUrl = url()->current();
$mImage = config('constants.crypto_author');
$baseUrl = url('/crypto-author/');
@endphp
@push('pageId')
<script>
    window.pageId = "{{ $pageId ?? '' }}";
</script>
@endpush
<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')}}" />
<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 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::collectionPageSchema($mTitle,$mTitle,$mDescr) !!}
{!! SchemaHelper::getBreadcrumbSchema([
['name' => 'Home', 'url' => url('/')],
['name' => 'Crypto Author', 'url' => CommonHelper::makeUrl('crypto-author')]
]) !!}
{!! SchemaHelper::getImageObjectSchema($mImage, $mTitle, 1200, 630) !!}
@if(!empty($seoData['faq']))
{!! SchemaHelper::getFaqSchema($seoData['faq']) !!}
@endif
{!! SchemaHelper::itemListSchema($mTitle ?? null, $mUrl ?? null, $baseUrl ?? null, $authors ?? [],1,'') !!}
@endpush

@push('styles')
<style>
    .card1 {
        display: flex;
        gap: 20px;
        padding: 1.5rem 0;
        border-bottom: 1px solid #f0f0f0;
        height: 100%;
    }

    /* Left column cards */
    .author-cards:nth-child(odd) .card1 {
        padding-right: 2rem;
        border-right: 1px solid #f0f0f0;
    }

    /* Right column cards */
    .author-cards:nth-child(even) .card1 {
        padding-left: 2rem;
    }

    /* Remove border from last row */
    .author-cards:nth-last-child(-n+2) .card1 {
        border-bottom: none;
    }

    @media(max-width:991px) {
        .author-cards:nth-child(odd) .card1 {
            border-right: none;
            padding-right: 0;
        }

        .author-cards:nth-child(even) .card1 {
            padding-left: 0;
        }
    }
</style>
@endpush

<div>

    <section class="brdcrumb">
        <div class="container">
            <ul class="mb-0">
                <li><a href="{{ URL::to('/') }}" title="Home">Home</a> <i
                        class="fas fa-chevron-right small text-dark ms-2"></i></li>
                <li>{{ $seoData['breadcrumb'] ?: 'Author Page' }}</li>
            </ul>
        </div>
    </section>

    <section class="my-3">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="text-center headingfont">
                        {!! $seoData['top_page_content'] !!}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="my-4">
        <div class="container authorpage">
            <div class="row g-0">
                @foreach($authors as $author)
                <div class="col-lg-6 author-cards">
                    <div class="card1">
                        <div class="card-left">
                            <img src="{{ $author->user->avatar }}" alt="{{ $author->dispaly_name }}" class="rounded-circle border" height="84" width="84" loading="lazy" />
                        </div>
                        <div class="card-body">
                            <a href="{{ route('crypto-author-detail', $author->slug) }}" title="{{ $author->dispaly_name }}" class="text-decoration-none">
                                <span class="author-name d-block text-start fs-5 fw-bold">{{ $author->dispaly_name }}</span>
                            </a>
                            <span class="fs-13 text-secondary">{{ $author->specialization ?? '' }}</span>
                            <div class="d-flex gap-2 my-2 flex-wrap">
                                @foreach(array_filter(explode(',', $author->experties)) as $expertise)
                                @php
                                $clean = preg_replace('/\s+/', ' ', trim($expertise));
                                @endphp

                                <div class="borderblue rounded-pill px-2 catbox">
                                @if($clean)
                                    <span class="fs-12 bluetext fw-bold">
                                        {{ $clean }}
                                    </span>
                                @endif
                                </div>
                                @endforeach
                            </div>
                            <div class="d-flex gap-3 align-items-center">
                                <div class="d-flex gap-1 align-items-baseline">
                                    <span class="fs-14 fw-bold">{{ $author['total_news'] }}</span>
                                    <span class="fs-12 text-secondary">articles</span>
                                </div>

                                <div class="d-flex gap-1 align-items-baseline">
                                    <span class="fs-12 text-secondary">Since</span>
                                    <span class="fs-14 fw-bold">{{ \Carbon\Carbon::parse($author['created_at'])->format('Y') }}</span>
                                </div>
                            </div>
                            <div class="d-flex align-items-center justify-content-between mt-3 pt-2 border-top flex-wrap gap-2">
                                <div class="d-flex gap-1">
                                    @if (!empty($author['user']['twitter_url']))
                                        <a href="{{ CommonHelper::formatTwitterUrl($author['user']['twitter_url']) }}" 
                                        target="_blank" 
                                        rel="nofollow noopener noreferrer"
                                        class="rounded-2 px-2 catbox d-flex justify-content-center align-items-center text-decoration-none p-2 shadow-sm">
                                            <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="rounded-2 px-2 catbox d-flex justify-content-center align-items-center text-decoration-none p-2 shadow-sm">
                                        
                                            <i class="fa-brands fa-linkedin-in fs-13"></i>
                                        </a>
                                    @endif
                                </div>
                                <a class="text-decoration-none bluetext fw-semibold fs-14" href="{{ route('crypto-author-detail', $author->slug) }}"
                                    title="{{ $author->dispaly_name }}">
                                    Read All Articles By
                                    {{ $author->dispaly_name }}
                                    <i class="fa-solid fa-arrow-right-long ms-2"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="contentview">
                        <div class="details-page">
                            {!! $seoData['description'] !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if(!empty($faqs))
    <livewire:faq-section pageType="crypto-author" />
    @endif
</div>