@php
    $aTutorialBanner = isset($oCategory) && $oCategory->oParent?->sSlug === config('tutorials.beginner_slug')
        ? config('tutorials.category_banners.' . $oCategory->sSlug)
        : null;
@endphp
<x-app-layout
    :seo="$seo"
    :pagination="$oArticles"
    :sSlug="$oCategory->sSlug ?? ''"
    :sTitle="isset($oCategory) && in_array($oCategory->sSlug, ['client', 'advanced']) ? $oCategory->sName . ' - ' . config('app.name') : config('app.title') . ' - ' . config('app.name')"
    :sDesc="isset($oCategory) && in_array($oCategory->sSlug, ['client', 'advanced']) ? $oCategory->sDescription : config('app.desc')"
>
    <main class="site-main">
        <div class="container">
            @if(isset($oCategory) && $oCategory->sSlug === 'news')
                <h1 class="h4 mb-3">{{ $oCategory->sName }}</h1>
            @endif
            @if ($aTutorialBanner || (isset($oCategory) && in_array($oCategory->sSlug, ['client', 'advanced'])))
                <link rel="stylesheet" href="/css/tutorials.css">
                @if ($oCategory->sSlug === 'client')
                    <h1 class="visually-hidden">{{ $oCategory->sName }}</h1>
                @endif
            @endif
            @if (count($oArticles) == 0)
                {{-- Empty State --}}
                <div class="content-error d-flex flex-fill align-items-center h-v-80">
                    <div class="text-center p-5 mx-auto">
                        <div class="d-inline-block svg-lg svg-empty"></div>
                        <p class="text-lg text-muted mt-3 mt-md-4">{{ isset($oCategory) && $oCategory->sSlug === 'news' ? '还没有资讯，稍后再来看看。' : '看起来这里没有任何东西…' }}</p>
                    </div>
                </div>
            @else
                <div class="row listAjax">
                    <div class="content-wrapper col-lg-8">
                        @if (@$aTag['name'])
                            <div class="archive-header block p-4 p-xl-5 mb-3">
                                <div class="archive-icon btn btn-primary btn-icon btn-md btn-rounded">
                                    <span><i class="iconfont icon-tag-fill"></i></span>
                                </div>
                                <div class="archive-body">
                                    <h1>{{@$aTag['name']}}<sup class="text-muted mx-1">{{@$aTag['count']}}</sup></h1>
                                </div>
                            </div>
                        @endif

                        @if ($aTutorialBanner)
                            <div class="list-cover tutorial-platform-banner rounded mb-3">
                                <img src="{{ $aTutorialBanner['image'] }}" alt="" width="1916" height="821" decoding="async">
                                <div class="cover-body">
                                    <h1 class="cover-title">{{ $aTutorialBanner['title'] }}<sup class="text-light mx-1">{{ $iArticleCount ?? count($oArticles) }}</sup></h1>
                                </div>
                            </div>
                        @elseif (isset($oCategory->aBanner) && !in_array($oCategory->sSlug, ['client', 'advanced']))
                            @php
                                $sBannerPath = '/sites/' . config('app.site_code_short') . '/images/banner/' . $oCategory->aBanner['img_file'];
                            @endphp

                            <div class="list-cover rounded mb-3">
                                <div class="media media-21x9">
                                    <div class="media-content" style="background-image:url({{ $sBannerPath }}); background-position: center {{ $oCategory->aBanner['img_top'] }};">
                                        <div class="overlay-grad"></div>
                                    </div>
                                </div>
                                <div class="cover-body">
                                    <h1 class="cover-title">{{ in_array($oCategory->sSlug, ['client', 'advanced']) ? $oCategory->sName : $oCategory->sSlug }}<sup class="text-light mx-1">{{ $iArticleCount ?? count($oArticles) }}</sup></h1>
                                </div>
                            </div>
                        @endif

                        <div class="list-home list-grid list-grid-padding">
                            @foreach ($oArticles as $oArticle)
                                <x-article-item :oArticle="$oArticle" />
                            @endforeach
                        </div>

                        <div class="page-load-status" style="display:none; padding: 20px; text-align: center;">
                            <div class="infinite-scroll-request">正在加载更多...</div>
                            <div class="infinite-scroll-last text-muted"> 已经到底了 </div>
                        </div>

                    </div>

                    <div class="sidebar col-lg-4 d-none d-lg-block ms-lg-auto">
                        @include('components.order-likes')
                        <!-- @include('components.generated-tags-cloud') -->
                    </div>

                </div>
            @endif
        </div>
    </main>
</x-app-layout>