@extends('layouts.app')
@section('content')
    <section class="w-full bg-gray-100">
        <div class="max-w-7xl mx-auto px-4 py-4">
            <nav class="text-sm mb-0 text-black" aria-label="Breadcrumb">
                <ol class="list-reset flex">
                    <li><a href="#" class="hover:text-red-600">Home</a></li>
                    <li><span class="mx-2">/</span></li>
                    <li class="text-red-600 font-semibold">Authors</li>
                </ol>
            </nav>
            <!-- Category Title -->
            <h1 class="text-3xl font-bold mt-1 text-gray-900"><span class="rounded text-black">Authors</span></h1>
        </div>
    </section>
    <section class="max-w-7xl mx-auto px-4 py-10">
        <!-- Breadcrumb -->
        <div class="flex flex-col lg:flex-row gap-6">
            <!-- Main Articles -->
            <div class="lg:w-2/3 flex flex-col gap-4">
                <!-- Tabs + Search -->
                <div class="w-full max-w-5xl mx-auto mt-8">
                    <div class="flex items-center justify-between border-b border-gray-300 pb-2">
                        <!-- Tabs -->
                        <div class="flex flex-col lg:flex-row space-x-4">
                            <button id="tab1Btn"
                                class="tab-btn text-gray-800 font-bold border-b-2 border-red-500 pb-1 transition uppercase"><i
                                    class="fa-solid fa-users"></i> Active Authors</button>
                            <button id="tab2Btn"
                                class="tab-btn text-gray-500 font-bold border-b-2 hover:text-gray-800 pb-1 transition uppercase"><i
                                    class="fa-solid fa-users"></i> All Authors</button>
                        </div>

                        <!-- Search Box -->
                        <div class="relative">
                            <input type="text" placeholder="Search..."
                                class="border border-gray-300 rounded-full px-3 py-1 pl-8 focus:outline-none focus:border-red-500 transition">
                            <i class="fa-solid fa-magnifying-glass absolute left-2 top-2 text-gray-400"></i>
                        </div>
                    </div>

                    <!-- Tab Content -->
                    <div class="mt-4">
                        <div id="tab1Content" class="tab-content block">
                            <div class="grid lg:grid-cols-3 grid-cols-1 gap-4">

                                @foreach ($ArrAuthorListing as $aa)
                                    <article
                                        class="flex w-full flex-col gap-4 items-center bg-gray-50 border hover:shadow-md transition p-3">
                                        <a href="/author/{{ Str::slug($aa->name) }}-{{ $aa->id }}.html"><img
                                                src="{{ Config::get('constants.Sitethumbnail') }}album/{{ $aa->photo }}"
                                                alt="Article 1" class="w-32 h-32 object-cover rounded-full flex-shrink-0">
                                            <div class="w-auto border-t">
                                                <h3
                                                    class="text-lg/6 font-semibold text-gray-800 hover:text-red-600 transition text-center">
                                                    {{ $aa->name }}
                                                </h3>
                                            </div>
                                        </a>
                                    </article>
                                @endforeach

                            </div>
                        </div>
                        <div id="tab2Content" class="tab-content hidden">
                            <div class="grid grid-cols-3 gap-4">

                                @foreach ($ArrAuthorListingall as $aaa)
                                    <article
                                        class="flex w-full flex-col gap-4 items-center bg-gray-50 border hover:shadow-md transition p-3">
                                        <a href="/author/{{ Str::slug($aaa->name) }}-{{ $aaa->id }}.html"><img
                                                src="{{ Config::get('constants.Sitethumbnail') }}album/{{ $aaa->photo }}"
                                                alt="Article 1" class="w-32 h-32 object-cover rounded-full flex-shrink-0">
                                            <div class="w-auto border-t">
                                                <h3
                                                    class="text-lg/6 font-semibold text-gray-800 hover:text-red-600 transition">
                                                    {{ $aaa->name }}
                                                </h3>
                                            </div>
                                        </a>
                                    </article>
                                @endforeach


                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            @include('article.rightsidebar')
        </div>
    </section>
@endsection