{% load static %}
{% load gravatar %}
{% load socialaccount %}
{% load user_score %}
{% providers_media_js %}
{% load i18n %}
{% load custom_tags %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const desktopDropdownButton = document.getElementById('dropdownButton');
        const desktopDropdownMenu = document.getElementById('dropdownMenu');

        if (desktopDropdownButton && desktopDropdownMenu) {
            desktopDropdownButton.addEventListener('click', () => {
                desktopDropdownMenu.classList.toggle('hidden');
            });
            document.addEventListener('click', (e) => {
                if (!desktopDropdownButton.contains(e.target) && !desktopDropdownMenu.contains(e.target)) {
                    desktopDropdownMenu.classList.add('hidden');
                }
            });
        }

        const mobileDropdownButton = document.getElementById('dropdown-toggle-mobile');
        const mobileDropdownMenu = document.getElementById('dropdown-mobile');
        if (mobileDropdownButton && mobileDropdownMenu) {
            mobileDropdownButton.addEventListener('click', () => {
                mobileDropdownMenu.classList.toggle('hidden');
            });
            document.addEventListener('click', (e) => {
                if (!mobileDropdownButton.contains(e.target) && !mobileDropdownMenu.contains(e.target)) {
                    mobileDropdownMenu.classList.add('hidden');
                }
            });
        }
    });
</script>
<nav class="relative top-0 border-b h-[80px] w-auto flex flex-col justify-center items-center">
    <div class="flex w-[97vw] justify-between items-center">
        <div class="flex items-center gap-[30px] ml-[20px]">
            <!-- Settings Icon -->
            <div>
                <a id="dropdown-toggle-mobile"
                   class="hover:no-underline lg:hidden"
                   href="#">
                    <i class="fa fa-bars !text-5xl text-red-500 z-50"></i>
                </a>
                <!-- Dropdown for Settings Icon -->
                <ul id="dropdown-mobile"
                    class="z-50 fixed top-32 flex flex-col gap-2 shadow-xl rounded py-4 px-6 bg-white left-1 hidden">
                    <li>
                        <a href="{% url 'report' %}">
                            <i class="fa fa-bug fa-fw"></i>
                            {% trans "Report a Bug" %}
                        </a>
                    </li>
                    <li>
                        <a href="{% url 'search' %}">
                            <i class="fa fa-search fa-fw"></i>
                            {% trans "Search" %}
                        </a>
                    </li>
                    {% if request.user.is_authenticated %}
                        <li class="border my-2 -mx-4"></li>
                        <li>
                            <a href="{% url 'account_logout' %}">
                                <i class="fa fa-sign-out fa-fw"></i> {% trans "Logout" %}
                            </a>
                        </li>
                    {% else %}
                        <li>
                            <a href="{% url 'account_signup' %}" target="_new">
                                <i class="fa fa-user-plus fa-fw"></i>
                                {% trans "Sign Up" %}
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'account_login' %}">
                                <i class="fa fa-sign-in fa-fw"></i> {% trans "Login" %}
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </div>
            <div class="flex flex-col items-start  h-full">
                <a href="{% url 'index' %}">
                    <img src="{% logo 'TRANSPARENT' %}"
                         class="!max-w-[130px] lg:max-w-[200px]"
                         alt="logo"
                         width="auto"
                         height="auto">
                </a>
                <p class="text-center sm:!inline text-base lg:text-2xl pl-1">{% trans "Report Issues, Win Prizes" %}</p>
            </div>
        </div>
        <!-- Search Bar -->
        <form class="h-max m-0" action="{% url 'search' %}" method="get">
            <div class="items-center w-full h-full nav-hidden lg:!block">
                <i class="fa fa-search relative left-[28px] top-[-2px] text-gray-700 text-base nav-hidden lg:!inline-block"></i>
                <input type="text"
                       name="query"
                       placeholder="{% trans " Search" %}"
                       class="w-[200px] h-[38px] pl-[30px] nav-hidden lg:!inline-block bg-[#ececece1] outline-[#e4e4e4] outline-[1px]">
                <a href="{% url 'report' %}"
                   class="lg:!inline-block bg-red-500 hover:bg-red-600 h-[38px] py-[8px] px-[25px] whitespace-nowrap !text-2xl font-bold text-white leading-[21px] cursor-pointer hover:text-white hover:no-underline">
                    {% trans "Report a Bug" %}
                </a>
                <a href="{% url 'hunts' %}"
                   class="lg:!inline-block bg-red-500 hover:bg-red-600 h-[38px] py-[8px] px-[25px] whitespace-nowrap !text-2xl font-bold text-white leading-[21px] cursor-pointer hover:text-white hover:no-underline">
                    {% trans "Bughunts" %}
                </a>
            </div>
        </form>
        <ul class="flex items-center">
            <!-- Search Icon -->
            <a href="{% url 'search' %}" class="hidden lg:hidden mr-[30px]">
                <i class="fa fa-search !text-5xl text-red-500"></i>
            </a>
            <!-- User Avatar -->
            {% if request.user.is_authenticated %}
                <li class="h-[80px] flex justify-center items-center ">
                    <button id="dropdownButton"
                            class="relative flex items-center sm:gap-3 mr-[30px]"
                            type="button">
                        {% if request.user.userprofile.avatar %}
                            <img src="{{ request.user.userprofile.avatar }}"
                                 class="h-[30px] w-[30px] 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="h-[30px] w-[30px] rounded-full "
                                 alt="User Avatar"
                                 width="30"
                                 height="30">
                        {% else %}
                            {% gravatar request.user.email 30 '' 'gravatar rounded-full' %}
                        {% endif %}
                        <span class="absolute -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)
                        <i class="fa fa-caret-down text-red-500"></i>
                    </span>
                </button>
                <!-- Dropdown for User Avatar -->
                <div id="dropdownMenu"
                     class="z-50 hidden absolute bg-white top-32 right-5">
                    <ul class="flex flex-col gap-2 px-8 py-4 border shadow-xl rounded-lg left-auto">
                        <li>
                            <a href="{% url 'account_profile' %}">
                                <i class="fa fa-user fa-fw"></i> {% trans "User Profile" %}
                            </a>
                        </li>
                        <li>
                            <a href="{% env 'EXTENSION_URL' %}"
                               target="_new"
                               rel="noopener noreferrer">
                                <i class="fa fa-chrome fa-fw"></i>
                                {% trans "Add to chrome" %}
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'start_hunt' %}">
                                <i class="fa fa-play fa-fw"></i> {% trans "Start a Bug Hunt" %}
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'social' %}">
                                <i class="fa fa-share fa-fw"></i>
                                {% trans "Social" %}
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'account_change_password' %}">
                                <i class="fa fa-gear fa-fw"></i> {% trans "Change Password" %}
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'invite' %}">
                                <i class="fa fa-paper-plane fa-fw"></i> {% trans "Invite Friends" %}
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'company_view' %}">
                                <i class="fa fa-building fa-fw"></i> {% trans "Company Dashboard" %}
                            </a>
                        </li>
                        <!-- divider -->
                        <li class="border my-4 -mx-8"></li>
                        <li>
                            <a href="{% url 'account_logout' %}">
                                <i class="fa fa-sign-out fa-fw"></i> {% trans "Logout" %}
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
        {% else %}
            <!-- Sign up and Log in Buttons -->
            <div class="lg:!flex h-[80px] justify-center items-center">
                <a href="{% url 'account_signup' %}"
                   class="h-[38px] px-[25px] py-[9px] bg-red-500 hover:bg-red-600 hover:no-underline text-white font-bold text-2xl mr-[20px] hover:text-white">
                {% trans "Signup" %}</a>
                <a href="{% url 'account_login' %}"
                   data-toggle="modal"
                   class="h-[38px] px-[25px] py-[9px] bg-red-500 hover:bg-red-600 hover:no-underline text-white font-bold text-2xl mr-[20px] hover:text-white">
                {% trans "Login" %}</a>
            </div>
            <!-- Log in icon -->
            <a href="{% url 'account_login' %}" class="block sm:hidden mr-[30px]">
                <i class="fa fa-user !text-5xl text-red-500"></i>
            </a>
        {% endif %}
    </ul>
</div>
</nav>