@extends('layouts.site')

@section('title', 'الأخبار التقنية | XRD LAB')

@section('content')
<main id="main">
    @include('partials.breadcrumbs', [
        'items' => [
            ['label' => 'الرئيسية', 'url' => route('home')],
            ['label' => 'الأخبار', 'url' => route('news.index')],
        ],
    ])

    <section id="blog" class="blog" dir="rtl">
        <div class="container" data-aos="fade-up">
            <div class="row">
                <div class="col-lg-8 entries">
                    @forelse($articles as $article)
                        @include('partials.blog.entry', ['article' => $article])
                    @empty
                        <div class="alert alert-info">لا توجد أخبار منشورة حالياً.</div>
                    @endforelse
                </div>

                <div class="col-lg-4 d-none d-lg-block">
                    <aside class="article-list-sidebar">
                        @include('partials.blog.sidebar', [
                            'sectionTitle' => $sectionTitle,
                            'sectionDescription' => $sectionDescription,
                            'recentPosts' => $recentPosts,
                            'recentPostsTitle' => $recentPostsTitle,
                        ])
                    </aside>
                </div>

                <div class="col-12 d-lg-none">
                    @include('partials.blog.sidebar', [
                        'sectionTitle' => $sectionTitle,
                        'sectionDescription' => $sectionDescription,
                        'recentPosts' => $recentPosts,
                        'recentPostsTitle' => $recentPostsTitle,
                    ])
                </div>
            </div>
        </div>
    </section>
</main>
@endsection

@push('styles')
<style>
.article-list-sidebar { position: sticky; top: 100px; }
</style>
@endpush