<!-- Compare -->
<div id="compare-drawer" class="fixed inset-x-0 bottom-0 z-40 max-h-[80dvh] w-full translate-y-full rounded-t-xl border-t bg-muted transition-transform duration-500" tabindex="-1" aria-labelledby="compare-drawer">
    <div class="flex h-full max-h-[80dvh] flex-col gap-4">
        <div class="flex items-center justify-between px-4 pb-2 pt-3">
            <div>لیست مقایسه</div>
            <button class="btn-warning px-4 py-2 text-sm">حذف همه</button>
        </div>
        <!-- Items -->
        <div class="grow overflow-y-auto">
            <ul class="space-y-2 divide-y p-5 pl-2">
                <li>
                    <div class="flex gap-x-2 py-5">
                        <div class="relative min-w-fit">
                            <a href="./product-detail.html">
                                <img src="/assets/themes/blesser/images/p1.png" alt="نایک زوم پگاسوس توربو مشکی" loading="lazy" class="h-25 w-25 rounded-3xl" />
                            </a>
                            <button class="absolute -top-2 right-0 rounded-lg border bg-muted duration-200 hover:bg-background">
                                <div class="i-lucide-trash m-2 h-4 w-4 text-warning"></div>
                            </button>
                        </div>
                        <div class="w-full space-y-4">
                            <a href="./product-detail.html" class="line-clamp-2 text-text">نایک زوم پگاسوس توربو مشکی</a>
                            <div class="flex items-center justify-between gap-x-2">
                                <div class="flex items-center gap-x-2 text-primary"><span class="text-lg font-bold">900,000</span><span class="text-sm">تومان</span></div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="flex gap-x-2 py-5">
                        <div class="relative min-w-fit">
                            <a href="./product-detail.html">
                                <img src="/assets/themes/blesser/images/p1.png" alt="نایک زوم پگاسوس توربو مشکی" loading="lazy" class="h-25 w-25 rounded-3xl" />
                            </a>
                            <button class="absolute -top-2 right-0 rounded-lg border bg-muted duration-200 hover:bg-background">
                                <div class="i-lucide-trash m-2 h-4 w-4 text-warning"></div>
                            </button>
                        </div>
                        <div class="w-full space-y-4">
                            <a href="./product-detail.html" class="line-clamp-2 text-text">نایک زوم پگاسوس توربو مشکی</a>
                            <div class="flex items-center justify-between gap-x-2">
                                <div class="flex items-center gap-x-2 text-primary"><span class="text-lg font-bold">900,000</span><span class="text-sm">تومان</span></div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="flex gap-x-2 py-5">
                        <div class="relative min-w-fit">
                            <a href="./product-detail.html">
                                <img src="/assets/themes/blesser/images/p1.png" alt="نایک زوم پگاسوس توربو مشکی" loading="lazy" class="h-25 w-25 rounded-3xl" />
                            </a>
                            <button class="absolute -top-2 right-0 rounded-lg border bg-muted duration-200 hover:bg-background">
                                <div class="i-lucide-trash m-2 h-4 w-4 text-warning"></div>
                            </button>
                        </div>
                        <div class="w-full space-y-4">
                            <a href="./product-detail.html" class="line-clamp-2 text-text">نایک زوم پگاسوس توربو مشکی</a>
                            <div class="flex items-center justify-between gap-x-2">
                                <div class="flex items-center gap-x-2 text-primary"><span class="text-lg font-bold">900,000</span><span class="text-sm">تومان</span></div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="border-t p-4">
            <a href="./compare.html" class="btn-primary block w-full py-2"> نمایش نتیجه </a>
        </div>
    </div>
</div>
<!-- Favorite -->
<div id="favorite-drawer" class="fixed inset-x-0 bottom-0 z-40 max-h-[80dvh] w-full translate-y-full rounded-t-xl border-t bg-muted transition-transform duration-500" tabindex="-1" aria-labelledby="favorite-drawer">
    <div class="flex h-full max-h-[80dvh] flex-col gap-4">
        <div class="flex items-center justify-between px-4 pb-2 pt-3">
            <div>لیست علاقه‌مندی</div>
            <button class="btn-warning px-4 py-2 text-sm">حذف همه</button>
        </div>
        <!-- Items -->
        <div class="grow overflow-y-auto">
            <ul class="space-y-2 divide-y p-5 pl-2">
                <li>
                    <div class="flex gap-x-2 py-5">
                        <div class="relative min-w-fit">
                            <a href="./product-detail.html">
                                <img src="/assets/themes/blesser/images/p1.png" alt="نایک زوم پگاسوس توربو مشکی" loading="lazy" class="h-25 w-25 rounded-3xl" />
                            </a>
                            <button class="absolute -top-2 right-0 rounded-lg border bg-muted duration-200 hover:bg-background">
                                <div class="i-lucide-trash m-2 h-4 w-4 text-warning"></div>
                            </button>
                        </div>
                        <div class="w-full space-y-4">
                            <a href="./product-detail.html" class="line-clamp-2 text-text">نایک زوم پگاسوس توربو مشکی</a>
                            <div class="flex items-center justify-between gap-x-2">
                                <div class="flex items-center gap-x-2 text-primary"><span class="text-lg font-bold">900,000</span><span class="text-sm">تومان</span></div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="flex gap-x-2 py-5">
                        <div class="relative min-w-fit">
                            <a href="./product-detail.html">
                                <img src="/assets/themes/blesser/images/p1.png" alt="نایک زوم پگاسوس توربو مشکی" loading="lazy" class="h-25 w-25 rounded-3xl" />
                            </a>
                            <button class="absolute -top-2 right-0 rounded-lg border bg-muted duration-200 hover:bg-background">
                                <div class="i-lucide-trash m-2 h-4 w-4 text-warning"></div>
                            </button>
                        </div>
                        <div class="w-full space-y-4">
                            <a href="./product-detail.html" class="line-clamp-2 text-text">نایک زوم پگاسوس توربو مشکی</a>
                            <div class="flex items-center justify-between gap-x-2">
                                <div class="flex items-center gap-x-2 text-primary"><span class="text-lg font-bold">900,000</span><span class="text-sm">تومان</span></div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="flex gap-x-2 py-5">
                        <div class="relative min-w-fit">
                            <a href="./product-detail.html">
                                <img src="/assets/themes/blesser/images/p1.png" alt="نایک زوم پگاسوس توربو مشکی" loading="lazy" class="h-25 w-25 rounded-3xl" />
                            </a>
                            <button class="absolute -top-2 right-0 rounded-lg border bg-muted duration-200 hover:bg-background">
                                <div class="i-lucide-trash m-2 h-4 w-4 text-warning"></div>
                            </button>
                        </div>
                        <div class="w-full space-y-4">
                            <a href="./product-detail.html" class="line-clamp-2 text-text">نایک زوم پگاسوس توربو مشکی</a>
                            <div class="flex items-center justify-between gap-x-2">
                                <div class="flex items-center gap-x-2 text-primary"><span class="text-lg font-bold">900,000</span><span class="text-sm">تومان</span></div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="flex gap-x-2 py-5">
                        <div class="relative min-w-fit">
                            <a href="./product-detail.html">
                                <img src="/assets/themes/blesser/images/p1.png" alt="نایک زوم پگاسوس توربو مشکی" loading="lazy" class="h-25 w-25 rounded-3xl" />
                            </a>
                            <button class="absolute -top-2 right-0 rounded-lg border bg-muted duration-200 hover:bg-background">
                                <div class="i-lucide-trash m-2 h-4 w-4 text-warning"></div>
                            </button>
                        </div>
                        <div class="w-full space-y-4">
                            <a href="./product-detail.html" class="line-clamp-2 text-text">نایک زوم پگاسوس توربو مشکی</a>
                            <div class="flex items-center justify-between gap-x-2">
                                <div class="flex items-center gap-x-2 text-primary"><span class="text-lg font-bold">900,000</span><span class="text-sm">تومان</span></div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="flex gap-x-2 py-5">
                        <div class="relative min-w-fit">
                            <a href="./product-detail.html">
                                <img src="/assets/themes/blesser/images/p1.png" alt="نایک زوم پگاسوس توربو مشکی" loading="lazy" class="h-25 w-25 rounded-3xl" />
                            </a>
                            <button class="absolute -top-2 right-0 rounded-lg border bg-muted duration-200 hover:bg-background">
                                <div class="i-lucide-trash m-2 h-4 w-4 text-warning"></div>
                            </button>
                        </div>
                        <div class="w-full space-y-4">
                            <a href="./product-detail.html" class="line-clamp-2 text-text">نایک زوم پگاسوس توربو مشکی</a>
                            <div class="flex items-center justify-between gap-x-2">
                                <div class="flex items-center gap-x-2 text-primary"><span class="text-lg font-bold">900,000</span><span class="text-sm">تومان</span></div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="flex gap-x-2 py-5">
                        <div class="relative min-w-fit">
                            <a href="./product-detail.html">
                                <img src="/assets/themes/blesser/images/p1.png" alt="نایک زوم پگاسوس توربو مشکی" loading="lazy" class="h-25 w-25 rounded-3xl" />
                            </a>
                            <button class="absolute -top-2 right-0 rounded-lg border bg-muted duration-200 hover:bg-background">
                                <div class="i-lucide-trash m-2 h-4 w-4 text-warning"></div>
                            </button>
                        </div>
                        <div class="w-full space-y-4">
                            <a href="./product-detail.html" class="line-clamp-2 text-text">نایک زوم پگاسوس توربو مشکی</a>
                            <div class="flex items-center justify-between gap-x-2">
                                <div class="flex items-center gap-x-2 text-primary"><span class="text-lg font-bold">900,000</span><span class="text-sm">تومان</span></div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- Profile Link Drawer -->
<div id="profile-drawer" class="fixed inset-x-0 bottom-0 z-40 max-h-[80dvh] w-full translate-y-full rounded-t-xl border-t bg-muted transition-transform duration-500" tabindex="-1" aria-labelledby="profile-drawer">
    <div class="flex h-full max-h-[80dvh] flex-col gap-4">
        <!-- Items -->
        <div class="grow overflow-y-auto">
            <x-blesser.element.user-dashboard-link class="space-y-2 p-4 pl-2" />
        </div>
    </div>
</div>
