<aside class="w-full lg:w-1/3">
    <div class="sticky top-28 space-y-8">

        <div class="bg-white p-6 rounded-lg shadow-md">
            <h3 class="text-xl font-bold text-gray-800 mb-4">Cari Artikel</h3>
            <form action="{{ route('articles.index') }}" method="GET" class="relative">
                <input type="text" name="search" placeholder="Ketik kata kunci..."
                    class="w-full py-2 pl-4 pr-10 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"
                    value="{{ request('search') }}">
                <button type="submit" class="absolute right-0 top-0 mt-3 mr-4 text-gray-500 hover:text-blue-600">
                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                    </svg>
                </button>
            </form>
        </div>


        <div class="bg-white p-6 rounded-lg shadow-md">
            <h3 class="text-xl font-bold text-gray-800 mb-4">Kategori</h3>
            <ul class="space-y-3">
                @forelse ($categories as $category)
                    <li>
                        <a href="{{ route('articles.category', $category) }}"
                            class="flex justify-between items-center text-gray-700 hover:text-blue-600 hover:font-semibold">

                            <span class="flex items-center gap-3">
                                <span>{{ $category->name }}</span>
                            </span>
                            <span class="text-sm bg-gray-200 text-gray-600 px-2 py-0.5 rounded-full">
                                {{ $category->articles_count }}
                            </span>
                        </a>
                    </li>
                @empty
                    <li>
                        <p class="text-gray-500">Belum ada kategori.</p>
                    </li>
                @endforelse
            </ul>
        </div>

        {{-- <div class="bg-white p-6 rounded-lg shadow-md">
        </div> --}}

    </div>
</aside>
