@props([
    'parentCategories',
    'activeCategory' => null,
])
@if ($parentCategories->isNotEmpty())
    <aside class="lib-hub__sidebar" aria-label="التصنيفات">
        <nav class="lib-hub__sidebar-block" aria-labelledby="lib-sidebar-cat-heading">
            <h2 id="lib-sidebar-cat-heading" class="lib-hub__sidebar-heading">التصنيفات</h2>
            <ul class="lib-hub__sidebar-list">
                @foreach ($parentCategories as $cat)
                    @php
                        $hasChildren = $cat->children->isNotEmpty();
                        $expandSublist = $hasChildren
                            && $activeCategory
                            && (int) $activeCategory->parent_id === (int) $cat->id;
                    @endphp
                    <li
                        class="lib-hub__sidebar-item @if ($hasChildren) lib-hub__sidebar-item--has-children @endif @if ($expandSublist) lib-hub__sidebar-item--open @endif"
                    >
                        @if ($hasChildren)
                            <div class="lib-hub__sidebar-row">
                                <a
                                    href="{{ route('library.category', $cat) }}"
                                    class="lib-hub__sidebar-link @if ($activeCategory && $activeCategory->id === $cat->id && ! $activeCategory->parent_id) is-active @endif"
                                    @if ($activeCategory && $activeCategory->id === $cat->id && ! $activeCategory->parent_id) aria-current="page" @endif
                                >
                                    <span class="lib-hub__sidebar-icon" aria-hidden="true">
                                        @if ($cat->iconUrl())
                                            <img
                                                src="{{ $cat->iconUrl() }}"
                                                alt=""
                                                class="lib-hub__sidebar-icon-img"
                                                width="22"
                                                height="22"
                                                loading="lazy"
                                                decoding="async"
                                            >
                                        @else
                                            📁
                                        @endif
                                    </span>
                                    <span class="lib-hub__sidebar-link-text">{{ $cat->name }}</span>
                                    <x-new-badge :show="$cat->show_new_badge" class="new-badge--sidebar" />
                                </a>
                                <button
                                    type="button"
                                    class="lib-hub__sidebar-toggle"
                                    data-lib-sidebar-toggle
                                    aria-expanded="{{ $expandSublist ? 'true' : 'false' }}"
                                    aria-controls="lib-sidebar-sub-{{ $cat->id }}"
                                    aria-label="إظهار أو إخفاء التصنيفات الفرعية: {{ $cat->name }}"
                                >
                                    <svg
                                        class="lib-hub__sidebar-chevron"
                                        width="12"
                                        height="12"
                                        viewBox="0 0 12 12"
                                        aria-hidden="true"
                                        focusable="false"
                                    >
                                        <path
                                            fill="currentColor"
                                            d="M6 8.5 1.2 3.7l.6-.7L6 7.1l4.2-4.1.6.7z"
                                        />
                                    </svg>
                                </button>
                            </div>
                            <div
                                id="lib-sidebar-sub-{{ $cat->id }}"
                                class="lib-hub__sidebar-subpanel"
                                role="group"
                                aria-label="التصنيفات الفرعية: {{ $cat->name }}"
                            >
                                <div class="lib-hub__sidebar-subpanel-inner">
                                    <ul class="lib-hub__sidebar-sublist">
                                        @foreach ($cat->children as $child)
                                            <li>
                                                <a
                                                    href="{{ route('library.category', $child) }}"
                                                    class="lib-hub__sidebar-sublink @if ($activeCategory && $activeCategory->id === $child->id) is-active @endif"
                                                    @if ($activeCategory && $activeCategory->id === $child->id) aria-current="page" @endif
                                                >
                                                    @if ($child->iconUrl())
                                                        <img
                                                            src="{{ $child->iconUrl() }}"
                                                            alt=""
                                                            class="lib-hub__sidebar-icon-img lib-hub__sidebar-icon-img--sub"
                                                            width="18"
                                                            height="18"
                                                            loading="lazy"
                                                            decoding="async"
                                                        >
                                                    @endif
                                                    <span class="lib-hub__sidebar-sublink-text">{{ $child->name }}</span>
                                                    <x-new-badge :show="$child->show_new_badge" class="new-badge--sidebar new-badge--sidebar-sub" />
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        @else
                            <a
                                href="{{ route('library.category', $cat) }}"
                                class="lib-hub__sidebar-link @if ($activeCategory && $activeCategory->id === $cat->id && ! $activeCategory->parent_id) is-active @endif"
                                @if ($activeCategory && $activeCategory->id === $cat->id && ! $activeCategory->parent_id) aria-current="page" @endif
                            >
                                <span class="lib-hub__sidebar-icon" aria-hidden="true">
                                    @if ($cat->iconUrl())
                                        <img
                                            src="{{ $cat->iconUrl() }}"
                                            alt=""
                                            class="lib-hub__sidebar-icon-img"
                                            width="22"
                                            height="22"
                                            loading="lazy"
                                            decoding="async"
                                        >
                                    @else
                                        📁
                                    @endif
                                </span>
                                <span class="lib-hub__sidebar-link-text">{{ $cat->name }}</span>
                                <x-new-badge :show="$cat->show_new_badge" class="new-badge--sidebar" />
                            </a>
                        @endif
                    </li>
                @endforeach
            </ul>
        </nav>
    </aside>
@endif