@extends('layouts.blesser.app')

@section('content')
<div class="container pt-10">
    <!-- Mobile Filters -->
    <div class="flex items-center gap-4 lg:hidden">
        <!-- Filter -->
        <button type="button" data-drawer-target="filter-drawer" data-drawer-show="filter-drawer" data-drawer-placement="bottom" aria-controls="filter-drawer" class="flex w-full items-center gap-2 rounded-lg bg-muted px-2 py-2">
            <div class="i-ion-ios-settings-strong size-6"></div>
            فیلتر
        </button>
        <!-- Sort -->
        <button type="button" data-drawer-target="sort-drawer" data-drawer-show="sort-drawer" data-drawer-placement="bottom" aria-controls="sort-drawer" class="flex w-full items-center gap-2 rounded-lg bg-muted px-2 py-2">
            <div class="i-lucide-list-filter size-6"></div>
            مرتب سازی
        </button>
    </div>

    <div class="grid grid-cols-12 grid-rows-[60px_min(500px,_1fr)] lg:gap-8">
        @if (false)
        <!-- Desktop Filters -->
        <div class="col-span-4 row-span-2 hidden lg:block xl:col-span-3">
            <div class="sticky top-32 mb-4 overflow-hidden rounded-lg bg-muted">
                <div dir="ltr" class="flex max-h-[calc(90vh_-_100px)] flex-col overflow-y-auto overflow-x-hidden">
                    <!-- Filters Loading Animation -->
                    <!-- <div class="animate-pulse rounded-md bg-secondary min-h-[calc(70vh_-_100px)]"></div> -->
                    <div dir="rtl">
                        <div class="flex h-full flex-col gap-4">
                            <div class="flex items-center justify-between p-4 pb-0">
                                <div class="text-lg font-medium">فیلترها</div>
                                <button class="text-sm text-primary disabled:text-text/60">لغو فیلترها</button>
                            </div>
                            <!-- Filters -->
                            <div class="grow overflow-y-auto">
                                <ul class="divide-y">
                                    <li>
                                        <label class="flex cursor-pointer items-center justify-between px-4 py-5" for="onlyHottestDesktop">
                                            <div>داغ ترین ها</div>
                                            <div class="relative inline-flex cursor-pointer items-center">
                                                <input class="peer sr-only" id="onlyHottestDesktop" type="checkbox" />

                                                <div class="peer h-6 w-11 rounded-full bg-background after:absolute after:left-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:bg-muted after:transition-all after:content-[''] peer-checked:bg-primary peer-checked:after:translate-x-full"></div>
                                            </div>
                                        </label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
        <div class="col-span-12 space-y-4 ">
            @if (false)

            <!-- Desktop Sort -->
            <div class="hidden lg:block">
                <div class="flex h-14 items-center gap-x-2 rounded-lg bg-muted px-2 shadow lg:px-4">
                    <div class="flex items-center gap-x-2 text-sm lg:text-base">
                        <div class="i-lucide-list-filter size-6"></div>
                        <p>مرتب سازی بر اساس</p>
                    </div>
                    <button class="rounded-lg bg-primary/15 px-1 py-1.5 text-sm text-primary duration-200 lg:px-4 lg:text-base">جدید ترین</button>
                    <button class="rounded-lg px-1 py-1.5 text-sm duration-200 hover:text-primary lg:px-4 lg:text-base">پربازدید ترین</button>
                </div>
            </div>
            <!--  Empty Search Result -->
            <!--                    <div class="flex flex-col gap-y-4 items-center justify-center text-text">-->
            <!--                        <div class="i-ic-outline-search-off size-24"></div>-->
            <!--                        <div class="text-2xl"> مطلبی یافت نشد!</div>-->
            <!--                    </div>-->
            @endif

            <div class="grid grid-cols-1 gap-2 gap-y-2 xs:grid-cols-2 xs:gap-4 md:grid-cols-2 xl:grid-cols-3">
                <!-- Search Result -->
                @forelse ($posts as $post )
                <x-blesser.element.single-post-card :post="$post" />
                @empty

                @endforelse

            </div>
            <!-- Pagination -->
            {{ $posts->links('pagination.blesser')  }}
        </div>
    </div>
</div>
@endsection