@extends('layouts.app')

@section('title', $metaTitle)

@section('body-class', 'lib-hub-page')

@section('content')
    @php
        $searchAction = $activeCategory
            ? route('library.category', $activeCategory)
            : route('library.tag', $activeTag);
        $sectionDesc = $activeCategory
            ? 'جميع المقالات ضمن هذا التصنيف.'
            : 'جميع المقالات الموسومة بهذا الوسم.';
    @endphp
    <div class="lib-hub">
        @include('library.partials.topbar')

        <section class="lib-hub__hero lib-hub__hero--compact" aria-labelledby="lib-browse-heading">
            <div class="lib-hub__hero-inner">
                <nav class="lib-hub__breadcrumb" aria-label="مسار التنقل">
                    <a href="{{ route('library.home') }}" class="lib-hub__breadcrumb-link">الرئيسية</a>
                    <span class="lib-hub__breadcrumb-sep" aria-hidden="true">/</span>
                    @if ($activeCategory)
                        <span class="lib-hub__breadcrumb-current lib-hub__breadcrumb-current--with-badge">
                            <span>{{ $activeCategory->name }}</span>
                            <x-new-badge :show="$activeCategory->show_new_badge" class="new-badge--breadcrumb" />
                        </span>
                    @else
                        <span class="lib-hub__breadcrumb-current lib-hub__breadcrumb-current--with-badge">
                            <span>الوسم: {{ $activeTag->name }}</span>
                            <x-new-badge :show="$activeTag->show_new_badge" class="new-badge--breadcrumb" />
                        </span>
                    @endif
                </nav>
                <h1 id="lib-browse-heading" class="lib-hub__title lib-hub__title--browse lib-hub__title--with-badge">
                    @if ($activeCategory)
                        <span class="lib-hub__browse-title-text">{{ $activeCategory->name }}</span>
                        <x-new-badge :show="$activeCategory->show_new_badge" />
                    @else
                        <span class="lib-hub__browse-title-text">الوسم: {{ $activeTag->name }}</span>
                        <x-new-badge :show="$activeTag->show_new_badge" />
                    @endif
                </h1>
                <p class="lib-hub__lead lib-hub__lead--browse">{{ $sectionDesc }}</p>

                <form class="lib-hub__search" method="get" action="{{ $searchAction }}" role="search">
                    <label class="visually-hidden" for="lib-browse-q">بحث في المقالات</label>
                    <div class="lib-hub__search-row">
                        <input
                            id="lib-browse-q"
                            type="search"
                            name="q"
                            class="lib-hub__search-input input-control"
                            value="{{ $q }}"
                            placeholder="ابحث بالعنوان أو الكلمات داخل المقال…"
                            autocomplete="off"
                            enterkeyhint="search"
                        >
                        <button type="submit" class="btn btn--primary lib-hub__search-btn">بحث</button>
                    </div>
                    @if ($q !== '')
                        <div class="lib-hub__search-meta">
                            <a href="{{ $searchAction }}" class="lib-hub__clear-filters">مسح البحث</a>
                        </div>
                    @endif
                </form>
            </div>
        </section>

        <div class="lib-hub__shell lib-hub__shell--with-sidebar">
            @include('library.partials.sidebar-categories', ['parentCategories' => $parentCategories, 'activeCategory' => $activeCategory])

            <div class="lib-hub__main">
                @include('library.partials.article-grid-block', [
                    'articles' => $articles,
                    'sectionHeading' => $q !== '' ? 'نتائج البحث' : 'المقالات',
                    'sectionDesc' => 'نفس عرض الصفحة الرئيسية: شبكة أو قائمة.',
                ])

                <section class="lib-hub__wa" aria-label="تواصل عبر واتساب">
                    <div class="lib-hub__wa-inner">
                        <div class="lib-hub__wa-text">
                            <h2 class="lib-hub__wa-title">لم تجد ما تبحث عنه؟</h2>
                            <p class="lib-hub__wa-desc">تواصل معنا مباشرة عبر واتساب وسنساعدك في أقرب وقت.</p>
                        </div>
                        <a
                            href="https://wa.me/966920032582"
                            class="lib-hub__wa-btn"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            <span class="lib-hub__wa-icon" aria-hidden="true">💬</span>
                            تواصل معنا عبر واتساب
                        </a>
                    </div>
                </section>

                @include('library.partials.site-footer')
            </div>
        </div>
    </div>
@endsection