{% load static %}
{% load gravatar %}
{% load socialaccount %}
{% load user_score %}
{% providers_media_js %}
{% load i18n %}
{% load custom_tags %}
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<nav class="fixed top-0 z-50 w-full bg-white/80 backdrop-blur-md border-zinc-200 border-b md:px-4 md:py-2.5 py-2 px-1">
    <div class="px-3 py-1 lg:px-5 lg:pl-3">
        <div class="flex items-center justify-between">
            <div class="flex md:gap-4 gap-0 items-center justify-start rtl:justify-end">
                <!-- Hamburger Menu -->
                <button id="hamburger-button"
                        data-drawer-target="logo-sidebar"
                        data-drawer-toggle="logo-sidebar"
                        aria-controls="logo-sidebar"
                        type="button"
                        class="inline-flex items-center justify-center p-2 text-gray-500 border-2 border-gray-300 rounded-lg hover:bg-red-500 hover:text-white text-red-500 border-red-500">
                    <i class="fa fa-bars md:text-xl text-lg"></i>
                </button>
                <!-- Logo -->
                <a href="{% url 'home' %}" class="flex select-none ms-4 md:me-24">
                    <img src="{% static 'img/owasp-blt-logo.svg' %}"
                         class="h-9 sm:h-10 md:h-10 lg:h-10 w-auto"
                         alt="OWASP BLT Logo"
                         width="50"
                         height="50" />
                </a>
            </div>
            <!-- Search Bar -->
            <div class="flex-1 max-w-xl mx-4 hidden sm:block">
                <div class="relative flex items-center rounded-lg overflow-hidden bg-white border-2 border-red-500 hover:bg-red-50 transition-colors duration-200">
                    <form class="w-full flex items-center"
                          action="{% url 'search' %}"
                          method="get">
                        <input type="hidden" name="type" id="filter-type" value="all">
                        <input type="text"
                               name="query"
                               id="query-input"
                               placeholder="Search here..."
                               class="w-full pl-12 pr-4 py-2 text-gray-700 placeholder-gray-400 placeholder:select-none placeholder:text-base bg-transparent outline-none">
                        {% with request.resolver_match.url_name as url_name %}
                            {% if url_name != 'home' %}
                                <div class="relative border-l-2 border-red-500 flex">
                                    <button type="submit">
                                        <i class="fa-solid fa-arrow-right mx-2 text-red-500"></i>
                                    </button>
                                    <button id="organizations-btn"
                                            type="button"
                                            class="flex items-center h-full px-4 text-gray-700 hover:bg-red-50 transition-colors duration-200 focus:outline-none">
                                        <i id="selected-icon" class="fas fa-check mr-2 text-red-500"></i>
                                        <span id="selected-filter" class="hidden md:inline">{% trans "All" %}</span>
                                        <i class="fa fa-chevron-down ml-2 text-red-500 text-sm"></i>
                                    </button>
                                    <div id="organizations-dropdown"
                                         class="z-50 hidden absolute bg-white top-full left-0 w-max mt-2 rounded-lg shadow-xl border">
                                        <ul class="flex flex-col gap-2 px-4 py-2">
                                            <li>
                                                <button data-value="all"
                                                        class="block px-2 py-1 hover:bg-red-50 rounded filter-option">
                                                    <i class="fa fa-check mr-2 text-red-500"></i>
                                                    {% trans "All" %}
                                                </button>
                                            </li>
                                            <li>
                                                <button data-value="organizations"
                                                        class="block px-2 py-1 hover:bg-red-50 rounded filter-option">
                                                    <i class="fa fa-building fa-fw mr-2 text-red-500"></i>
                                                    {% trans "Organizations" %}
                                                </button>
                                            </li>
                                            <li>
                                                <button data-value="issues"
                                                        class="block px-2 py-1 hover:bg-red-50 rounded filter-option">
                                                    <i class="fa fa-bug fa-fw mr-2 text-red-500"></i>
                                                    {% trans "Issues" %}
                                                </button>
                                            </li>
                                            <li>
                                                <button data-value="domains"
                                                        class="block px-2 py-1 hover:bg-red-50 rounded filter-option">
                                                    <i class="fa fa-globe fa-fw mr-2 text-red-500"></i>
                                                    {% trans "Domains" %}
                                                </button>
                                            </li>
                                            <li>
                                                <button data-value="users"
                                                        class="block px-2 py-1 hover:bg-red-50 rounded filter-option">
                                                    <i class="fa fa-user-group fa-fw mr-2 text-red-500"></i>
                                                    {% trans "Users" %}
                                                </button>
                                            </li>
                                            <li>
                                                <button data-value="projects"
                                                        class="block px-2 py-1 hover:bg-red-50 rounded filter-option">
                                                    <i class="fa fa-box fa-fw mr-2 text-red-500">
                                                    </i> {% trans "Projects" %}
                                                </button>
                                            </li>
                                            <li>
                                                <button data-value="repos"
                                                        class="block px-2 py-1 hover:bg-red-50 rounded filter-option">
                                                    <i class="fa-brands fa-github fa-fw mr-2 text-red-500"></i>
                                                    {% trans "Repos" %}
                                                </button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            {% endif %}
                        {% endwith %}
                    </form>
                    <i class="fa fa-search absolute left-4 text-red-500 z-10 my-auto text-lg"></i>
                </div>
            </div>
            <!-- Mobile Search Button -->
            <button class="p-2 text-red-500 sm:hidden" onclick="toggleMobileSearch()">
                <i class="fa fa-search text-3xl"></i>
            </button>
            {% if request.user.is_authenticated %}
                <div class="flex justify-center items-center gap-4">
                    <div class="relative">
                        <button id="notificationButton"
                                class="relative p-2 rounded-full hover:bg-gray-200 transition-colors duration-200">
                            <i class="fa fa-bell fa-lg"></i>
                            <!-- Badge is hidden by default -->
                            <span id="unreadCount"
                                  class="absolute top-0 right-0 bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5 hidden">
                            </span>
                        </button>
                        <div id="notificationDropdown"
                             class="hidden absolute right-0 mt-2 w-80 bg-white border shadow-md rounded-md z-50">
                            <div class="p-4">
                                <div class="flex justify-between items-center mb-4">
                                    <h3 class="font-semibold">Notifications</h3>
                                </div>
                                <div id="notificationList" class="space-y-2 max-h-128 overflow-y-auto">
                                    <!-- Notifications will be dynamically inserted here -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Dropdown Button -->
                    <button id="dropdownButton"
                            class="relative flex items-center sm:gap-2 md:px-4 md:py-2 bg-gray-200 md:rounded-lg rounded-full md:hover:bg-gray-200/70 transition-colors duration-200"
                            type="button">
                        {% if request.user.userprofile.avatar %}
                            <img src="{{ request.user.userprofile.avatar }}"
                                 class="md:size-8 size-10 rounded-full"
                                 alt="User Avatar"
                                 width="30"
                                 height="30">
                        {% elif request.user.socialaccount_set.all.0.get_avatar_url %}
                            <img src="{{ request.user.socialaccount_set.all.0.get_avatar_url }}"
                                 class="md:size-8 size-10 rounded-full"
                                 alt="User Avatar"
                                 width="30"
                                 height="30">
                        {% else %}
                            {% gravatar request.user.email 30 '' 'gravatar rounded-full size-10 md:size-8' %}
                        {% endif %}
                        <span class="absolute md:block hidden -right-[17px] -bottom-[25px] lg:-right-[25px] lg:-bottom-[25px] sm:static whitespace-nowrap">
                            <span>@{{ request.user.username }}</span> ({{ request.user|score|default:"0" }} Pts)
                        </span>
                    </button>
                    <!-- Dropdown Menu -->
                    <div id="dropdownMenu"
                         class="z-50 hidden absolute bg-white md:w-[300px] top-[85px] right-5 border shadow-md rounded-md">
                        <ul class="flex flex-col gap-1 px-4 py-4">
                            <li>
                                <a href="{% url 'account_profile' %}"
                                   class="flex items-center gap-1.5 py-2 px-3 hover:bg-gray-100 rounded-md hover:text-red-600 transition-colors duration-200 font-medium">
                                    <i class="fa fa-user fa-fw"></i> {% trans "User Profile" %}
                                </a>
                            </li>
                            {% if user.is_superuser %}
                                <li>
                                    <a href="{% url 'admin:index' %}"
                                       class="flex items-center gap-1.5 py-2 px-3 hover:bg-gray-100 rounded-md hover:text-red-600 transition-colors duration-200 font-medium">
                                        <i class="fa fa-cogs fa-fw"></i> {% trans "Admin Dashboard" %}
                                    </a>
                                </li>
                            {% endif %}
                            <li>
                                <a href="{% url 'start_hunt' %}"
                                   class="flex items-center gap-1.5 py-2 px-3 hover:bg-gray-100 rounded-md hover:text-red-600 transition-colors duration-200 font-medium">
                                    <i class="fa fa-play fa-fw"></i> {% trans "Start a Bug Hunt" %}
                                </a>
                            </li>
                            <li>
                                <a href="{% url 'social' %}"
                                   class="flex items-center gap-1.5 py-2 px-3 hover:bg-gray-100 rounded-md hover:text-red-600 transition-colors duration-200 font-medium">
                                    <i class="fa fa-share fa-fw"></i> {% trans "Social" %}
                                </a>
                            </li>
                            <li>
                                <a href="{% url 'account_change_password' %}"
                                   class="flex items-center gap-1.5 py-2 px-3 hover:bg-gray-100 rounded-md hover:text-red-600 transition-colors duration-200 font-medium">
                                    <i class="fa fa-gear fa-fw"></i> {% trans "Change Password" %}
                                </a>
                            </li>
                            <li>
                                <a href="{% url 'invite' %}"
                                   class="flex items-center gap-1.5 py-2 px-3 hover:bg-gray-100 rounded-md hover:text-red-600 transition-colors duration-200 font-medium">
                                    <i class="fa fa-paper-plane fa-fw"></i> {% trans "Invite an Organization" %}
                                </a>
                            </li>
                            <li>
                                <a href="{% url 'organization_view' %}"
                                   class="flex items-center gap-1.5 py-2 px-3 hover:bg-gray-100 rounded-md hover:text-red-600 transition-colors duration-200 font-medium">
                                    <i class="fa fa-building fa-fw"></i> {% trans "Organization Dashboard" %}
                                </a>
                            </li>
                            <!-- Divider -->
                            <li class="border my-2 w-full"></li>
                            <li>
                                <a class="flex items-center gap-1.5 py-3 px-4 bg-red-500 hover:bg-red-600 hover:text-white rounded-md text-white transition-colors duration-200 font-bold"
                                   href="{% url 'account_logout' %}?next={{ request.path }}">
                                    <i class="fa fa-sign-out fa-fw"></i> {% trans "Logout" %}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            {% else %}
                <!-- Sign up and Log in Buttons -->
                <div class="flex items-center">
                    <div class="hidden lg:flex justify-center items-center gap-4">
                        <a href="{% url 'account_signup' %}"
                           class="inline-flex select-none items-center justify-center px-3 py-2 text-red-500 border-2 border-red-500 rounded-lg hover:bg-red-500 hover:text-white font-medium transition-colors duration-200">
                            {% trans "Signup" %}
                        </a>
                        <a href="{% url 'account_login' %}?next={{ request.path }}"
                           data-toggle="modal"
                           class="inline-flex select-none items-center justify-center px-3 py-2 text-red-500 border-2 border-red-500 rounded-lg hover:bg-red-500 hover:text-white font-medium transition-colors duration-200">
                            {% trans "Login" %}
                        </a>
                    </div>
                    <!-- Log in icon -->
                    <a href="{% url 'account_login' %}?next={{ request.path }}"
                       class="block lg:hidden m-2">
                        <i class="fa fa-user text-4xl text-red-500"></i>
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
    <!-- Mobile Search Bar -->
    <div id="mobile-search"
         class="hidden sm:hidden md:hidden lg:hidden w-full px-4 py-3 bg-white border-t border-gray-200">
        <form action="{% url 'search' %}" method="get" class="flex items-center">
            <div class="relative flex-1">
                <i class="fa fa-search absolute text-xl left-3 top-1/2 -translate-y-1/2 text-red-500"></i>
                <input type="text"
                       name="query"
                       placeholder="Search here..."
                       class="w-full pl-10 pr-4 py-3 px-2 border-2 border-red-500 rounded-lg text-gray-700 placeholder-gray-400 placeholder:select-none placeholder:text-base">
                <input type="hidden" name="type" id="mobile-filter-type" value="all">
            </div>
            <button type="submit"
                    class="ml-2 py-3 px-4 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
                <i class="fa fa-search text-xl"></i>
            </button>
        </form>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const hamburgerButton = document.getElementById('hamburger-button');
            const sidebar = document.querySelector('.sidebar');
            
            if (hamburgerButton && sidebar) {
                hamburgerButton.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    sidebar.classList.toggle('-translate-x-full');
                });
                
                // Close sidebar when clicking outside
                document.addEventListener('click', function(e) {
                    if (!hamburgerButton.contains(e.target) && !sidebar.contains(e.target)) {
                        sidebar.classList.add('-translate-x-full');
                    }
                });
            }
        });
    </script>
</nav>
<!-- Chatbot -->
<div class="bg-gray-100 chat-Zindex">
    <div id="chatbot"
         class="fixed bottom-3 right-1 max-w-[400px] w-full bg-white rounded-lg shadow-lg h-[520px] z-[9999] overflow-hidden hidden">
        <div class="bg-red-600 text-white p-3 rounded-t-lg flex justify-between items-center">
            <h3 class="text-xl font-bold">Chat with BLT Bot</h3>
            <button id="closeChatbot" class="text-white text-2xl">×</button>
        </div>
        <div class="p-4">
            <div class="bg-red-100 p-3 rounded-lg mb-2 text-red-700">
                <p class="text-base">We respond instantly!</p>
            </div>
            <div id="chat-log"
                 class="bg-gray-100 p-3 rounded-lg max-h-[295px] h-[295px] overflow-y-auto relative">
                <div id="loading"
                     class="hidden absolute bottom-1 left-1 flex items-center justify-center bg-white/90 p-2 rounded-lg">
                    <svg class="animate-spin h-5 w-5 text-red-600"
                         xmlns="http://www.w3.org/2000/svg"
                         fill="none"
                         viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                        </path>
                    </svg>
                    <span class="ml-2 text-gray-600">Loading...</span>
                </div>
            </div>
            <!-- Quick Command Buttons -->
            <div id="quick-commands" class="flex flex-wrap gap-2 mb-2 mt-2">
                <button class="quick-command bg-gray-500 hover:bg-gray-600 text-white px-4 py-1 rounded-lg"
                        data-command="/help">/help</button>
                <button class="quick-command bg-gray-500 hover:bg-gray-600 text-white px-4 py-1 rounded-lg"
                        data-command="/stats">/stats</button>
                <button class="quick-command bg-gray-500 hover:bg-gray-600 text-white px-4 py-1 rounded-lg"
                        data-command="/bid">/bid</button>
                <button class="quick-command bg-gray-500 hover:bg-gray-600 text-white px-4 py-1 rounded-lg"
                        data-command="/bacon">/bacon</button>
            </div>
            <div class="flex flex-row gap-4 items-center mt-1 w-full"
                 id="chat-message-input-container">
                <input id="chat-message-input"
                       type="text"
                       class="w-full p-2 border-2 border-gray-300 placeholder:text-base rounded-lg"
                       placeholder="Enter your message...">
                <div class="flex flex-row gap-2 items-center shrink-0">
                    <button id="chat-message-submit"
                            class="bg-red-600 hover:bg-red-500 text-white p-2 rounded-lg">Send</button>
                    <button id="chat-message-clear"
                            class="bg-gray-300 hover:bg-gray-200 text-black p-2 rounded-lg">Clear</button>
                </div>
            </div>
        </div>
    </div>
    <div id="chatIcon"
         class="fixed bottom-3 right-2 bg-red-600 rounded-full p-3 w-[55px] h-[55px] flex items-center justify-center cursor-pointer shadow-lg hover:opacity-80 transition-opacity">
        <svg class="w-10 h-10 text-white"
             aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
             fill="currentColor"
             viewBox="0 0 24 24">
            <path fill-rule="evenodd" d="M3.559 4.544c.355-.35.834-.544 1.33-.544H19.11c.496 0 .975.194 1.33.544.356.35.559.829.559 1.331v9.25c0 .502-.203.981-.559 1.331-.355.35-.834.544-1.33.544H15.5l-2.7 3.6a1 1 0 0 1-1.6 0L8.5 17H4.889c-.496 0-.975-.194-1.33-.544A1.868 1.868 0 0 1 3 15.125v-9.25c0-.502.203-.981.559-1.331ZM7.556 7.5a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2h-8Zm0 3.5a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2H7.556Z" clip-rule="evenodd" />
        </svg>
    </div>
</div>
<!-- Scripts -->
<script>
        document.addEventListener('DOMContentLoaded', function () {
            const organizationsBtn = document.getElementById('organizations-btn');
            const organizationsDropdown = document.getElementById('organizations-dropdown');
            const queryInput = document.getElementById('query-input');
    
            // Function to get URL parameters
            function getUrlParameter(name) {
                const params = new URLSearchParams(window.location.search);
                return params.get(name);
            }
    
            // Set initial values from URL parameters if they exist
            const savedQuery = getUrlParameter('query');
            const savedType = getUrlParameter('type');
    
            if (queryInput && savedQuery) {
                queryInput.value = savedQuery;
            }
    
            if (savedType) {
                // Find the matching filter option
                const matchingOption = document.querySelector(`.filter-option[data-value="${savedType}"]`);
                if (matchingOption) {
                    const iconElement = matchingOption.querySelector('i');
                    const textContent = matchingOption.textContent.trim();
                    
                    const selectedIcon = document.getElementById('selected-icon');
                    const selectedFilter = document.getElementById('selected-filter');
                    const filterType = document.getElementById('filter-type');
                    
                    // Update the button display if elements exist
                    if (selectedIcon && selectedFilter && filterType) {
                        selectedIcon.className = iconElement.className + ' mr-2';
                        selectedFilter.textContent = textContent;
                        filterType.value = savedType;
                    }
                }
            }
    
            if (organizationsBtn && organizationsDropdown) {
                organizationsBtn.addEventListener('click', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
    
                    const isHidden = organizationsDropdown.classList.toggle('hidden');
    
                    if (!isHidden) {
                        const btnRect = organizationsBtn.getBoundingClientRect();
                        Object.assign(organizationsDropdown.style, {
                            position: 'fixed',
                            top: `${btnRect.bottom}px`,
                            left: `${btnRect.left}px`,
                            minWidth: `${btnRect.width}px`,
                            display: 'block',
                        });
                    } else {
                        organizationsDropdown.style.display = 'none';
                    }
                });
    
                // Close dropdown when clicking outside
                document.addEventListener('click', function (e) {
                    if (!organizationsBtn.contains(e.target) && !organizationsDropdown.contains(e.target)) {
                        organizationsDropdown.classList.add('hidden');
                        organizationsDropdown.style.display = 'none';
                    }
                });
            }
    
            // Only add event listeners to filter options if they exist
            const filterOptions = document.querySelectorAll('.filter-option');
            if (filterOptions.length > 0) {
                filterOptions.forEach(option => {
                    option.addEventListener('click', function (e) {
                        e.preventDefault();
                        const iconElement = this.querySelector('i');
                        const textContent = this.textContent.trim();
                        const filterValue = this.getAttribute('data-value');
                        
                        const selectedIcon = document.getElementById('selected-icon');
                        const selectedFilter = document.getElementById('selected-filter');
                        const filterType = document.getElementById('filter-type');
                        
                        if (selectedIcon && selectedFilter && filterType) {
                            selectedIcon.className = iconElement.className + ' mr-2';
                            selectedFilter.textContent = textContent;
                            filterType.value = filterValue;
                        }
    
                        if (organizationsDropdown) {
                            organizationsDropdown.classList.add('hidden');
                            organizationsDropdown.style.display = 'none';
                        }
                    });
                });
            }
        });
</script>
<script>
        document.getElementById('chatIcon').addEventListener('click', function () {
            document.getElementById('chatbot').classList.remove('hidden');
            this.classList.add('hidden');
        });
    
        document.getElementById('closeChatbot').addEventListener('click', function () {
            document.getElementById('chatbot').classList.add('hidden');
            document.getElementById('chatIcon').classList.remove('hidden');
        });
    
        document.addEventListener('DOMContentLoaded', (event) => {
            const chatLog = document.querySelector('#chat-log');
            const chatInput = document.querySelector('#chat-message-input');
            const chatSubmit = document.querySelector('#chat-message-submit');
            const chatClear = document.querySelector('#chat-message-clear');
            const chatClose = document.querySelector('#closeChatbot');
            const loading = document.querySelector('#loading');
            const quickCommands = document.querySelectorAll('.quick-command');
        
            function escapeHtml(text) {
                return text.replace(/</g , "&lt;").replace( />/g, "&gt;");
            }
        
            function handleSlashCommand(command, args) {
                let response = '';
                switch (command) {
                    case '/help':
                        response = '<strong>Available Commands:</strong><br>' +
                            '/help - Show this message<br>' +
                            '/report &lt;description&gt; - Report a bug<br>' +
                            '/gsoc - Get GSoC info<br>' +
                            '/stats - View platform stats<br>';
                        chatLog.innerHTML += '<div class="bg-blue-300 text-black p-2 rounded-lg mb-2">Bot - ' + response + '</div>';
                        chatLog.scrollTop = chatLog.scrollHeight;
                        return true;
                    case '/report':
                        if (!args) {
                            response = 'Please provide a description. Usage: /report &lt;description&gt;';
                            chatLog.innerHTML += '<div class="bg-blue-300 text-black p-2 rounded-lg mb-2">Bot - ' + response + '</div>';
                            chatLog.scrollTop = chatLog.scrollHeight;
                            return true;
                        }
                        return false;
                    case '/gsoc':
                        response = '<strong>Google Summer of Code (GSoC) Info:</strong><br>' +
                            'Explore OWASP\'s GSoC participation:<br>' +
                            '- Current projects: <a href="https://owasp.org/www-community/initiatives/gsoc/gsoc2025ideas">GSoC 2025 Ideas</a><br>' +
                            'Get involved with open-source at OWASP!';
                        chatLog.innerHTML += '<div class="bg-blue-300 text-black p-2 rounded-lg mb-2">Bot - ' + response + '</div>';
                        chatLog.scrollTop = chatLog.scrollHeight;
                        return true;
                    case '/stats':
                        response = 'Platform stats are not directly available via the bot yet. Please check the website dashboard or ask an admin for detailed statistics.';
                        chatLog.innerHTML += '<div class="bg-blue-300 text-black p-2 rounded-lg mb-2">Bot - ' + response + '</div>';
                        chatLog.scrollTop = chatLog.scrollHeight;
                        return true;
                    default:
                        return false;
                }
            }
        
            chatSubmit.onclick = function () {
                const message = chatInput.value.trim();
                chatInput.value = '';
                if (message === "") return;
        
                const escapedMessage = escapeHtml(message);
                chatLog.innerHTML += '<div class="bg-green-300 text-black p-2 rounded-lg mb-2"> You - ' + escapedMessage + '</div>';
                loading.classList.remove('hidden');
        
                // Check for slash command
                if (message.startsWith('/')) {
                    const [command, ...argsArr] = message.split(' ');
                    const args = argsArr.join(' ').trim();
                    if (handleSlashCommand(command, args)) {
                        loading.classList.add('hidden');
                        return;
                    }
                }
        
                fetch('/api/chatbot/conversation/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ question: message }),
                })
                    .then(response => {
                        if (!response.ok) {
                            if (response.status === 429) {
                                throw new Error('Rate limit exceeded');
                            }
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        const escapedAnswer = escapeHtml(data.answer);
                        chatLog.innerHTML += '<div class="bg-blue-300 text-black p-2 rounded-lg mb-2">Bot - ' + escapedAnswer + '</div>';
                        chatLog.scrollTop = chatLog.scrollHeight;
                        loading.classList.add('hidden');
                    })
                    .catch((error) => {
                        let errorMessage = 'Sorry, I am unable to process your request at the moment. Please try again later.';
                        if (error.message === 'Rate limit exceeded') {
                            errorMessage = 'The request limit has been reached. Please try again later.';
                        }
                        chatLog.innerHTML += '<div class="bg-red-300 text-black p-2 rounded-lg mb-2">Bot - ' + errorMessage + '</div>';
                        chatLog.scrollTop = chatLog.scrollHeight;
                        loading.classList.add('hidden');
                    });
            };
        
            function clearChat() {
                loading.classList.remove('hidden');
                fetch('/api/chatbot/conversation/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ question: "exit" }),
                })
                    .then(response => response.json())
                    .then(data => {
                        chatLog.innerHTML = '';
                        loading.classList.add('hidden');
                    })
                    .catch((error) => {
                        console.error('Error:', error);
                        loading.classList.add('hidden');
                    });
            }
        
            chatClear.onclick = clearChat;
            chatClose.onclick = clearChat;
        
            chatInput.addEventListener('keyup', function (event) {
                if (event.keyCode === 13) {  // Enter key
                    chatSubmit.click();
                }
            });
        
            // Handle quick command button clicks
            quickCommands.forEach(button => {
                button.addEventListener('click', function () {
                    const command = this.getAttribute('data-command');
                    chatInput.value = command;
                    chatSubmit.click();
                });
            });
        });

        document.addEventListener('DOMContentLoaded', function () {
            const dropdownButton = document.getElementById('dropdownButton');
            const dropdownMenu = document.getElementById('dropdownMenu');
        
            if (dropdownButton && dropdownMenu) {
                // Toggle dropdown on button click
                dropdownButton.addEventListener('click', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    dropdownMenu.classList.toggle('hidden');
                });
        
                // Close dropdown when clicking outside
                document.addEventListener('click', function (e) {
                    if (!dropdownButton.contains(e.target) && !dropdownMenu.contains(e.target)) {
                        dropdownMenu.classList.add('hidden');
                    }
                });
            }
        });
        
</script>
<script>
        function toggleMobileSearch() {
            const mobileSearch = document.getElementById('mobile-search');
            mobileSearch.classList.toggle('hidden');
            mobileSearch.classList.toggle('active');
        }
</script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const notificationButton = document.getElementById("notificationButton");
        const notificationDropdown = document.getElementById("notificationDropdown");
        const unreadCount = document.getElementById("unreadCount");
        const notificationList = document.getElementById("notificationList");

        async function fetchNotifications() {
            try {
                const response = await fetch("{% url 'fetch_notifications' %}", {
                    method: "GET",
                    headers: {
                        "X-CSRFToken": "{{ csrf_token }}",
                    },
                });

                if (!response.ok) {
                    throw new Error("Failed to fetch notifications");
                }

                const data = await response.json();
                if (!data || !Array.isArray(data.notifications)) {
                    console.error("Invalid notifications data format");
                    notificationList.innerHTML = "<p class='text-sm text-gray-500'>Unable to load notifications.</p>";
                    return;
                }
        
                const notifications = data.notifications;
        

                notificationList.innerHTML = "";

                const unreadNotifications = notifications.filter(notification => !notification.is_read);
                if (unreadNotifications.length > 0) {
                    unreadCount.textContent = unreadNotifications.length;
                    unreadCount.classList.remove("hidden"); 
                } else {
                    unreadCount.textContent = ""; 
                    unreadCount.classList.add("hidden"); 
                }

                if (notifications.length === 0) {
                    notificationList.innerHTML = "<p class='text-sm text-gray-500'>No new notifications.</p>";
                    return;
                }

                notifications.forEach(notification => {
                    const notificationItem = document.createElement("div");
                    notificationItem.classList.add(
                        "flex", "items-start", "gap-3", "p-3", "rounded-lg", "hover:bg-gray-100", "transition-colors",
                        !notification.is_read ? "bg-gray-50" : "bg-white", 
                        !notification.is_read ? "font-semibold" : "font-normal" 
                    );

                    if (notification.link) {
                        notificationItem.addEventListener("click", () => {
                            window.location.href = notification.link;
                        });
                        notificationItem.classList.add("cursor-pointer");
                    }

                    notificationItem.innerHTML = `
                        <div class="flex-shrink-0">
                            ${getNotificationIcon(notification.notification_type)}
                        </div>
                        <div class="flex-1">
                            <p class="text-sm">${notification.message}</p>
                            <p class="text-xs text-gray-500">${timeSince(notification.created_at)} ago</p>
                        </div>
                        <button class="delete-notification p-1 text-gray-400 hover:text-red-500 transition-colors" data-notification-id="${notification.id}">
                            <i class="fa fa-times"></i>
                        </button>
                    `;

                    notificationList.appendChild(notificationItem);
                });

                document.querySelectorAll(".delete-notification").forEach(button => {
                    button.addEventListener("click", function (e) {
                        e.stopPropagation();
                        const notificationId = this.getAttribute("data-notification-id");
                        console.log("Deleting notification with ID:", notificationId);
                        deleteNotification(notificationId, this.closest("div")); 
                    });
                });
            } catch (error) {
                console.error(error);
                notificationList.innerHTML = "<p class='text-sm text-gray-500'>Error loading notifications.</p>";
            }
        }

        function getNotificationIcon(type) {
            switch (type) {
                case "alert":
                    return '<i class="fa fa-exclamation-circle text-red-500 fa-lg"></i>';
                case "reminder":
                    return '<i class="fa fa-clock text-yellow-500 fa-lg"></i>';
                case "promo":
                    return '<i class="fa fa-tag text-green-500 fa-lg"></i>';
                case "reward":
                    return '<i class="fa fa-gift text-purple-500 fa-lg"></i>';
                default:
                    return '<i class="fa fa-info-circle text-blue-500 fa-lg"></i>';
            }
        }

        function timeSince(dateString) {
            const date = new Date(dateString);
            const now = new Date();
            const seconds = Math.floor((now - date) / 1000);

            let interval = Math.floor(seconds / 31536000);
            if (interval > 1) return interval + " years";

            interval = Math.floor(seconds / 2592000);
            if (interval > 1) return interval + " months";

            interval = Math.floor(seconds / 86400);
            if (interval > 1) return interval + " days";

            interval = Math.floor(seconds / 3600);
            if (interval > 1) return interval + " hours";

            interval = Math.floor(seconds / 60);
            if (interval > 1) return interval + " minutes";

            return Math.floor(seconds) + " seconds";
        }

        async function deleteNotification(notificationId, notificationElement) {
            try {
                if (!notificationId) {
                    console.error("Notification ID is undefined");
                    return;
                }
                
                const response = await fetch(`/notifications/delete_notification/${notificationId}`, {
                    method: "DELETE",
                    headers: {
                        "X-CSRFToken": "{{ csrf_token }}",
                        "Content-Type": "application/json", 
                    },
                    credentials: "include",
                });
        
                if (!response.ok) {
                    throw new Error(`Failed to delete notification: ${response.statusText}`);
                }
        
                const data = await response.json(); 
                if (data.status === "success") {
                    notificationElement.remove();
        
                    const unreadNotifications = document.querySelectorAll(".bg-gray-50");
                    if (unreadNotifications.length === 0) {
                        unreadCount.textContent = "";
                        unreadCount.classList.add("hidden");
                    }
                } else {
                    throw new Error(data.message || "Failed to delete notification");
                }
            } catch (error) {
                console.error(error);
                alert("Failed to delete notification. Please try again.");
            }
        }

        fetchNotifications();

        notificationButton.addEventListener("click", function () {
            notificationDropdown.classList.toggle("hidden");

            if (!notificationDropdown.classList.contains("hidden")) {
                fetchNotifications();

                fetch("{% url 'mark_all_read' %}", {
                    method: "PATCH",
                    headers: {
                        "X-CSRFToken": "{{ csrf_token }}",
                        "Content-Type": "application/json",
                    },
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === "success") {
                            unreadCount.textContent = "";
                            unreadCount.classList.add("hidden"); 
                            document.querySelectorAll(".bg-gray-50").forEach(el => {
                                el.classList.remove("bg-gray-50", "font-semibold");
                                el.classList.add("bg-white", "font-normal");
                            });
                        }
                    });
            }
        });

        document.addEventListener("click", function (event) {
            const isClickInside = notificationButton.contains(event.target) || notificationDropdown.contains(event.target);
            if (!isClickInside) {
                notificationDropdown.classList.add("hidden");
            }
        });
    });

</script>