<div class="flex items-center mb-6">
    <button onclick="history.back()" class="mr-4 text-gray-400 hover:text-gray-200">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
    </button>
    <h1 class="text-2xl text-gray-200 font-semibold">Notifications</h1>
    <span id="unreadBadge" class="ml-3 bg-red-500 text-white text-xs px-2 py-1 rounded-full hidden">0</span>
</div>

<div id="notifList" class="grid grid-cols-1 gap-4 md:grid-cols-3">
    <!-- Skeleton Loaders -->
    <div class="skeleton-loader rounded-lg p-4 bg-gray-800 animate-pulse"></div>
    <div class="skeleton-loader rounded-lg p-4 bg-gray-800 animate-pulse"></div>
    <div class="skeleton-loader rounded-lg p-4 bg-gray-800 animate-pulse"></div>
</div>

<!-- Notification Detail Drawer -->
<div id="drawer" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="fixed bottom-0 inset-x-0 bg-gray-800 rounded-t-xl transform translate-y-full transition-transform duration-300 max-h-[80vh] overflow-y-auto">
        <div class="sticky top-0 bg-gray-800 border-b border-gray-700 p-4">
            <div class="flex justify-between items-center">
                <h3 id="drawerTitle" class="text-lg font-semibold text-gray-200"></h3>
                <button onclick="closeDrawer()" class="text-gray-400 hover:text-gray-200">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <p id="drawerTime" class="text-sm text-gray-400 mt-1"></p>
        </div>
        <div id="drawerContent" class="p-4 prose prose-invert max-w-none text-gray-300"></div>
    </div>
</div>