@push('metadata')
@php
$page_id = 36;
$mTitle = @$seoData['seo_title'];
$mDescr = @$seoData['meta_description'];
$faqs = $seoData['faq'] ?? '[]';
$mKWords= $seoData['meta_keywords'];
$breadcrum= $seoData['breadcrumb'];
$mUrl = url()->current();

if (Str::contains($mUrl, 'crypto-news-hindi')) {
$mImage = config('constants.crypto_news_listing');
} elseif (Str::contains($mUrl, 'crypto-blogs-hindi')) {
$mImage = config('constants.blogs');
} elseif (Str::contains($mUrl, 'price-prediction')) {
$mImage = config('constants.crypto_price_prediction');
} elseif (Str::contains($mUrl, 'bitcoin-press-release-distribution-media-guide')) {
$mImage = config('constants.bitcoin');
} elseif (Str::contains($mUrl, 'presale-press-release-pricing-media-publishing')) {
$mImage = config('constants.presale');
} elseif (Str::contains($mUrl, 'listicle-crypto-articles-pricing-media-publishing')) {
$mImage = config('constants.listicle');
} elseif (Str::contains($mUrl, 'airdrop-press-release-pricing-media-publishing')) {
$mImage = config('constants.airdrop');
} elseif (Str::contains($mUrl, 'press-release-india')) {
$mImage = config('constants.press_release');
} elseif (Str::contains($mUrl, 'guest-post')) {
$mImage = config('constants.crypto_guestpost');
} else {
$mImage = config('constants.crypto_news_listing');
}

@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 name="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="{{ @$mTitle }}" />
<meta property="twitter:description" content="{{ @$mDescr }}" />
<meta property="twitter:url" content="{{ @$mUrl }}" />
<meta property="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 Hindi RSS Feed"
    href="{{ RssFeedHelper::getRssFeedUrl($type) }}" />
@endpush
@push('pageId')
<script>
window.pageId = "{{ $seoData['id'] ?? '' }}";
</script>
@endpush

@push('styles')
<style>
.topheading p {
    margin-bottom: 0;
    }
</style>
@endpush

@push('head_scripts')
{!! SchemaHelper::webpageSchema($mTitle ?? null, $mDescr ?? null) !!}
{!! SchemaHelper::getImageObjectSchema('https://cryptohindinews.in/assets/images/logo/hindi-black-logo.webp',$mTitle)
!!}
{!! SchemaHelper::getFaqSchema(json_encode($seoData['faq'])) !!}
{!! SchemaHelper::getBreadcrumbSchema([['name' => 'Home', 'url' => url('/')],['name' => ucwords(str_replace('-', ' ',
$slug)) , 'url' => $mUrl]]) !!}
{!! SchemaHelper::newsListArticleSchema($cryptoNews) !!}
@endpush
<div>
    <section class="bg-darkpink p-2 breadcrumb mb-0">
        <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 align-items-center">
                        <li><a href="{{ URL('/') }}" class="text-decoration-none text-white" title="Home">Home</a></li>
                        <li>
                            {{ ucwords(str_replace('-', ' ', $slug)) }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="bg-lightgray py-3">
        <div class="container">
            <div class="row">
                <div class="col-xl-12 col-12 text-center topheading">
                    {!! $seoData['top_page_content'] !!}
                </div>
                <div class="col-xl-12">
                    <div class="d-flex my-sm-2 justify-content-end align-items-center">
                        <input class="form-control py-2 w-fit" placeholder="Search By Title..." type="text"
                            wire:model="search">
                        <div class="d-flex align-items-center justify-content-center">
                            <button class="btn btn-primary py-1 m-1" wire:click="searchNews" aria-label="Search news">
                                <i class="fa fa-search fs-6"></i>
                            </button>
                            <button class="btn btn-danger py-1 m-1" wire:click="resetSearch" aria-label="Search reset">
                                <i class="fa fa-refresh fs-6"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                @if(count($cryptoNews) === 0)
                <div class="col-12 text-center py-4">
                    <p class="text-muted fs-5 m-0">No record found</p>
                </div>
                @else

                @foreach ($cryptoNews as $news)
                <div class="col-md-5th my-2">
                    <div class="card h-100">

                        {{-- CARD HEADER WITH IMAGE --}}
                        <div class="card-header p-0 border-0 position-relative h-100">
                            <a href="{{ URL($news['alias']) }}" class="text-dark text-decoration-none me-2 lh-normal"
                                title="{{ $news['title'] }}">
                                @php
                                $altText = trim($news['img_alt_title'] ?? '') !== ''
                                ? $news['img_alt_title']
                                : $news['title'];
                                @endphp

                                <img src="{{ CommonHelper::s3ImageOrDefault($news['image']) }}"
                                class="img-fluid rounded-top" alt="{{ $altText }}"
                                height="162" width="291"
                                loading="{{ $loop->first ? 'eager' : 'lazy' }}"
                                @if($loop->first) fetchpriority="high" @endif>
                                <span class="d-none">{{ $news['title'] }}</span>
                            </a>
                                <div
                                    class="position-absolute top-5 end-1 bg-white rounded-4 px-1 d-flex align-items-center fs-12 lh-1">
                                    <x-like-card :id="$news['id'] ?? ''" :type="'news'"
                                        :likeCount="$news['likes_counts'] ?? 0" />
                                    <button
                                        class="text-dark text-decoration-none lh-normal share-btn border-0 bg-transparent py-0 px-2"
                                        data-url="{{ URL($news['alias']) }}" data-bs-toggle="modal"
                                        data-bs-target="#shareModal" title="Share"
                                        wire:click="setShareUrl('{{ URL($news['alias']) }}')">
                                        <i class="fa-solid fa-share"></i>
                                        <span class="d-none">Share Button</span>
                                    </button>
                                </div>
                        </div>

                        {{-- CARD BODY WITH TITLE --}}
                        <div class="card-body px-2 py-1 mb-2">
                            <a href="{{ URL($news['alias']) }}" class="text-dark text-decoration-none d-block lh-normal"
                                title="{{ $news['title'] }}">
                                <span class="two-lines-text text-paragraph fs-15 fw-bold">
                                    {{ $news['title'] }}
                                </span>
                            </a>
                        </div>

                        {{-- CARD FOOTER --}}
                        <div
                            class="card-footer bg-transparent border-top-0 d-flex justify-content-between align-items-center flex-wrap px-2 py-0 w-100">

                            {{-- AUTHOR + TIME --}}
                            <div class="d-flex gap-1">
                                <a href="{{ URL('crypto-web3-blockchain-author-detail/'.$news['post_author']['slug']) }}"
                                    class="text-paragraph fw-semibold text-decoration-none text-capitalize fs-12 border-end pe-1"
                                    title="By: {{ $news['post_author']['dispaly_name'] }}">
                                    {{ Str::limit($news['post_author']['dispaly_name'] ?? 'Admin', 8) }}
                                </a>

                                <span class="fs-12 one-line-text d-inline-block">
                                    {{ \Carbon\Carbon::parse($news['publishedAt'])->diffForHumans() }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach

                @if($hasMore)
                <div class="text-center mt-3">
                    <button wire:click="loadMore" class="btn btn-primary rounded-3 pt-2">
                        Load More
                    </button>
                </div>
                @endif
                @endif

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

    <section>
    <div class="container py-3">
        <div class="row">
            <div class="col-xl-12">
                <div class="content-view">
                    {!! CommonHelper::addNoFollowToExternalLinks(@$seoData['description']) !!}
                </div>
            </div>
        </div>
    </div>
    </section>

    <livewire:faq-section pageType="{{ $slug }}" />
    @include('livewire.common.share-modal')
</div>