{% load static %}
{% load gravatar %}
{% load socialaccount %}
{% load user_score %}
{% providers_media_js %}
{% load i18n %}
{% load custom_tags %}


<nav class="navbar-default relative top-0 border-b h-[80px] w-screen 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 class="lg:hidden">
                <a class="dropdown-toggle hover:no-underline !no-underline" data-toggle="dropdown" href="#">
                    <i class="fa fa-bars !text-5xl text-red-500 "></i>
                </a>
                <!-- Dropdown for Settings Icon -->
                <ul class="dropdown-menu left-1">
                    <li>
                        <a href="/report">
                            <i class="fa fa-bug fa-fw"></i>
                            {% trans "Report a Bug" %}
                        </a>
                    </li>
                    <li>
                        <a href="/search">
                            <i class="fa fa-search fa-fw"></i>
                            {% trans "Search" %}
                        </a>
                    </li>
                    <li class="divider"></li>
                    {% if request.user.is_authenticated %}
                    <li>
                        <a href="/accounts/logout/">
                            <i class="fa fa-sign-out fa-fw"></i> {% trans "Logout" %}
                        </a>
                    </li>
                    {% else %}
                    <li>
                        <a href="/accounts/signup"
                        target="_new">
                            <i class="fa fa-user-plus fa-fw"></i>
                            {% trans "Sign Up" %}
                        </a>
                    </li>
                    <li>
                        <a href="/accounts/login/">
                            <i class="fa fa-sign-in fa-fw"></i> {% trans "Login" %}
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </div>
            <div class="flex flex-col items-center h-full">
                <a class="" href="/">
                    <img src="{% static 'img/logo-large-transparent.png' %}" class="max-w-[200px]">
                </a>
                <p class="text-center nav-hidden sm:!inline">Report Issues, Win Prizes</p>
            </div>
        </div>

        <!-- Search Bar -->
        <form class="h-max m-0" action="/search" method="get">
            <div class="flex items-center w-full h-full nav-hidden sm:!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">
                <a href="/report/" class="nav-hidden 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">
                    Report a Bug
                </a>
            </div>
            
        </form>
         
        <ul class="flex items-center">
            <!-- Search Icon -->
            <a href="/search/" class="xs-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="dropdown h-[80px] flex justify-center items-center">
                <a class="dropdown-toggle relative flex items-center sm:gap-3 mr-[30px]" data-toggle="dropdown" href="#">
                    {% if request.user.userprofile.avatar %}
                    <img src="{{ request.user.userprofile.avatar }}" class="h-[30px] w-[30px] rounded-full">
                    {% 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">
                    {% else %}
                    {% gravatar request.user.email 30 '' 'gravatar rounded-full' %}
                    {% endif %}
                    <span class="absolute -right-[25px] -bottom-[25px] sm:static whitespace-nowrap">{{ request.user.username }} ({{ request.user|score|default:"0" }} Pts)
                        <i class="fa fa-caret-down text-red-500"></i>
                    </span> 
                </a>
                <!-- Dropdown for User Avatar -->
                <ul class="dropdown-menu left-auto right-0">
                    <li>
                        <a href="/accounts/profile/">
                            <i class="fa fa-user fa-fw"></i> {% trans "User Profile" %}
                        </a>
                    </li>
                    <li>
                        <a href="{% env 'EXTENSION_URL' %}"
                        target="_new">
                            <i class="fa fa-chrome fa-fw"></i>
                            {% trans "Add to chrome" %}
                        </a>
                    </li>
                    <li>
                        <a href="/start">
                            <i class="fa fa-play fa-fw"></i> {% trans "Start a Bug Hunt" %}
                        </a>
                    </li>
                    <li>
                        <a href="/social">
                            <i class="fa fa-share fa-fw"></i>
                            {% trans "Social" %}
                        </a>
                    </li>
                    <li>
                        <a href="/start">
                            <i class="fa fa-bug fa-fw"></i>
                            {% trans "Bug Hunt" %}
                        </a>
                    </li>
                    <li>
                        <a href="/accounts/password/change/">
                            <i class="fa fa-gear fa-fw"></i> {% trans "Change Password" %}
                        </a>
                    </li>
                    <li>
                        <a href="/invite/">
                            <i class="fa fa-paper-plane fa-fw"></i> {% trans "Invite Friends" %}
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="/accounts/logout/">
                            <i class="fa fa-sign-out fa-fw"></i> {% trans "Logout" %}
                        </a>
                    </li>
                </ul>
            </li>
            {% else %}
            <!-- Sign up and Log in Buttons -->
            <div class="nav-hidden sm:!flex h-[80px] justify-center items-center">
                <a href="/accounts/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="/accounts/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="/accounts/login" class="block sm:hidden mr-[30px]">
                <i class="fa fa-user !text-5xl text-red-500"></i>
            </a>
            {% endif %}
        </ul>




            {% comment %} <ul class="nav navbar-nav navbar-right">
                <li>
                    <p class="navbar-text">Found a bug ?</p>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-intro="Click here to report any kind of bug."
                        data-step="1" data-toggle="dropdown"><b>Report here</b> <span class="caret"></span></a>
                    <ul id="issue-dp" class="dropdown-menu">
                        <li>
                            <div class="row">
                                <div class="col-md-12">
                                    <form class="form" action="/issue/" method="post" enctype="multipart/form-data">
                                        {% csrf_token %}
                                        <div class="form-group">
                                            <input class="form-control required"
                                                placeholder="https://testsite.com/bug-found" name="url"
                                                value="{{ form.url.value|default:"" }}">
                                        </div>
                                        <div class="form-group">
                                            <textarea data-required="true" name="description" id="description"
                                                class="form-control required" rows="3"
                                                placeholder="{% trans "Describe bug issue" %}">{{ form.description.value|default:"" }}</textarea>
                                        </div>
                                        <div class="form-group">
                                            <select required name="label" class="form-control">
                                                <option value="0" selected="selected">General</option>
                                                <option value="1">Number error</option>
                                                <option value="2">Functional</option>
                                                <option value="3">Performance</option>
                                                <option value="4">Security</option>
                                                <option value="5">Typo</option>
                                                <option value="6">Design</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <span>
                                                <input type="file" class="required" id='${multipartFilePath}'
                                                    name="screenshot" />
                                                <button style="width: 100%" class="btn btn-primary"
                                                    name="test_files" type="button">
                                                    <i class="fa fa-upload" aria-hidden="true"></i>
                                                    {% trans "Upload Screenshot" %}
                                                </button>
                                                <center><span style="margin-top: 10px;"
                                                        class="badge badge-important"></span></center>
                                            </span>
                                        </div>
                                        {% csrf_token %}
                                        {{ captcha_form.captcha }}
                                        <div class="bottom text-center">
                                            <button type="submit" id="report-bug-btn" class="btn btn-default">
                                                <i style="display: none;" id="spinner" class="fa fa-spinner fa-spin"
                                                    aria-hidden="true"></i>
                                                {% trans "Report Bug" %}
                                                <i class="fa fa-trophy" aria-hidden="true">+3</i>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul> {% endcomment %}
    </div>
</nav>