@push('metadata')
@php
$pageId = $seoData['id'];
$mTitle = @$seoData['seo_title'];
$mDescr = @$seoData['meta_description'];
$faqs = $seoData['faq'] ?? '[]';
$mKWords= $seoData['meta_keywords'];
$breadcrum = $seoData['breadcrumb'] ?: 'Crypto News';
$mUrl = url()->current();
$mImage = config('constants.crypto_news');
@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')}}" />
<link rel="alternate" type="application/rss+xml" title="Crypto News RSS Feed" href="{{ RssFeedHelper::getRssFeedUrl('crypto-news') }}" />
@endpush

@push('head_scripts')
    {!! SchemaHelper::collectionPageSchema($mTitle,$mTitle,$mDescr) !!}
    {!! SchemaHelper::getBreadcrumbSchema([
        ['name' => 'Home', 'url' => url('/')],
        ['name' => $breadcrum, 'url' => URL::to('crypto-news')],
    ]) !!}
    {!! SchemaHelper::getImageObjectSchema($mImage, $mTitle, 1200, 630) !!}
    @if(!empty($seoData['faq']))
        {!! SchemaHelper::getFaqSchema($seoData['faq']) !!}
    @endif
    {!! SchemaHelper::newsListArticleSchema($tabsData) !!}
@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 mx-2"></i></li>
                <li>{{ $breadcrum }}</li>
            </ul>
        </div>
    </section>

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

    <section>
        <div class="container">
            <div class="row justify-content-end">
                <div class="col-xl-5 col-lg-6">
                    <div class="d-flex flex-wrap flex-sm-nowrap">
                        <input type="text" class="form-control m-1" placeholder="Search articles..." wire:model.lazy="search" aria-label="Search crypto news articles"
                            wire:key="search-input-{{ $search }}" />
                        <button wire:click="applySearch" class="btn mainbluebtn rounded-4 m-1"><i
                                class="fa-solid fa-magnifying-glass me-2"></i>Search</button>
                        <button wire:click="resetSearch" class="btn mainbluebtn rounded-4 m-1"><i
                                class="fa-solid fa-arrows-rotate me-2"></i>Reset</button>
                    </div>
                </div>
            </div>
        </div>
        @include('livewire.common.share-modal')
    </section>

    <section>
        <div class="container">
            @if($noResults)
            <div class="row">
                <div class="col-12 text-center py-5">
                    <h4 class="text-muted">No results found for "{{ $search }}"</h4>
                </div>
            </div>
            @else
            <!-- Blog List -->
            <div class="row news-grid mt-3">
                @foreach($tabsData as $news)
                    <div
                        class="col-sm-6 col-lg-4 col-xl-3 mb-3"
                        wire:key="news-card-{{ $news->id }}-page-{{ $tabsData->currentPage() }}"
                    >
                        <x-news-card
                            :id="$news->id"
                            :title="$news->title"
                            :author="$news->postAuthor ? $news->postAuthor->dispaly_name : $news->author_name"
                            :date="$news->publishedAt"
                            :image="$news->image"
                            :description="$news->description"
                            :likes="$news->likes_counts"
                            :slug="$news->alias"
                            :img_alt_title="$news->img_alt_title"
                            :post_author="$news->postAuthor->slug ?? ''"
                            :isliked="$news->is_liked"
                            :isFirst="$loop->first"
                        />
                    </div>
                @endforeach
            </div>

            <div class="col-12 mt-4">
                {{ $tabsData->onEachSide(1)->links('vendor.pagination.bootstrap-5') }}
            </div>
            @endif
        </div>
    </section>

    @if(!empty($seoData['description']))
    <section>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="contentview">
                        <div class="details-page">
                            {!! CommonHelper::addNoFollowToExternalLinks($seoData['description']) !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

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

</div>