@php
    $sectionHeading = $sectionHeading ?? 'المقالات';
    $sectionDesc = $sectionDesc ?? 'مقالات منشورة ومتاحة للجميع، مرتبة حسب تاريخ النشر.';
@endphp
<section class="lib-hub__section lib-hub__section--articles" aria-labelledby="lib-articles-heading">
    <div class="lib-hub__section-head lib-hub__section-head--row lib-hub__section-head--articles">
        <div>
            <h2 id="lib-articles-heading" class="lib-hub__section-title">{{ $sectionHeading }}</h2>
            <p class="lib-hub__section-desc">{{ $sectionDesc }}</p>
        </div>
        @if ($articles->isNotEmpty())
            <div class="lib-hub__article-toolbar">
                <span class="lib-hub__view-label" id="lib-hub-view-label">عرض المقالات</span>
                <div class="lib-hub__view-toggle" role="group" aria-labelledby="lib-hub-view-label">
                    <button
                        type="button"
                        class="lib-hub__view-btn is-active"
                        data-lib-hub-view-btn
                        data-view="grid"
                        aria-pressed="true"
                        title="عرض شبكي"
                    >
                        <span class="lib-hub__view-icon" aria-hidden="true">▦</span>
                        شبكة
                    </button>
                    <button
                        type="button"
                        class="lib-hub__view-btn"
                        data-lib-hub-view-btn
                        data-view="list"
                        aria-pressed="false"
                        title="عرض قائمة"
                    >
                        <span class="lib-hub__view-icon" aria-hidden="true">☰</span>
                        قائمة
                    </button>
                </div>
            </div>
        @endif
    </div>

    @if ($articles->isEmpty())
        <div class="lib-hub__empty">
            <p class="lib-hub__empty-title">لا توجد مقالات مطابقة</p>
            <p class="lib-hub__empty-text">جرّب كلمات أخرى، أو أزل التصفية، أو تواصل معنا عبر واتساب.</p>
        </div>
    @else
        <div id="lib-hub-articles" class="lib-hub__article-grid lib-hub__article-grid--grid">
            @foreach ($articles as $article)
                <article class="lib-hub__article-card">
                    @php
                        $lastTouch = $article->updated_at ?? $article->published_at;
                    @endphp
                    <a href="{{ route('library.article.show', $article->slug) }}" class="lib-hub__article-link">
                        <div class="lib-hub__article-text">
                            <h3 class="lib-hub__article-title">
                                <span class="lib-hub__article-title-text">{{ $article->title }}</span>
                                <x-new-badge :show="$article->show_new_badge" />
                            </h3>
                            @if ($lastTouch)
                                <p class="lib-hub__article-updated">
                                    آخر تحديث
                                    <time datetime="{{ $lastTouch->toIso8601String() }}">{{ $lastTouch->locale('ar')->translatedFormat('j F Y') }}</time>
                                </p>
                            @endif
                        </div>
                        <span class="lib-hub__article-read">
                            قراءة المقال
                            <span class="lib-hub__article-read-arrow" aria-hidden="true">←</span>
                        </span>
                    </a>
                </article>
            @endforeach
        </div>

        <div class="lib-hub__pagination">
            {{ $articles->links() }}
        </div>
    @endif
</section>